Shena'Fu's Online Card Creator

Started by Den, 2009-Aug-20 08:33

Previous topic - Next topic

Den

#50
2022/03/23

; new frames ; Vogon Deco ; Art Deco style, including fonts

In Vogon Deco, the P/T now also acts like Mana Cost. Use Mana Cost and P/T to display symbols in fixed positions on the card. Use space in Mana Cost or P/T to levae a position blank and advance to the next position. Mana Cost surrounds the art; P/T surrounds the rules.

Recommend you utilize Custom Mana to use your own symbols.

The symbols appear quite large, like some other CCGs. Vogon Deco is great frame if your CCG or card uses a lot of symbols. You can put even more (smaller) icons in the extra bar (which behaves like rules, so use rules syntax.)

Even for Magic, you can use icons for evergreen keywords, like flying, haste, trample, etc.




2022/03/24

; flavor text ; allow bold text with <>




2022/03/26

; use Stored Procedures




2022/03/27

; tribrid mana ; i/n/f = infinite ; c/h/a = chaos (planeswalk)
Support me on Patreon

I saw. I conquered. I came.

Den

#51
Possible to allow custom or user defined frames ?

  • Reasons
    • any possible frame may be created by anyone
    • l can't do them all myself
    • won't have to include into crowded drop down
  • Concerns
    • Security
    • Methodology
    • Ease of use
    • Resources locations
    • Undiscovered additional rendering or other code
    • Special frames, i.e. split cards, flip, levelers, planeswalkers
  • Ideas
    • VSV / JSON file includes
      • URLs to
        • frame images
        • masks
        • fonts
        • custom mana
      • PHP class ?
      • options parameters to pass to functions
    • API
      • drawing functions
      • rules box


Any comments and suggestions welcome.
Support me on Patreon

I saw. I conquered. I came.

Den

#52
2022/04/03




; new image manipulation command ; ##transparent,color,alpha
; color is HTML format: 6-hex-digits with leading hash #
; alpha is float between 0.0 and 1.0

Ex. turn cyan invisible
##transparent,#00ffff,0.0




; allow multiple images per field ; all image URLs ; delimiter double dollars $$

All image fields (seticon, typeicon, watermark, overlay, art) may accept multiple images. At the end of the URL, append $$ double dollars for each extra image. Each image can also have their own image manipulation commands. These commands go before the $$.

Not to be confused with double semicolons ;; that separates each half of a split card. $$ and ;; can work together to provide multiple images to one or both halves.

Ex. two images on top of each other
https://ieants.cc/magic/symbols/guilds/mana_rw.png$$https://ieants.cc/magic/symbols/guilds/mana_wu.png

Ex. two guild symbols side by side
https://ieants.cc/magic/symbols/guilds/mana_rw.png##pad,r,205##alpha,0.1618$$https://ieants.cc/magic/symbols/guilds/mana_wu.png##pad,l,205##alpha,0.1618

Here we pad images to "push" them to left or right. Then alpha the images.

Ex. each half of a split card gets two different watermarks (total 4 different watermarks)
https://ieants.cc/magic/symbols/guilds/mana_rw.png##pad,r,205##alpha,0.1618$$https://ieants.cc/magic/symbols/guilds/mana_wu.png##pad,l,205##alpha,0.1618;;https://ieants.cc/magic/symbols/guilds/mana_gw.png##pad,r,205##alpha,0.1618$$https://ieants.cc/magic/symbols/guilds/mana_br.png##pad,l,205##alpha,0.1618

Support me on Patreon

I saw. I conquered. I came.

Den

#53

2022/04/04 - 2022/04/17
 update hints
 image commands  raise to 9
 ccimg  allow query string options for w=, h=
 cclist, ccrand  resize images to h=523
 cclist, ccrand  open cards in new tabs where target=cardname or creator or _blank
 seticon  fix crash if invalid URL
 ##pad  allow transparent background
 PW or Leveler  fix crash if ability is blank
 vogon frames  darken seams on green frames
 playing card  art is see-through where rules texts are
 playing card  text is white if background is black
 blending  option for custom, premade blend masks

Support me on Patreon

I saw. I conquered. I came.

Den

#54
2022/10/14

; allow custom frames ; provide URL to .von or .json file

Design your own frames. Arrange elements anywhere on the card as you please. Customize font sizes, arrange texts, resize art elements, select background images.

Choose "Custom" from the "Frame" drop down menu. Then, in the "Custom Frame" input field, provide a URL to a .von or .json file, that defines your custom frame.

sample files
https://ieants.cc/magic/customframe/cf-0.von
https://ieants.cc/magic/customframe/cf-1.von
https://ieants.cc/magic/customframe/cf-1.json
https://ieants.cc/magic/customframe/movie.von
https://ieants.cc/magic/customframe/fullartrules.von
https://ieants.cc/magic/customframe/sportscard.von


Also see attached sample images resulting from these custom frames.

Basic layout of the frame definition files is an array composed of sections (which are objects or hashes). The sections are drawn and painted on the card in the same order in the root array. So rearrange, add, or remove sections as you please.

Each section must state a section type. Each type has their own options parameters. Use "cf-0.von" as template; it contains most common options you may need for every section. Eventually I would write more detailed instructions in a dedicated help page.

Section types may be repeated. For instance, a text section to print the card name, and another text section to print card type. (Warning: Meta section should not be repeated. This creates a new image and undoes all previous sections. )

Text section prints everything on a single line. Rules section prints across multiple lines, and allows bold and italic and other advanced formatting.

For text and rules types, the "text" option may contain special code to insert strings from other fields. Such as inserting card name, card type, etc. Enclose them inside angled brackets and dash <- ->.
Ex.
`text`<-cardname->
`text`Illus. by <-artist->
`text`<-supertype-> <-cardtype->
`rulestext`<-rulestext->
`flavortext`<-flavortext->

For text, rules, and cost types, can also set the font types. Text and cost has only the "font" option. Rules has four options: textfont, boldfont, italicfont, and bolditalicfont. Omitting them will use default fonts.

Fonts are limited to my webhost server. Below are the fonts available. May add more upon request. Use exact spelling, including capitalization, and extension.

[spoiler]
  • albertus_medium-regular.ttf
  • Amita-Bold.ttf
  • Amita-Regular.ttf
  • boecklinsuniverse-regular.ttf
  • CaviarDreams.ttf
  • CaviarDreams_Bold.ttf
  • CaviarDreams_BoldItalic.ttf
  • CaviarDreams_Italic.ttf
  • crimson-bold.ttf
  • crimson-bolditalic.ttf
  • crimson-italic.ttf
  • crimson-regular.ttf
  • FhaNicholson-Regular.ttf
  • fondamento-italic.ttf
  • fondamento-regular.ttf
  • Hack-Bold.ttf
  • Hack-BoldItalic.ttf
  • Hack-Italic.ttf
  • Hack-Regular.ttf
  • itim-regular.ttf
  • kelvinch-bold.ttf
  • kelvinch-regular.ttf
  • Molengo-Regular.ttf
  • SourceCodePro-Bold.ttf
  • SourceCodePro-It.ttf
  • SourceCodePro-Regular.ttf
  • ubuntu-bold.ttf
  • ubuntu-bolditalic.ttf
  • ubuntu-italic.ttf
  • ubuntu-medium-regular.ttf
  • ubuntu-regular.ttf
  • ubuntumono-regular.ttf

[/spoiler]

You can also paint static images using the image-drawing sections (art, watermark, seticon, typeicon, overlay.) Their options are respectively: arturl, wmurl, seticonurl, typeiconurl, overlayurl. You can also apply image manipulation commands after the URL.

Ex.
,arturl,https://ieants.cc/images/kara-fansy_logo.png
,wmurl,https://ieants.cc/images/kara-fansy_logo.png##alpha,0.618

Note that different section types have nuances. for instance, watermark is always centered around given x,y options. seticon replaces magenta #FF00FF with rarity colors.

  • TODO
  • art mask, bevel
  • drawing lines , shapes


  • Custom frame ideas
  • life counter
  • checklist
  • other CCG
  • movie poster
  • PSA (public service announcement)
  • token
  • game tips
  • business card
  • ID
  • sports card
  • statistics (for games, account, etc.)
  • memes
  • calendar
  • flash cards
Support me on Patreon

I saw. I conquered. I came.

Den

#55
2022/10/15 - 17

; frame_vogonhd, vogonvt ; bigger mana cost symbols
; cardfuncs ; multi-column tables ; using <<|C|, where C = number of columns ; subsequent pipes | will advance to next column ; pipes will create new rows when it reaches last column

Behavior for <<<< and >>>> are unchanged. These will create exactly two-column tables. Except pipes can also be used to advance these columns, and new rows if necessary.

All columns on the same row will have equal width.

Examples:

(Empty square brackets [] is used facilitate indentation.)

Column of digits:
<<|4|[]     9|[]     9|[]     9|[]     9
|[]     8|[]     8|[]     8|[]     8
|[]     7|[]     7|[]     7|[]     7
|[]     6|[]     6|[]     6|[]     6
|[]     5|[]     5|[]     5|[]     5
|[]     4|[]     4|[]     4|[]     4
|[]     3|[]     3|[]     3|[]     3
|[]     2|[]     2|[]     2|[]     2
|[]     1|[]     1|[]     1|[]     1
|[]     0|[]     0|[]     0|[]     0

Calendar:
<<|1|[]  2022                    October
<<|7|[]    M|[]    T|[]    W|[]    T|[]    F|[]    S|[]    S
|[]     |[]     |[]     |[]     |[]     |[]    1|[]    2
|[]    3|[]    4|[]    5|[]    6|[]    7|[]    8|[]    9
|[]   10|[]   11|[]   12|[]   13|[]   14|[]   15|[]   16
|[]   17|[]   18|[]   19|[]   20|[]   21|[]   22|[]   23
|[]   24|[]   25|[]   26|[]   27|[]   28|[]   29|[]   30
Support me on Patreon

I saw. I conquered. I came.

Den

#56
2022/10/18

; frame_custom ; conditions to match before drawing section

A section may have an optional array named "if". The section will only be drawn and appear on the card, if the "if" conditions are met. Each condition is represented by an array.

The root "if" is a nested array of any depth. Two basic types of condition arrays: boolean logic operators; and special functions to test the card's properties.

(In these examples, lines that begin with double parentheses (( , act as comments, and are allowed within VON files.)

Ex.
{
   ,section,overlay
   [if
      (( is planeswalker
      [,iscardtype,true,7]
   ]
}



Possible boolean operators are (at the time of this writing): AND, OR, NOT.

AND takes any number of conditions. All conditions must be met for this AND to return true.

Note the root "if" is essentially an AND condition. In this case, you must NOT prefix it with an AND declaration.

Ex. if card is artifact and creature:
[
   ,and
   [,iscardtype,true,1]
   [,iscardtype,true,4]
]

Ex. root if
[if
   [,iscardtype,true,1]
   [,iscardtype,true,4]
]

OR takes any number of conditions. One or more conditions must be met for this OR to return true.

Ex. if card is historic (legendary, artifact, and/or Saga):
[
   ,or
   [,issupertype,true,0]
   [,iscardtype,true,1]
   [,isintext,true,subtype,/Saga/]
]

NOT returns the opposite boolean value of the first given condition.

Ex. not a creature:
[
   ,not
   [,iscardtype,true,4]
]

Ex. nesting boolean conditions

[if
   (( if enchantment creature and/or a God
   [
      ,or
      [
         ,and
         [,iscardtype,true,2]
         [,iscardtype,true,4]
      ]
      [,isintext,true,subtype,/God/]
   ]
]

[if
   (( neither artifact nor creature
   [
      ,not
      [
         ,or
         [,iscardtype,true,1]
         [,iscardtype,true,4]
      ]
   ]
]



Other condition arrays are functions to test a card's property or other logic. These arrays have the following basic layout:

array[0] = the function's name
array[1] = the desired result, in boolean. See table below for valid boolean values.
array[...] = the remaining elements are parameters passed to the function, if necessary

List of Booleans
truefalse
10
yesno
onoff


The following functions are valid (at the time of this writing).

"iscardtype" takes an integer that corresponds to the card's type. This value can be found in the same order as the form in the card creator's page. Start counting from 0. (0 = tribal)

Ex. is a land
   [,iscardtype,yes,3]

Ex. NOT a land
   [,iscardtype,no,3]

"issupertype" takes an integer that corresponds to the card's supertype. This value can be found in the same order as the form in the card creator's page. Start counting from 0. (0 = legendary)

Ex. is basic
   [,issupertype,yes,1]

Ex. NOT basic
   [,issupertype,no,1]

"isintext" matches a pattern within a card's property.

List of Properties
PropertyAliases
cardnamename
manacostcostmana
powertoughnessptloyaltystat
subtype
extra
rulestextrules
flavortextflavor
seticon
typeicon
watermark
overlay
art
artist
creator


Patterns must be enclosed in identical delimiters. Legal delimiters are symbols such as "/|~#

Patterns may have modifiers after the second delimiter. A common one is "i" modifier, that matches both upper and lower case (makes the pattern case insensitive.)

List of Modifiers
ModifierUsage
iCase insensitive


Ex. "Circle" in card name
   [,isintext,true,name,"Circle"]

Ex. Warrior is NOT in subtype
   [,isintext,no,subtype,"Warrior"]

Ex. Matches "fish" but case doesn't matter
   [,isintext,yes,subtype,/fish/i]

Ex. extra field is not empty
[if
   [,isintext,true,extra,/.+/]
]
Support me on Patreon

I saw. I conquered. I came.

Den

#57
2022/10/19

; frame_custom ; save image temporarily

Can save current image temporarily, that can be redrawn later. Use section "saveimage" to save. Then in an image-drawing section (art, watermark, seticon, typeicon, overlay), put its URL as "<-savedimage->". You can also apply image manipulation commands.

Ex.
{
   ,section,saveimage
}
{
   ,section,art
   {options
      ,arturl,<-savedimage->##alpha,0.618
   }
}
Support me on Patreon

I saw. I conquered. I came.

Den

#58
2022/10/20

; frame_custom ; rulespw, ruleslevel, textlevel

Use section type "rulespw" and "ruleslevel" to print rules for Planeswalkers and Levelers, respectively. They act like rules section, but also take extra pertinent options.

Behoove to use conditions to make such sections only appear for relevant cards.

"rulespw" has extra options to customize the loyalty costs and lines that divide the abilities.

Ex.
   {
      ,section,rulespw
      [if
         (( is planeswalker
         [,iscardtype,true,7]
      ]
      {options
         ,fontsize,50.0
         ,minfontsize,12.0
         ,textboxx,130
         ,textboxy,580
         ,textboxwidth,550
         ,textboxheight,394

         ,lcfontsize,38.0
         ,loyaltycostx,5
         ,loyaltycosty,518
         ,loyaltycostw,120
         ,loyaltycosth,76

         ,dividerx,0
         ,dividerw,690
      }
   }

"ruleslevel" has extra options to customize the level information and lines that divide the abilities.

Ex.
   {
      ,section,ruleslevel
      [if
         (( is leveler, pt has ;;
         [,isintext,yes,pt,/;;/]
      ]
      {options
         ,fontsize,66.0
         ,minfontsize,12.0
         ,textletterx,0
         ,textlettery,0
         ,textboxx,86
         ,textboxy,580
         ,textboxwidth,584
         ,textboxheight,394
         ,rulestext,<-rules->
         ,flavortext,<-flavor->

         ,levelfontsize,44.0
         ,levelcostx,70
         ,levelcosty,580
         ,levelcostw,127
         ,levelcosth,88
         ,levelimage,https://ieants.cc/magic/frames/frame_vogonhd/levelup.png

         ,linex,6
         ,linew,673
         ,strokew,5
      }
   }

Use section "textlevel" to split the text across several parts. The text box will be divided evenly by the number of parts created by double semicolons ;;. Text will appear on the same row.

Extra options include "strokew" to define the width of the dividing lines, and "addflavor" which adds another part if flavor text is provided by the card. This latter is particularly useful if this text is placed alongside the rules box, and has an angle of 90 or 270 (which rotates the text clockwise by that many degrees).

Ex.
   {
      ,section,textlevel
      [if
         (( is leveler, pt has ;;
         [,isintext,yes,pt,/;;/]
      ]
      {options
         ,font,crimson-regular.ttf
         ,fontsize,40.0
         ,textx,33
         ,texty,572
         ,wmax,400
         ,textalign,center
         ,angle,270
         ,addflavor,true
         ,strokew,5
         ,text,<-pt->
      }
   }
   
Support me on Patreon

I saw. I conquered. I came.

Den

#59
2022/10/24

; frame_custom ; sections may "split"

Some sections may have an array called "split" that splits a section into several parts, delimited in its "*url" or "*text" fields by double semicolons ;;. Additional options can alter the parameters for each part. Such as placing them at different locations, or alignments, or angle. (Split doesn't cut an image into smaller parts. Rather, you can provide several URLs delimited by ;; and they will be all drawn on the card.)

"split" array holds more "options" objects. Options after the first one only need to specify the parameters that differ from the previous. All parameters will carry to subsequent parts unless altered again. If no parameters differ, provide an empty object, to denote an extra part exists.

The first options object can be outside or inside the split array. If outside, it must still be called "options". But objects inside the array do not and should not be named.

Ex. first options inside split. total 4 parts, all inside.
Where manacost field contains four parts, like "g;;w;;u;;b"
   {
      ,section,cost
      [split
         {
            ,manacostx,350
            ,manacosty,76
            ,manaiconwidth,48
            ,manaiconheight,48
            ,manaalign,left
            ,altmana,true
            ,manacost,<-cost->
         }
         {
            ,manaalign,right
            ,manacosty,600
         }
         {
            ,vertical,true
            ,manacosty,200
         }
         {
            ,manaalign,center
            ,manacosty,400
         }
      ]
   }

Ex. first options outside split. total 3 parts: 1 outside, 2 inside.
Where powertoughness field contains three parts, like "1/1;;2/2;;4/4"
   {
      ,section,text
      {options
         ,fontsize,48.0
         ,textx,375
         ,texty,39
         ,wmax,620
         ,textalign,center
         ,text,<-pt->
      }
      [split
         {
            ,texty,339
         }
         {
         }
      ]
   }

Sample VON files
https://ieants.cc/magic/customframe/split.von
Support me on Patreon

I saw. I conquered. I came.

Den

#60
2022/10/26

; allow text outlines ; outlinecolor, outlineratio
; allow shadow width multiplier ; shadowratio
; allow turn text into all upper- or lower-case ; allupper, alllower

  • outlinecolor is HTML hex code (Ex. #00FF00)
  • outlineratio is multiplied by font size to create outline width. Default is 0.01
  • shadowratio is multiplied by font size to create shadow width. Default is 0.075
  • allupper is true or false. Default false.
  • alllower is true or false. Default false.
  • allupper has precedence over alllower


Ex. in custom frames
[[VON]]

[
   {
      ,section,text
      {options
         ,fontsize,48.0
         ,textx,375
         ,texty,39
         ,wmax,620
         ,shadowcolor,#71218A
         ,shadowratio,0.2
         ,outlinecolor,#ff0000
         ,outlineratio,0.02
         ,allupper,true
         ,textalign,center
         ,text,<-subtype->
      }
   }
   {
      ,section,ruleslevel
      {options
         ,fontsize,50.0
         ,minfontsize,12.0
         ,textletterx,0
         ,textlettery,0
         ,textboxx,86
         ,textboxy,580
         ,textboxwidth,584
         ,textboxheight,394
         ,textcolor,#ffffff
         ,shadowcolor,#000000
         ,shadowratio,0.2
         ,outlinecolor,#00ff00
         ,outlineratio,0.01
         ,alllower,true
         ,rulestext,<-rulestext->
         ,flavortext,<-flavortext->
      }
   }
]
Support me on Patreon

I saw. I conquered. I came.

Den

#61
2022/10/29

; rules text ; variable width tables

format is :
<<#comma-separated values|
Where values are relative sizes for each column.  Sizes of 0 zeros are ignored. so ex. 3,1,3 will have left and right columns that are 3 times wider than central column.

previous methods of creating tables, namely <<<< and <<|number| , still create equal-width columns.

all methods still allow pipes | , to advance columns.

Ex. These three lines of codes produce identical tables of two columns of equal widths
<<<<

<<|2|

<<#1,1|

Ex. column ratios 5-1-4
<<#5,1,4|Lengthy header|number|lengthy notes

Ex. column percentages 50-10-40
<<#50,10,40|Lengthy header|number|lengthy notes

Ex. stats sheet
<<#1,3,1,3|14|Fitness
|8|Intellect
|11|Strength
|11|Wisdom
|12|Dexterity
|14|Charisma

Support me on Patreon

I saw. I conquered. I came.