Jekyll2022-07-05T16:44:46-05:00http://cardcreatr.sffc.xyz//Card Creatr StudioThe home of Card Creatr Studio, playing card design software.Card CreatrTutorial - Double-Sided Cards2019-08-04T00:00:00-05:002019-08-04T00:00:00-05:00http://cardcreatr.sffc.xyz//general/2019/08/04/card-backs<p>Starting with Card Creatr Studio 1.4.0, you can make a layout for both the front and the back of every card. This page explains how to make double-sided cards.</p>
<!-- more -->
<p>Follow along with this example file: <a href="/assets/tutorial/front-back.ccsb">front-back.ccsb</a></p>
<h2 id="toggle-preview-between-front-and-back">Toggle Preview between Front and Back</h2>
<p>Normally, the preview window renders the front of the card. Click the checkbox just below the preview window to show the back of the card, called the <em>Back Checkbox</em>:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/tutorial/back-checkbox.png" />
</figure>
<p>Until you create a custom card-back template, the preview will not change.</p>
<h2 id="creating-a-card-back-template">Creating a Card-Back Template</h2>
<p>The variable <code class="highlighter-rouge">__BACK</code> is true if the <em>Back Checkbox</em> is ticked. To design your card back, use the following syntax in your template:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>// Common Logic Here
if __BACK
// Card-Back Template Here
else
// Card-Front Template Here
</code></pre>
</div>
<p>The example file has this template:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>// This rectangle shows up on both the front and the back.
rect(x=0, y=0, width=180, height=252, fill=color)
if __BACK
// This text is only on the back.
+text(back_title)(align="center", font-family="title", font-size=18, x=90, y=252/2+18/2)
else
// This rectangle and text are only on the front.
rect(x=12, y=12, width=156, height=228, fill="white")
+text(front_title)(align="center", font-family="title", font-size=18, x=90, y=252/2+18/2)
</code></pre>
</div>
<p>Here, a large colored rectangle is painted on both the front and the back. Then, a different text field is printed on each side, and the front additionally has a white rectangle inset within the larger colored rectangle.</p>
<h2 id="printing-double-sided-cards">Printing Double-Sided Cards</h2>
<p>If the <em>Back Checkbox</em> is ticked, all export functions will render the back of the card. <em>This includes Export to PDF:</em> the cards will be arranged in a mirror image to allow for double-sided printing.</p>Card CreatrStarting with Card Creatr Studio 1.4.0, you can make a layout for both the front and the back of every card. This page explains how to make double-sided cards.Case Study - Ruby Hunters2018-06-03T00:00:00-05:002018-06-03T00:00:00-05:00http://cardcreatr.sffc.xyz//general/2018/06/03/ruby-hunters<p>My second tutorial entry is a case study on how I used Card Creatr Studio to draft cards for a prototype of mine, called Ruby Hunters. You will learn about asset management, card-specific template customization, dropdown fields, and custom card dimensions.</p>
<!-- more -->
<h2 id="preview-of-final-product">Preview of Final Product</h2>
<p>We will be creating a deck of 3.5-inch square cards for printing. There are several possible card layouts. Here is the PDF output that we will be creating by the end of this tutorial, with 6 cards per page:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/ruby-hunters/13-pdf-output.png" />
</figure>
<h2 id="step-1-create-illustrations">Step 1: Create Illustrations</h2>
<p>Card Creatr Studio is a card database and layout/finishing tool. It is not designed to be a full-powered graphic design suite. The <a href="/general/2018/04/15/building-blocks/">building blocks tutorial</a> describes how to create basic shapes, but for more complex designs, you want a more featureful graphic design tool.</p>
<p>I used <a href="https://www.adobe.com/products/illustrator.html">Adobe Illustrator</a> to create some initial designs:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/ruby-hunters/01-illustrator.png" />
</figure>
<p>Another great piece of software is <a href="https://inkscape.org/en/">Inkscape</a>, which is free, unlike Adobe Illustrator. Photoshop and GIMP can also be used, but I prefer Illustrator and Inkscape because they produce vector graphics.</p>
<h2 id="step-2-import-illustrations">Step 2: Import Illustrations</h2>
<p>Next, you want to import your illustrations into Card Creatr Studio. Export your illustrations as SVG (in Illustrator/Inkscape) or PNG (in Photoshop/GIMP). In Card Creatr Studio, create a new document. Under “properties”, open the <em>Assets</em> tab, and click “Choose File” to add a new asset:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/ruby-hunters/02-asset-files.png" />
</figure>
<p>Once you add all your assets, you should see them here:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/ruby-hunters/03-asset-tab.png" />
</figure>
<p>In order to make the assets accessible to templates, there is unfortunately one more step. It’s not too hard, and it needs to be done only once. Open the <em>Advanced</em> tab, and under the “assets” block, enter a line like this for each asset:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>"image_identifier (img,path)": "assets/filename.svg"
</code></pre>
</div>
<p>Customize <code class="highlighter-rouge">image_identifier</code>, which is how you will refer to this image in templates, and <code class="highlighter-rouge">filename.svg</code> (or <code class="highlighter-rouge">png</code>), which should correspond to the name under the Assets tab. Example:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/ruby-hunters/04-asset-options.png" />
</figure>
<p>This additional step might be eliminated in a future version of Card Creatr Studio.</p>
<h2 id="step-3-add-dropdown-menu">Step 3: Add Dropdown Menu</h2>
<p>We have three different background images, and we want to be able to choose which one to use. To do this, we can use a dropdown menu field.</p>
<p>Open the <em>Fields</em> tab, and add a new field with display “dropdown.” In the “Dropdown Options” text box, enter the options to appear in the dropdown menu. This dropdown menu will appear for every row in the spreadsheet.</p>
<figure class="figure figure--center">
<img class="image" src="/assets/ruby-hunters/05-dropdown-field.png" />
</figure>
<p>I made my dropdown menu options the same as the names of the assets in the <em>Advanced</em> tab.</p>
<h2 id="step-4-customize-card-dimensions">Step 4: Customize Card Dimensions</h2>
<p>By default, cards are poker-sized (2.5 by 3.5 inches). However, we want 3.5-inch square cards. To do this, change some settings in the “viewports” and “dimensions” sections of the <em>Advanced</em> tab.</p>
<p>You’ll need to change a few different places. Under “dimensions”, you start with this:</p>
<div class="highlighter-rouge"><pre class="highlight"><code> card: {
// 2.5 in by 3.5 in
unit: "pt"
width: 180
height: 252
dpi: 300
</code></pre>
</div>
<p>This setting controls the preview pane and the “Export Card Images” export option. Change it to:</p>
<div class="highlighter-rouge"><pre class="highlight"><code> card: {
// 3.5 in by 3.5 in
unit: "pt"
width: 252
height: 252
dpi: 300
</code></pre>
</div>
<p>Under “viewports”, you have this:</p>
<div class="highlighter-rouge"><pre class="highlight"><code> page: {
width: 612
height: 792
cardWidth: 180
cardHeight: 252
</code></pre>
</div>
<p>This setting controls how big the cards are in the “Export as PDF” export option. Change it to:</p>
<div class="highlighter-rouge"><pre class="highlight"><code> page: {
width: 612
height: 792
cardWidth: 252
cardHeight: 252
</code></pre>
</div>
<p>Finally, also under “viewports”, you have:</p>
<div class="highlighter-rouge"><pre class="highlight"><code> card: {
width: 180
height: 252
</code></pre>
</div>
<p>This setting controls the coordinate system used within the card template. You can technically put any values you want here, and the card will scale accordingly. You could put 252 for both width and height, which would correspond to points, but to demonstrate what this setting actually does, we will set both width and height to 100:</p>
<div class="highlighter-rouge"><pre class="highlight"><code> card: {
width: 100
height: 100
</code></pre>
</div>
<figure class="figure figure--center">
<img class="image" src="/assets/ruby-hunters/06-custom-viewport.png" />
</figure>
<h2 id="step-5-create-template">Step 5: Create Template</h2>
<p>We are finished with the <em>Advanced</em> tab. Now, switch back to the <em>Template</em> tab so that we can start our card layout.</p>
<p>First, we want to create a white background rectangle that covers our entire card. Our viewport is 100x100, so set width and height to 100:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>rect(x=0, y=0, width=100, height=100, fill="white")
</code></pre>
</div>
<p>Now, we want the background image to depend on the option selected in the spreadsheet. Our column is named <code class="highlighter-rouge">background</code>. Since the options for <code class="highlighter-rouge">background</code> are the same as the image IDs in the <em>Advanced</em> tab, we can use this little shortcut:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>assets[background]
</code></pre>
</div>
<p>If you don’t want a variable asset, you can access it like this:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>assets.image_identifier
</code></pre>
</div>
<p>We want our background image to fill the whole card, on top of the white square. We can use the <code class="highlighter-rouge">+imageFill</code> built-in helper function, described in more detail in the building blocks tutorial:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>+imageFill(assets[background], 0, 0, 100, 100)
</code></pre>
</div>
<p>We end up with this:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/ruby-hunters/07-basic-template.png" />
</figure>
<p>I will also add a custom font that we will use for our template. I went to <a href="https://fonts.google.com">fonts.google.com</a> and chose a font named “acme.” To add it to my project, I go to the <em>Fonts</em> tab and use the “Add Font” selector to add it:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/ruby-hunters/08-acme-font.png" />
</figure>
<h2 id="step-6-custom-layouts-for-each-background">Step 6: Custom Layouts for Each Background</h2>
<p>Since we have the full power of JavaScript at our disposal, we can create “if” statements that change the tutorial based on the option selected in the dropdown menu.</p>
<p>This is more easilly illustrated with template code:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/ruby-hunters/09-if-statements.png" />
</figure>
<p>I created three “if” statements; only one of them will run for a particular card based on the value chosen in the “background” dropdown menu.</p>
<p>I also added two fields for numbers. The positions of the numbers also depend on which background was chosen, and two of the templates use only one of the two number fields. I set the font of the numbers to “acme,” the one I added to the project in Step 5.</p>
<h2 id="step-7-finishing-and-printing">Step 7: Finishing and Printing</h2>
<p>After making the initial design, I decided that it needed a splash of color. I went back to Illustrator and made a common island-like square background, which I added as an asset. I also replaced the three existing assets with versions with more color.</p>
<figure class="figure figure--center">
<img class="image" src="/assets/ruby-hunters/10-new-assets.png" />
</figure>
<p>The template is ready now! Time to fill in the spreadsheet:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/ruby-hunters/11-many-cards.png" />
</figure>
<p>Next, go to File → Export as PDF:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/ruby-hunters/12-pdf-processing.png" />
</figure>
<p>And after a few seconds, you have the PDF for home printing:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/ruby-hunters/13-pdf-output.png" />
</figure>
<p>You can download my full ccsb file below, which includes all of the features from this tutorial and a few more tweaks I made afterwards:</p>
<p><a href="/assets/ruby-hunters/ruby-hunters-tutorial.ccsb">ruby-hunters-tutorial.ccsb</a></p>
<p>I hope this tutorial was helpful. To learn more, read through the other tutorials, and if you have specific questions about how to do something with Card Creatr Studio, ask on the feedback and support page, which you can access by clicking the “Feedback” link at the top of this web site.</p>Card CreatrMy second tutorial entry is a case study on how I used Card Creatr Studio to draft cards for a prototype of mine, called Ruby Hunters. You will learn about asset management, card-specific template customization, dropdown fields, and custom card dimensions.Tutorial - Building Blocks2018-04-15T00:00:00-05:002018-04-15T00:00:00-05:00http://cardcreatr.sffc.xyz//general/2018/04/15/building-blocks<p>I’m pleased to introduce my first tutorial entry, focused on the core <em>building blocks</em>: shapes, images, and text. You will learn how to create and align these core building blocks to create your own custom template in Card Creatr Studio. I also introduce variables and basic scripting.</p>
<!-- more -->
<p>Card Creatr Studio templates are written with SVG and Pug.</p>
<h2 id="what-is-svg">What is SVG?</h2>
<p>Card Creatr Studio uses the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG markup language</a> to create templates. SVG stands for “Scalable Vector Graphics”. SVG is a language that allows you to dictate shapes to render on your playing card; Card Creatr does the rest of the work of following the instructions in the template to create the final rendered card image.</p>
<p>SVG uses an X/Y coordinate system, except that unlike what you learned in high school, the <em>y</em> dimension goes down, not up. Illustration:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/tutorial/svg-coordinate-system.svg" />
</figure>
<h2 id="what-is-pug">What is Pug?</h2>
<p>SVG requires that you write your markup in <a href="https://en.wikipedia.org/wiki/XML">XML</a>. However, XML is not the nicest langauge for humans to use. <a href="https://pugjs.org/">Pug</a>, previously known as <em>Jade</em>, is a templating language that allows you to write simpler markup that gets translated into full XML for SVG to consume.</p>
<p>For example, SVG requires the following input to create a rectangle:</p>
<div class="highlighter-rouge"><pre class="highlight"><code><rect x="5" y="5" width="20" height="20" fill="black" />
</code></pre>
</div>
<p>In Pug, the same can be written as:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>rect(x=5 y=5 width=20 height=20 fill="black")
</code></pre>
</div>
<p>Pug also exposes the full power of JavaScript, which will come in handy in the “Variables” section later in this tutorial.</p>
<h2 id="getting-started">Getting Started</h2>
<p>The simplest building block is a rectangle. To demonstrate, start by creating a new empty file in Card Creatr Studio. The default template contains two items: a rectangle and a text element.</p>
<div class="highlighter-rouge"><pre class="highlight"><code>rect(x=0, y=0, width=180, height=252, fill="white")
+text(title)(align="center", font-family="title", font-size=17, x=90, y=28)
</code></pre>
</div>
<p>The first line creates the white background. It is 180pt wide and 252pt tall. “pt” means “point”, a unit used in page layout; there are 72 points in an inch. A 180-by-252-point rectangle is 2.5 inches by 3.5 inches, a standard poker-sized card.</p>
<p>The second line creates a text placeholder. The text placeholder is at x=90pt, so it is centered horizontally (the card is 180pt wide). The y coordinate for text is relative to the text’s <em>baseline</em>, as illustrated below:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/tutorial/text-registration.svg" />
</figure>
<p>Therefore, by making the font size 17pt and the <em>y</em> positioned at 28pt, we leave around 11pt (28pt–17pt) between the top edge of the card and the top of the text.</p>
<figure class="figure figure--center">
<img class="image" src="/assets/tutorial/empty-card.png" />
</figure>
<h2 id="elements-vs-functions">Elements vs. Functions</h2>
<p>You may notice above that the word “text” is preceeded by a plus sign, as in <code class="highlighter-rouge">+text</code>, but the word “rect” does not have a plus sign. The plus sign indicates that the line may actually get expanded to a different underlying SVG string via a <em>helper function</em>. Since <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect">rect</a> is an official SVG element, it does not need a helper function. There are several helper functions in Card Creatr, which help cover functionality that is unclear or difficult to perform using plain SVG elements:</p>
<ul>
<li><code class="highlighter-rouge">+text</code></li>
<li><code class="highlighter-rouge">+textWrap</code></li>
<li><code class="highlighter-rouge">+imageFill</code></li>
<li><code class="highlighter-rouge">+imageFit</code></li>
<li><code class="highlighter-rouge">+imageStretch</code></li>
</ul>
<p>For example, the above <code class="highlighter-rouge">+text</code> example expands to the following SVG XML, which actually renders the text left-aligned from a calculated x coordinate:</p>
<div class="highlighter-rouge"><pre class="highlight"><code><text x="34.355712890625" y="34" font-family="title" font-size="17">Hello, world!</text>
</code></pre>
</div>
<p>Using <code class="highlighter-rouge">+text</code> also allows Card Creatr to render the text as SVG paths. For more information, see the “fontRenderMode” option in the “Advanced” tab.</p>
<p>Examples of all five of these helper functions are shown throughout this tutorial page.</p>
<h2 id="adding-our-first-rectangle">Adding Our First Rectangle</h2>
<p>Let’s create a new rectangle that leaves 12pt around the edge of the card. The coordinates need to be as follows:</p>
<ul>
<li>x: 12pt</li>
<li>y: 12pt</li>
<li>width: 156pt = 180pt (card width) – 12pt – 12pt (edges)</li>
<li>height: 228pt = 252pt (card height) – 12pt – 12pt (edges)</li>
</ul>
<p>The markup is:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>rect(x=12 y=12 width=156 height=228 fill="blue")
</code></pre>
</div>
<figure class="figure figure--center">
<img class="image" src="/assets/tutorial/blue-rectangle-1.png" />
</figure>
<p>Uh-oh! Our new blue rectangle is hiding our title text! This brings us to another important rule in SVG:</p>
<blockquote>
<p>Elements later in the template file appear above elements earlier in the template file.</p>
</blockquote>
<p>Let’s fix this by moving our blue rectangle between the white rectangle and the text box:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/tutorial/blue-rectangle-2.png" />
</figure>
<p>We can now see our text in full! Don’t mind the colors; we can fix that later.</p>
<h2 id="using-variables">Using Variables</h2>
<p>We have three elements: the two rectangles and the text field. Our dimensions 180pt and 252pt are already duplicated several times in our template markup! We can fix this by abstracting these dimensions into variables. Pug allows us to define JavaScript variables on lines starting with <code class="highlighter-rouge">-</code>; this is also how you write any JavaScript code in Pug. We can simplify our template to the following:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>- cw = 180 // card width
- ch = 252 // card height
- m = 12 // margin
rect(x=0, y=0, width=cw, height=ch, fill="white")
rect(x=m y=m width=cw-2*m height=ch-2*m fill="blue")
+text(title)(align="center", font-family="title", font-size=17, x=cw/2, y=28)
</code></pre>
</div>
<p>If we wanted to change the card width, card height, or margin, now we need to do it in just one place!</p>
<p>The syntax <code class="highlighter-rouge">//</code> means a “comment” in your template: the text that follows the <code class="highlighter-rouge">//</code> is ignored until the next line.</p>
<h2 id="images">Images</h2>
<p>Next, let’s add an image to our card.</p>
<p>Before we do the image, I’m going to clean up our template a little bit:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>- cw = 180 // card width
- ch = 252 // card height
- m = 12 // margin
rect(x=0, y=0, width=cw, height=ch, fill="skyblue")
rect(x=m y=m width=cw-2*m height=ch-2*m fill="white")
+text(title)(align="center", font-family="title", font-size=17, x=cw/2, y=34)
rect(x=m y=42 width=cw-2*m height=90 fill="orange")
</code></pre>
</div>
<figure class="figure figure--center">
<img class="image" src="/assets/tutorial/pre-image.png" />
</figure>
<p>I changed the colors and created a new orange rectangle. Let’s put an image in that rectangle.</p>
<p>You will first need a <em>field</em> in your spreadsheet to insert the image. To do this, open the “Fields” tab in the properties pane, and insert a new field named “myimage” with property “img” and display “image”:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/tutorial/image-field.png" />
</figure>
<p>Choose an image, and return to the template. Now let’s insert our image. We define a rectangular area in which to insert the image, and then we can use any of the following three built-in image helper functions:</p>
<ul>
<li><code class="highlighter-rouge">+imageFill</code>, enlarges the image to fill a rectangular area, clipping off the edges of the image if necessary.</li>
<li><code class="highlighter-rouge">+imageFit</code>, fits the image into the rectangular area, possibly leaving part of the rectangle empty.</li>
<li><code class="highlighter-rouge">+imageStretch</code>, distorts the image to completely fill the rectangular area without clipping off the edges.</li>
</ul>
<p>The markup for these helper functions is as follows:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>+imageFill(myimage, m, 42, cw-2*m, 90)
</code></pre>
</div>
<p>where the parameters are given in the order <code class="highlighter-rouge">x</code>, <code class="highlighter-rouge">y</code>, <code class="highlighter-rouge">width</code>, and then <code class="highlighter-rouge">height</code>. Here is what happens with each of the three versions of the helper function:</p>
<p><strong><em>+imageFill(myimage, m, 42, cw-2*m, 90)</em></strong></p>
<figure class="figure figure--center">
<img class="image" src="/assets/tutorial/image-fill.png" />
</figure>
<p><strong><em>+imageFit(myimage, m, 42, cw-2*m, 90)</em></strong></p>
<figure class="figure figure--center">
<img class="image" src="/assets/tutorial/image-fit.png" />
</figure>
<p><strong><em>+imageStretch(myimage, m, 42, cw-2*m, 90)</em></strong></p>
<figure class="figure figure--center">
<img class="image" src="/assets/tutorial/image-stretch.png" />
</figure>
<p>For this tutorial, let’s settle on <code class="highlighter-rouge">+imageFit</code>.</p>
<h2 id="body-text">Body Text</h2>
<p>Now it’s time to add some body text below the image. First, add a multiline field named “body”:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/tutorial/wrap-field.png" />
</figure>
<p>Now, add it to the template as follows, using the <code class="highlighter-rouge">+textWrap</code> helper function:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>- p = 4 // text padding
+textWrap(body)(x=m+p y=150 width=cw-2*(m+p) font-family="body" font-size=11)
</code></pre>
</div>
<figure class="figure figure--center">
<img class="image" src="/assets/tutorial/wrap-with-text.png" />
</figure>
<p>The <code class="highlighter-rouge">+textWrap</code> helper function is very useful because there is currently no option in the SVG specification for performing automatic line wrapping. The function computes the appropriate line wrapping widths and does the layout automatically.</p>
<p><code class="highlighter-rouge">+textWrap</code> has the following custom options; the first three are also available in <code class="highlighter-rouge">+text</code>:</p>
<ul>
<li><code class="highlighter-rouge">align</code> accepts either <code class="highlighter-rouge">"left"</code>, <code class="highlighter-rouge">"center"</code>, or <code class="highlighter-rouge">"right"</code> and controls the alignment of the text relative to the registration point.</li>
<li><code class="highlighter-rouge">font-family</code> controls the font itself; you <em>must</em> use one of the fonts available in the “Fonts” tab. By default, there are two fonts, “title” and “body”, which are actually DejaVu Serif. You can add more fonts in the Fonts tab.</li>
<li><code class="highlighter-rouge">font-size</code> controls the text size.</li>
<li><code class="highlighter-rouge">line-height</code> controls the spacing between baselines of text.</li>
<li><code class="highlighter-rouge">paragraph-spacing</code> controls the amount of additional space added between “paragraphs” (line feeds in the multiline text box in the spreadsheet).</li>
<li><code class="highlighter-rouge">width</code> is the maximum number of horizontal units of space before the text is forced to wrap. Defaults to 100 units.</li>
</ul>
<h2 id="advanced-scripting">Advanced: Scripting</h2>
<p>You’ve now mastered all of the basic tools for card layout. In this final section, I want to illustrate one of the most powerful features of Card Creatr Studio: the ability to use scripting. We will make a field to add a variable number of pips (circles) to the bottom-right corner of the card.</p>
<p>Start by creating a new field called “pips” with type <em>uint</em> and display <em>number</em>, and set a value of 3 in the card spreadsheet:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/tutorial/pips-field.png" />
</figure>
<p>Now, add the following code to your template:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>- pr = 6 // pip radius
- ps = 4 // spacing betwen pips
- for (i=0; i<pips; i++) {
circle(cx=cw-m-p-pr-(2*pr+ps)*i, cy=ch-m-p-pr, r=pr, fill="black")
- }
</code></pre>
</div>
<p>The first two lines set up two more variables that we can use. The third line with the <code class="highlighter-rouge">for</code> loop is JavaScript code that means, “copy the following line <code class="highlighter-rouge">pips</code> times”. The fourth line is the line that the <code class="highlighter-rouge">for</code> loop will copy, and it is the one that creates our circles. The math for positioning the circles is a little long, but it basically combines all of our other variables in order to have precise positioning of the pips. Note that circles use <code class="highlighter-rouge">cx</code> and <code class="highlighter-rouge">cy</code> instead of <code class="highlighter-rouge">x</code> and <code class="highlighter-rouge">y</code> in order to emphasize that the registration point of the circle is its center. The <code class="highlighter-rouge">r</code> parameter specifies the circle’s radius.</p>
<p>Here is what we end up with:</p>
<figure class="figure figure--center">
<img class="image" src="/assets/tutorial/pips-result.png" />
</figure>
<p>Since we used variables, changing the size of the pips is easy. Here is what it looks like when I set <code class="highlighter-rouge">pr = 12</code> (notice that the circles are bigger):</p>
<figure class="figure figure--center">
<img class="image" src="/assets/tutorial/pips-result-12.png" />
</figure>
<h2 id="next-steps">Next Steps</h2>
<p>The full power of SVG is at your fingertips with Card Creatr Studio. The MDN is a great online resource for learning all of the other things you can do with SVG:</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG">https://developer.mozilla.org/en-US/docs/Web/SVG</a></p>
<p>If you have questions about how to make specific layouts with Card Creatr Studio, post a question on the feedback and support page, which you can access by clicking the “Feedback” link at the top of this web site.</p>Card CreatrI’m pleased to introduce my first tutorial entry, focused on the core building blocks: shapes, images, and text. You will learn how to create and align these core building blocks to create your own custom template in Card Creatr Studio. I also introduce variables and basic scripting.Tutorial Series2018-03-09T00:00:00-06:002018-03-09T00:00:00-06:00http://cardcreatr.sffc.xyz//general/2018/03/09/amusement-city-tutorial-intro<p>Several users have asked for tutorials on how to use Card Creatr Studio’s powerful templating engine for card layout. I am pleased to announce plans to create a series of short tutorials exploring how I used Card Creatr Studio to create a game of mine, Amusement City.</p>
<!-- more -->
<p>Amusement City is a dice-building game I am demoing at Protospiel San Jose 2018. You can read more about it here:</p>
<p>https://tabletop.events/conventions/protospiel-san-jose-2018/prototypes/amusement-city</p>
<p>The cards in Amusement City correspond to each attraction that you could build in your park. To demonstrate, here is one attraction: the Photo Booth.</p>
<figure class="figure figure--center">
<img class="image" src="/assets/photo-booth.png" />
</figure>
<p>This card exercises a lot of different features of both Card Creatr Studio and of the templating engine, including static assets (the sunburst background), text written along paths, mirrored images, and more. In the coming tutorials, I hope to help you learn to make templates such as this.</p>Card CreatrSeveral users have asked for tutorials on how to use Card Creatr Studio’s powerful templating engine for card layout. I am pleased to announce plans to create a series of short tutorials exploring how I used Card Creatr Studio to create a game of mine, Amusement City.About Me2017-03-26T00:00:00-05:002017-03-26T00:00:00-05:00http://cardcreatr.sffc.xyz//general/2017/03/26/introduction<p>My name is Shane. As an amateur board game designer, I found that there was a lack of a simple program to both organize your cards in a database and lay them out for printing. I first tried using InDesign, but it requires studying hours of tutorials in order to master. I tried FileMaker, but it didn’t have the kind of layout tools I was looking for. Microsoft Word and PowerPoint have easy drag-and-drop layout tools, but they aren’t very good for organizing your cards.</p>
<!-- more -->
<p>In order to solve this problem, I decided to write my own program that did what I needed for game design. I wanted a program that let me organize my cards so that I could edit them in a spreadsheet. I wanted a program that gave me powerful tools for creating my own layout templates. I wanted a program that let me generate print layouts hassle-free. This is how I started working on Card Creatr Studio. I’m glad to share the first version of my program today.</p>
<p>I am currently working in Mountain View, California. You can often find me around at local board game meetups.</p>Card CreatrMy name is Shane. As an amateur board game designer, I found that there was a lack of a simple program to both organize your cards in a database and lay them out for printing. I first tried using InDesign, but it requires studying hours of tutorials in order to master. I tried FileMaker, but it didn’t have the kind of layout tools I was looking for. Microsoft Word and PowerPoint have easy drag-and-drop layout tools, but they aren’t very good for organizing your cards.