Component Studio - How to Change a color of an icon via variable

Edit: This tutorial got implemented now in CS as a property of an image called "Iconify" which is the easier way to do this.

I've been prototyping in Component Studio(referred to as CS for the remainder of this tutorial) a lot recently. CS does some things amazingly well but a lot of things you have to hack and changing image colors is one of them. You may want to change image colors for any number of reasons from types of cards to making a PnP version. I've been known to put a note on the top step that sets a isPnP variable to 1 or 0 and base my entire design on this. I can just set that variable once for both so i can generate a printer friendly PnP or normal cards.

The cards below are for a prototype I was working on where one of the sides is a Law and the other is a Lobbyist and you should be able to tell at a glance what is what. So the document is the law and the person is the lobbyist. and there are(so far) 3 colors. Red, Blue and Yellow. I decided to add an icon to each side to show what that side is.

The cards have 2 colors a dark color and a light color. The images are the dark color with an opacity set but you can use the dark color. First in sheets I create the colors that I want to change the images. Which in the above example is ForeColor. The color that the text box it is in is the background color and in my spreadsheets is called TemplateColor.

Ok then it's off to find your images. I used https://thenounproject.com/ for mine be sure to get your attribution for what ever you get from there if you use there and put them in the rulebook or on the cards themselves. The document is this https://thenounproject.com/search/?q=document&i=1262053 and the person is this https://thenounproject.com/search/?q=person&i=1129051 and the way this trick works is you invert the image and put it in front of a box that's the same size as the image. (you can change the color of the box) so go into your trusty image editor of choice and first you want to crop out everything but the icon. and then select the icon with the magic wand and invert your selection. then create a new layer and hide the old layer and take the paint bucket and fill in the selection with black (you will invert this in CS later) on the new layer.  You should at this point have the opposite of what you wanted. see below:

Now onward to CS. Upload your inverted images to CS. In CS the first thing you want to do is set your color on a box so add a box and position it where you want your image. Like the following step, you will notice a box where you want your image.

After the color box you will add the inverted image. In my case it's {$ForeColor}. In my cards in this demo they are static but i do have another project where they are pulled from a data source. but those have a white background so i decided to use this instead because it shows more complexity. The next step is to actually add the image. 

A couple key things about this step. one it needs to be exactly the same dimensions and positions as the previous step. Second invert the colors. (you could have just made it white but i find it difficult to see what the image it is in the CS interface if it's white) and lastly the blend mode is add. this will make the background white. now to mimic the background that you already have the last step.

For this step you want to copy the first step so you have the same dimensions. and you want to change the fill color to the color of your background in my case {$TemplateColor}. and the important portion is the blend mode should be multiply at this point. and that's how you get to the above. In my above image you can't actually read the text so for me to get it to be like the document image i just changed the color step's opacity to 30% and to get it to have that grayed out look i changed the replace color steps blend to darken. alternatively i could have chosen saturate and it looks fine there. 

You can play around with these steps a lot of it is just me playing around till i get things the way i want them to be. 

Until next time,

Happy designing

Making PnP's for card games

This post will go through the process I use for creating a Print and Play(PnP) for poker sized card games. This article assumes you already have the cards done and just need to get a PDF of it for printing. Also this tutorial is for Photoshop in here I'm using CC but it should work with most versions. First open up Bridge(comes with Photoshop) and direct it to where you keep your cards. Select your cards you want in the PnP.

Now from the menu go to Tools > Photoshop > Load Files Into Photoshop Layers... 

This will open up a Photoshop document with each image as a layer. Often card games have duplicates of specific cards. to do this you select the layer that you want to duplicate and press Ctrl+J to duplicate the layers do this for all duplicate cards.

If you use a template like I use for (The Game Crafter)TGC your image size is slightly bigger than the card. to fix this you will want to go to Image > Canvas Size. You will want to change the unit drop down to Inches and make sure your anchor is in the center. Change the width and height to 2.5x3.5 inches like the following.

Press OK and you may get a popup that says some clipping may occur, this is expected. click Proceed. Now your image is the correct size. Now you want to export the layers back to their own files. To do this you click File > Scripts > Export Layers To Files which will prompt you with a dialog. for the destination i usually create some working directory. for File Name Prefix you may want to include the name of you game. I often don't because i organize it based on the folder structure.

When you are done click run and Photoshop will go through each layer and create a file for each layer. Let it run through each layer this may take a while depending on number of cards. If it completes you will see an alert pop up that says "Export Layers To Files was successful."  after this is done close the file and go back to bridge and navigate back to the folder where you stored these exported files Select them all.

After that's done go to the menu and select Tools > Photoshop > Contact Sheet II... 

under Document you want the image to be in Inches 7.48x10.48 and  under thumbnails you want 3 columns and 3 rows with 0.01in for vertical and horizontal spacing.

Click OK it will make a file for each page of the PnP it should look like the following. Save each file created to a new folder.

Next in Photoshop go to File > Automation > PDF Presentation and in this dialog in source files click browse and open up the contact sheet files you just saved (In the example i made the back previously and attached them later.) Under Output Options you want to select Multi-Page Document White background and unchecked all the boxes that say include. 

Then click Save and choose where you want to save. and in the next dialog I keep everything default. and click Save PDF. Photoshop will then save the PDF. 

PnP for Brawl 'n' Bash here

NM Game Jam 2013 Post Mortem

A couple weeks ago Aug 23-25th I participated in the NM Game Jam 2013. we were a team of 5 so we called ourselves 5 guys.  Picture below.

We were giving a Theme "It takes two to tango" and told to go at it. also an hour after the Ludum dare started. Which theme was 10 seconds. we decided to skip that. and formulated a game that takes two players to beat a boss. trailer video below.



and here is the gameplay video.

The State of Table Golf

Well it seems as though it's time for me to finally put up Table Golf, all this time I've been waiting for something to happen as to which I wasn't sure what it was. Yesterday I've come to the realization that this is never gonna happen.

With that i'm happy to announce:

Table Golf: The 19th Hole

In golf the 19th hole is slang for the bar you visit after you play to enjoy a drink. In Table Golf, the 19th hole is a separate set of rules that turn table golf into a drinking game. This game variant will be available for free on the Store page and on Zagix.com

Also I'm gonna print out some promo weather to give out at Gen Con 2013. It's called The Black Hole. If anyone wants this let me know and we can meet up.

Table Golf

In the previous link I spoke of different games. I think I got the logo for the golfing game completed.

In Table Golf you deal out hazard cards to all of the players, and who ever has the hole card places it on the table and decides where the players will start the game. they then place the hazards down and play the hole. the first person to get to the hole gets a point and everyone has one chance to get to the hole themselves. contrary to scoring on golf the player with the most points is the winner after 9 holes.

It's been a while

Hello again,

The last time I posted I announced Steamopolis... my my it has been a while. Since then i have started several projects. there is 3 in particular that i'm currently working on.

1 Chronos: the card game

this is my trick taking game. This game is played over 3 ages(suits). and each age has a different play style. in the age of glory the VP is raised up higher, all of it's abilities are centered around that central theme of bumping up the VP. In the age of corruption this suit has several abilities to pass along negative VP to your opponents. or if there is a rather large VP trick(see glory above) immediatly take that trick at a slight loss of VP. the last age is Misdirection. This age is all about changing the rules and about playing tactically to achieve your goals.

2 Golf Card Game (title yet to be determined)

in this dexterity game you play 9 rounds of golf. but have to be mindful of the hazards that are around the field. the winner has the option of where to place the hole and where the players start then they place the hazards around the course (dining room table) and then must launch the cards towards the goal.

3 Space Card Game (title yet to be determined)

In this game you fight other people with ships. You start of with a hull. and you have to place components around your ship to fight off your opponents ship. each component has it's own HP as well as HP it adds to the integrity of the ship.

Edit: By the time I was done with this post I thought of another. another that I should playtest tomorrow. That one is a fishing card game that plays nothing like Go Fish!

New Release: Steamopolis

What is Steamopolis?

Steamopolis is a Worker Placement/Set collection game. Where you have to build steam engines before any of the resource piles run out of resources. The beginning of the round everyone places their workers secretly on locations on their player sheet then they reveal. there is an NPC character known as the black market. that rolls to determine where they go. the neat thing about the black market is the players can buy from them as well granted the black market has the supplies.

click here to buy.

https://www.thegamecrafter.com/games/steamopolis

Here's a letter that has some backstory.

NM Game Jam 2012

Over the weekend was the NM Game Jam. for those of you that don't know it's a 48 hour game development competition. In this competition we made a game that consists of 4 direction based mini games that move the pieces that you choose in the metagame. Here it is:




This time our team consisted of 3 programmers and 2 Artists.  Their credits are listed below.


James Archuleta - Programmer
Aarom "Tomrel" Gresham - Programmer
Lupe Marquez - Programmer
Brooks Walch - Art/Music
Heather Burke - Art/Music

Steamopolis: All set up

Yesterday I got Steamopolis in the mail. Overall it looks good, there is some minor things that I need to do to it before it gets released.

This First image is the game set up for a 4 player game.

The next image is the game from the eyes of a single player's point of view.

Hopefully in the next week or so I can get a how to play video up on youtube. 

Steamopolis Box Art Preview

Just got done with box art for new board game. Really excited about it, and am way ahead of schedule to order my copy by friday.

This game will be released at the end of the month or begining of next.

Alternate Alcohol rules for Pathfinder.

While looking through the pathfinder rules I didn't find the rules on drinking right away. (It's in the Drugs and Addiction section in case anyone is wondering.)  So I started to brainstorm rules for how I would design the alcohol system in pathfinder. When I found the official drunkenness rules I decided to post about my system as an alternative to the official rulings. I talked to my GM (I play a Drunken Master archetype from Advanced Players Guide in his campaign, hence why I was looking into this.) about what he thought and modified what I created with his input. The following is the version after taking input from my GM, and is available for any GM to use.

Alcohol

Drug[Ingestion]

Frequency: every time a drink is consumed where <number of drinks> exceeds your constitution modifier.

save: fortitude dc 10+<Number of drinks>

Every hour the <number of drinks> can be reduced by 1, but can never go below 0 in this manor.

upon fail get Buzzed condition. See below.

If you already have the buzzed condition it gets upgraded to the Drunk condition. See below.

if you fail by 5 or more recieve Sickened condition, if you already have sickened condition it gets upgraded to nauseated condition. If you already have the nauseated condition it gets upgraded to unconscious condition.

the previous conditions last for a number of hours it takes for the <number of drinks> to equal 0.

Cure: allowing the <number of drinks> to reach 0.

Buzzed
[Condition]

+2 temporary bonus to Charisma.
-2 temporary bonus to wisdom.

Drunk

[Condition]

-2 temporary bonus to dexterity.
+2 temporary bonus to strength.

+2 temporary bonus to Charisma.
-2 temporary bonus to wisdom.

when attempting to move while drunk you must roll an acrobatics dc equal to dc 10 + 1 per 5 feet moved or fall prone.

At GM's descretion you may award characters the following trait if they drink a lot in your campaign. 

Drunken Resistance
[Trait]

this trait allows the player to switch the +2 to charisma with +2 to constitution in the buzzed state. (effectively raising their fortitude by +1)

New Release: Vuzement Adventures

Vuzement Adventures shop page

after months of working on it i'm pleased to introduce Vuzement Adventures. A board game that pits heroes against hordes of goblins. See link above.

The game features:

• A modular map so you can have different encounters each and every time.
• Rather then a static character sheet your abilities are drawn from a deck. and what ever you have in your hand is what your character can do.
• Several scenarios plus more that will be released at a later date for free at Zagix
• co-op vs player game play.

Global Game Jam 2012 Postmortem

Last Month I participated in the 2012 Global Game Jam, a competition to create a game in 48 hours. It was a great experience.

Our team page: http://globalgamejam.org/2012/vampires-zombies-and-werewolves-oh-my

First of all. one thing to be excited over, we had a team. 2 Programmers, 1 artist, and a designer that we turned into a sound guy.

so in our game you may pick one of 3 factions the werewolves, the Vampires or the Zombies. at which point you need to gather humans from a central location to spawn. more of your kind. In this game of Rock Paper Scissors the Vampires have a slight advantage over the Zombies, Zombies have a slight advantage over the werewolves, and werewolves have a slight advantage over the vampires.


I've been meaning to post this for a month now. but have been pretty caught up with other things... More to come later on that.

safeCall new and improved.

jQuery Project page

Some other day in the not so distant past, I found a need to have my safeCall plugin also be a safeGet as well. and this task was extremely simple. all the code had been written already for it in the safeCall function. I just had to stop it from calling it at the end and have that be the return. one other thing I noticed jQuery frowned on my attaching my mSafeCall and gSafeCall directly to the jQuery object so instead I created the safe namespace in jQuery so I took off the safe from both of them. and added the gets. and I borrowed a concept that stands at the root of jQuery; the ability to chain.

lets use the following js object for examples it shows just about everything we need it to show:

var TestObj = {
 funcRoute: {
  CallMe: function(msg) { alert(msg); },
  CallMe2: function() { 
   return { 
    NestedCall: function(msg) { 
     alert(msg); 
    },
    NestedGet: "I'm way down here!"
   }
  }
 },
 varRoute: {
  VarA: 5,
  VarB: "Hello world"
 }
};

note: the following four functions return a Safe object. so to get the return value/ value of the get you must call the object returned's value member. More on this later.

$.safe.mCall( Context, FuncPath, [...]);

this function listed above calls a function nested inside a javascript object. Starting from the Context. this is formally $.mSafeCall. the parameters are;

Context: this parameter is the starting point of the path and it is also the "this" for that function.

FuncPath: this parameter is the path to the function. starting from the context that you passed in.

Additional Params:  any additional params that you pass into the function will be passed into the function you are calling.

example: 

$.safe.mCall(TestObj,'funcRoute.CallMe','hi');

the call above will be equivalent to calling TestObj.funcRoute.CallMe('hi') with the exception that the safecall will not break if TestObj, funcRoute, or CallMe haven't been intitialized.


$.safe.gCall( Context, FuncPath, [...]);

this function listed above calls a function nested inside a javascript object. Starting from the window object. this is formally $.gSafeCall. the parameters are;

Context: this parameter is the "this" for that function.

FuncPath: this parameter is the path to the function. starting from the window object.

Additional Params:  any additional params that you pass into the function will be passed into the function you are calling.

example: 

$.safe.gCall(null,'TestObj.funcRoute.CallMe','hi');

Onward to the new functionality.

Drunks vs Goblins

your a drunk, your drink of choice? Sarsparilla!

He's a sheriff...You don't like him very much.

He interfears with your drinky time.

wait a min what about goblins?

Oh yeah you also go into a delerious state.

filled with Goblins and Sarsparilla! can you survive...

Uh...maybe?!?!

SafeCall JQuery

Often times when  programming in Javascript, you need to check to see if a function exists before calling it. so for instance if you are a asp.net programmer you might need to use sys.application.add_load(handler)

so if you were checking if that function esists you would need to do the following.

if(sys && sys.Application && typeof(sys.Application.add_load) == 'function')
{
      sys.Application.add_load(handler);
}

What this little snippet of code does is simplify that into:

$.gSafeCall(null,'sys.Application.add_load',handler);

what this function does is check if the function that is passed in is in fact a function and calls it passing in parameters from it's self to the function. it will start looking for the function Starting from window. (thus being the global calling)

the signature for this function is:

$.gSafeCall(context,handler [, ...] );

where the following parameters are:

context: the js object that represents this. so when you call the function and context is an object in the function this will be the object you passed in.

handler: this is a string that represents the path to the object starting from the window. the function will try to transverse to the function in question.

params: these are the optional parameters that should get passed into the function.that you are calling.

there also is a function called mSafeCall wich does the same thing but instead of starting from window it will start from the context and locate the function from the context that gets passed in. More on this in the code to follow