Fractionauts v2.0 Post-mortem, and Pixel Art Tips & Resources

We did it! Fractionauts got some great feedbacks. I'm fairly confident that it's the most attractive project during the final presentation.

You can check it out at https://github.com/chrisknepper/xo-fractions-game. Our team used https://github.com/kyung01/xo-fractions-game/ and did a huge fat pull request to merge with the main branch at chrisknepper.

Pixel Art Reskinning

Although I'm no professional artist, making game arts is one of the things I enjoy doing. This time I got the chance to flex that muscle and did a reskin of Fractionauts. There are a few tips and tricks to make such task easier. If you know any, please tell me! Making pixel art is very efficient and fun for 2D games.

The gameplay screen of Fractionauts.

Photoshop Setting

There are many tools you can use to create pixel art, ranging from Photoshop, Illustrator to MSPaint. 

Choose whatever tool you are most familiar with - the arts from Risk of Rain is made in MSPaint and they look FABULOUS.

I do my best work in Photoshop, and there are couple things you can do to make it easier.

1. In Preference/General, set Image Interpolation to Nearest Neighbor. This will keep the pixels pixelated instead of blurry when the image size is changed.
2. For the Paint Bucket tool, set Tolerance to 0 and deselect Anti-alias. This makes the bucket™ respect your pixels and does not over-paint it. Or in short, it makes the paint bucket work like the one in MSPaint.
3. Use Pencil Tool to make all the pixellings you need. Load "Square Brushes" to paint squares. Which looks like pixels.
4. Now try to erase it. Is the eraser blurring your image so much you want to chew a rabbit? If you feel as I do, you'll love this one: Change Eraser mode to Pencil. This turns off the anti-alias that Brush Mode performs. You can also change it to Block, which works as a fix-sized square eraser in any zoom level.
5. For Texts, custom pixelated font is always the better choice because they are designed with pixelation in mind, but a common practice necessary is to change Anti-Alias (the one list option right to font size. It's so very easy to spot) to None. This prevents, again, the evil blurriness. We want our edges sharp.
• A cool thing about fonts is that all fonts will be pixelated when they became too small. So, if you type the texts small in your desired fancy font, then rasterize it, then transform it to your desired size, you get to create some unique-looking text!
6. Speaking of Transforming, change the Interpolation to Nearest Neighbor when using it because something something hard edge.
7. Usually, when you zoom too close to the pixels, Photoshop automatically slaps a grid onto it. This could be distracting and annoying. Turn it off at View/Show/Pixel Grid.

And there you go! You have successfully degraded Photoshop to a more powerful MSPaint! Congratulations!

Art Direction

I've asked many people the simple question of "How to make pixel art". Their answers are similar.

Look at a style you like, and copy that.

My designer artist friend told me that. The Art director at Workinman told me that. A promising pixel art tutorial series said that.

When it comes to making an image interesting and useful, pixel art is no different from the other styles of artworks. And just as in other art styles, there is no silver bullet: many small details go into the look of it. My tip is to use a limited color palette, especially if you are going for a retro style of art. Systems back then don't support that many colors. Use kuler.adobe.com to search for and create your own color palette. Make sure the images look cohesive when put together. Make a mock-up of the gameplay scene first to determine how it'll look, then dissect it into art assets for the programmer to use. Don't use JPG compression.

For further tips and tricks, http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299 is an amazing detailed tutorial addressing many common mistakes and practices. Check it out!

Making card for a post-apocalyptic card game

I made a card game! With a group of five. Though I'm more a designer than an artist, if I am one at all, I'm making art for it.

It turned out a lot better than expected. The class pretty much got wooed by the pretty and professional-looking cards. It felt like a Christmas party when we received the cards we order!

Design

Daniel Solis's 5 GRAPHIC DESIGN AND TYPOGRAPHY TIPS FOR YOUR CARD GAME is my constant guideline to refer back to. Some good points he brought up that is exclusive to card game design are:
 - Graphical elements to distinguish cards are much better than mere words.
 - Keep the texts short and precise; no player would want to wait for the others to finish reading.
 - When it comes to font size, consider the distance between players and cards. If something need to be read by all players across the table, it probably needs to be big. If it's just flavor text, keep it small and separate.

Our game is We Are Alone, a post-apocalyptic exploration combat card game where the cards make the board.

 - Theme: In a world where human were gone, the other creatures start reclaim the earth.
 - Some requirements: 4 types of deck, each for one player and each resembling a race.
 - Races inspiration: Distinct color schemes, different elements and the terrains they can relate to, mythological creatures.

Back of the Card

Treeple
 - Based off Alex Pardee's Treeple, and Ent in the legends. Holds the holy mission to reclaim the damaged environment.

Shapeshifter
 - Based off swamp monster, salamander and Man-Thing from Marvel. Sneaky amoral creature that moves in the shadow. Writes scary diaries where he refers the diary as another person.

Prometheans
 - This one started as Phoenix, but we changed the concept because phoenix is a deity-like singular creature, and it was hard to come up with lores and monsters for it.
 - The lore's goal is to have some thief and rogue cultured race in the game, to contrast with the other races. The Prometheans are thieving creatures seeking the warmth of the flame and the last ember the phoenix carries that would lit the Great Fires that burns across the world once more.

Depthling
 - The explorer race. Depthlings are humanoids from the deep sea, exploring the land in their "aqua-suits". The lore was interesting because it was written from the perspective of Depthlings, who considers lakes island, water breathable, and air suffocating.

Front of the Card

The color shows the faction; the side bar shows the type; the title is, well, title. There's a paragraph of descriptions about how this card works, and at the bottom we put in some witty flavor texts.

Lore Card

One thing that makes this game unique is the adventure mode: Player can choose to read lore cards after their first, second, third, and final battle, depending on the outcome of the battle.

Production

Each deck has 52 cards, and all the cards need art. That's a lotta art.

Drawing takes a lot more time, and since none of us (including me!) are really artists, we decided to find creative common licensed pictures and photoshop them to make them look like paintings. We split the works to four people. I made the template for each race, each type of cards, and we plug the art, description and flavor texts in.

printerstudio.com is where we print our cards. They have a card design template you can download, so that's pretty neato. When it comes to printing, the most important thing is to be aware of bleeding: the edge of the image will be cut off. The cards we submit all have border extending to the edge of the document, so that when the machine cuts it off it'll create the professional looking rounded edge. Regularly the printers are 300 dpi, and when that translates to Photoshop it becomes 300 pixel per inch. The color for printing is also different from the color on screen: CMYK instead of RGB. Generally, they look less vibrant when printed, because the screen emits light and the cards don't.

Post Mortem

"What? I thought this whole article is a post-mortem."

 - Pickled Chickenfoot

 - Lore Card Design: Looks pretty, but hard to categorize and order, and lore card happens to be the ones that need shuffling the most.
 - Front card design: Pretty good. Card Type can use some less kerning. Since each types have different word length, it'll look better to line up the end of the word instead of the beginning, and have the first letter "hang" down there. Symbol would help distinguishing types of card a lot as well.
 - Printing: As mentioned beforehand, the cards are generally darker than digital ones. Shapeshifter's texture is barely visible and Treeple's border is a lot darker than expected. I would recommend pre-printing the cards on thinner, cheaper paper, to preview the colors.
 - Team Dynamics: The best way to communicate visual ideas is to present them. As a rogue designer that speaks another tone natively, things went a lot smoother when I started crunching out pixels. It's awkward to argue about the looks of a card when there is no card, especially if the other isn't a designer.


Oh, we also made boxes today. Hand crafted custom boxes.

BOXES!

Printer Studio dot com has box templates for 52 cards. That won't fit our 240 something cards - plus it's very expensive to order them, as they only produce custom boxes in large quantity - so we took their template, modified it to fit our cards, printed them at the RIT Printing hub, folded and glued them into boxes ourselves. 

That's right, we are over-achievers.

The post-mortem for boxes would be to find some professional places that prints custom boxes in small amounts. Sure, hand-crafting everything gives a feeling of accomplishment, but it takes a lot of work to cut the boxes with scissor, fold them and glue them, and they will still be flawed when comparing to professional boxes. The 100lb paper I used is the heaviest paper in the printing hub, but the ink cracks wherever the paper is folded. Any suggestions on how this can be done?

Wanna try the game? 

You can find us at RIT to play, ask Weez about her copy, or order copies from this link: https://www.surveymonkey.com/s/VDCSMV7

We are working on printing the rules at the moment this blog is published. Along with the cost of boxes, I'm guesstimating $23 without the lore card, and $30 with them.

Blind Horizon Studios Postmortem

"

post·mor·tem

pōstˈmôrtəm/

noun

     1.

an examination of a dead body to determine the cause of death.

2.

an analysis or discussion of an event held soon after it has occurred, especially in order to determine why it was a failure.

     "an election postmortem on why the party lost"

"

void setup()

Blind Horizon Studios is an independent game development team at Rochester Institute of Technology (RIT), composed of members Dustin, Blake, Matt, Amanda and Tori. The studio started from a victorious game jam, where their serious game Energy Drive won them 5000 dollars for serious game creation.

The students were inspired by this event. They sensed that they are onto something. Serious games expand the limit of traditional games, allowing the media to be used in more aspects and areas. Blind Horizon Studio is formed to create them while they take classes in RIT.

function manager()

During a co-op Dustin worked at, his company used the Scrum development model. He also found out that he enjoys pitching very much. Dustin took the role as President of the Studio and producer, overseeing the development and handling the business side.

The milestones their projects pursue are often tied to game festivals, university exhibitions, etc. They would look at one incoming event, and say, "Ok, this is what we need to show at that event. To get there we need this much to be done, and to do that we need to do these this week."

BHS is using Trello for project management now, but Google Drive is also a great help (Changbai: Yes! Can't agree more!).

function $$$()

As an indie game studio that produces non-profit serious games, BHS hopes to get their income from grants - that's how they got their first bucket of 5000$ fuel. BHS also sold Energy Drive back to MassDigi.

function school()

Stressful schedule and lack of meeting is back for works, and attending school puts the studio into that situation.

BHS spent 1000+ hours on Energy Drive, and unknown amount (but large, for sure) on the other projects. 

/*** lessons ***/

 - Game Design > Technology. For Memento, the studio decided to create a custom 3D engine inside Flash, but it turned out to be much more time-consuming, and it limited the available time to design and test the game. 

Energy Drive is their most successful game, and Blake pointed out that the intense iterations BHS put into it really made it shine.

 - Scoping is very important. Memento's art is very over-scoped. As a 3-d game, along with the fact that this game's environment is very important to the feeling, the art workload is way out of scope for a single artist. The studio tried to bring in other student artists, but these students can't be as dedicated as BHS members, and their art style often doesn't go along. Dustin also mentioned the danger of adding 

 - If something needs to be done, do it right now. This builds up the passion and it pushes the entire studio to work efficiently.

//TODO

The members are graduating. The company will still exist in name, but its activity will cease for a while. Blake is going to work at Microsoft, Dustin co-oping at Uncorked Studio, and Amanda will go back to school to finish up her Bachelor, hoping to pursue a Masters degree in Visual Communication.

Being in a game studio while working at another company could be tricky. The company might not allow the employee to produce competing projects during his time there.