Friday, May 15, 2015

Mephistopheles’ Sprite: Reinterpreting a Familiar Character

by Meagan

Mephistopheles and four of her expressions

The Faust legend, and thus the character of Mephistopheles, has been around for centuries – Goethe wasn’t even the first to write about it.  So my challenge in designing Meph’s sprite was this:  How do you take a character that has been reimagined countless times over hundreds of years and really make it your own?  While I’m not sure I can answer that question definitively, I’d like to share a little of the thought process I went through in creating Mephistopheles for Faust: Scene II

Preliminary Research:

Source
My first step was to pull up my preferred search engine and do some visual research.  If you want to make something a little different from what’s already out there, you have to know what’s already out there, right?  Look at what others have done.  Think about what works and what doesn’t, what you might want to pay homage to, what you want to deviate from.  (It was at this step that I found out it’s actually not uncommon for Meph to be played by a woman in modern performances of Faust.  Pretty cool.)

Next, I consulted my source material.  The first thing Meph does when she shows up in this scene is describe what she’s wearing, so clearly I had some imperatives when designing her outfit.  I needed to include at least gold braid, a sword, and some kind of hat with a feather in it, and red should be the predominating color.  From here, I had some decisions to make about the costume’s style.

Period Costume, But Not Really:

Source
While vaguely medieval in setting, the Faust legend draws on sources from several different time periods.  I wanted to reflect this in Meph’s outfit, so I researched historical clothing from the 14th, 15th, and 16th centuries.  Most of the designs I found, however, I felt were way too impractical for her character - especially the women’s clothing!  I settled instead on a RenFaire- ish look for its theatricality and visual appeal, taking some cues from rapier fencing costumes.  This would allow her to move around a lot, theoretically (I imagine her as a very animated person), and help the sword make more sense.

Designing a Demon:

Source
I wanted Meph to be a recognizably feminine and maybe even somewhat pretty humanoid, but with something a little “off” about her.  So keeping with the medieval theme, I looked to some medieval and Renaissance artwork depicting demons for ideas.  Temptation of St. Anthony paintings were really useful for this.  It surprised me how often demons are shown as these reptilian or even frog-like creatures.  Playing off of that, I gave Meph’s skin a greenish cast with sharp highlights for a subtle slimy look.  I’m also really in love with the classic goat-like concept of a demon – horns, cloven hooves, and such.  Given that Meph’s wearing a large hat and you only see her from mid-thigh up, though, none of the typical features would be visible.  My solution was to give her goat-like ears.  I sketched out a couple options, since goat ears are actually pretty varied. 

An awful photo of my sketchbook taken with my phone.
I got really attached to the big floppy ones at first.  They were really different from the usual depictions of goat-like demons.  However, I was worried they’d take away from her face too much.  The faces on both sprites needed to be highly visible to show the changing expressions clearly.  For this reason, I went with the smaller, pointy ears.


The Final Result:

The finished sprite in-game.
In the end, my hope is that all this piecing together of ideas and elements from different sources will result in something fresh.  Meph was actually my first attempt at a VN character sprite, so definitely a learning experience.  I'll be writing more about my sprite art soon.  I've got a couple of digital painting posts in the works that will break down my steps for actually drawing the sprite.

Wednesday, May 13, 2015

Sunrise Postmortem: Part III (GUI, CC0 Resource)

by S.

For the Sunrise GUI, I began by mocking up the GUI shapes and overall design in Adobe Illustrator. This allowed me to work out the composition for each screen and quickly test the color scheme and font choices. The color scheme changed drastically, in the end I only kept the orange for the hovered buttons.
Top, from left to right: main menu, save/load, say screen.
Bottom, from left to right: settings, credits and extras gallery.

 After I had the overall shapes down, I could print them out and use a lightbox to transfer the shapes to charcoal paper. The finished textures looked like this:
Top: Main Menu. Left: Screen Decoration.
Bottom Left: Textbox. Right: Texture Border

This is how the textures look when applied as masks to the main menu:



The Sunrise GUI is now available for download, with most assets released into the public domain. More information through the link:

Download

The GUI, Postmortem
Overall the GUI went by much more quickly than I expected it to. I went for a simple approach and tried to keep all of the main features in the default Ren'Py GUI. This is an improvement over past GUI design for me. In Asher, I hid the quick menu up at the top of the screen where it was almost invisible! However, Ren'Py's default GUI is actually very user-friendly, and that's something I want to preserve where possible.

From character design to sprite: Personal projects

by Aviala

Last time I wrote about my character design and sprite process when working with clients but when I do work for my own projects, I'm my own boss and the way I work is different.

With my own character, I usually start with a broad idea about the character's personality. It would be better to have all the details down but I'm usually really excited about drawing the characters so I start drawing before I finish writing the backstory, etc.

Based on the basic personality and the fashion style I've established for the world the characters live in, I start sketching, usually with a pencil.


For Aifao, the character above, I knew that he was a 25-year guy who's a soldier. These are some of the first sketches for him. In Skyfish, it's very common for guys to have long hair, so I decided it was suitable. You can't see it from the sketch, but since he's related to Captain, who's a brunette, he also has dark brown hair.

After the initial sketches, I start working on the sprite. At this point I usually don't have a clear idea of what the character will wear. I start by drawing the character nude, and sketch clothes on top on different layers, like a paper doll. I often look at references for the poses. I usually leave the sprites rougher under the clothes and only spend time on refining the visible parts.


I try out different base colours for the clothes by drawing them on different layers and fiddling with the hue, saturation, etc. The design above might not be the final one, but I had a feeling that she needed a long skirt. She's also not very rich, so the colours aren't very bright for the most part, and her outfit is clean yet simple.


The "professional" way to do everything would be to do separate character and outfit designs properly, and draw separate sprites based on them. But because I'm in charge of my own project and this method seems to work for me, this is the way I work.


Charon here is from a wealthy family so his clothes have brighter shades like blue, and he has some embroidered details on his hat. 


And last but not least: When I need to design new outfits, I hide most of the layers and just doodle on top with different colours. I don't know why, but this method has produced some of my favourite outfit designs. The key thing is probably that they're really fast to draw on top of the naked sprites so if something doesn't work it doesn't take long to come up with something new.

From character design to sprite: With clients

by Aviala

This is the first part of my character design and sprite process series.

When I work with clients, there are a few things I need to keep in mind when I start doing the designs. I make certain assumptions about the preferred style and "feel" of the characters based on the genre, and of course, the client's requests. For example, for an otome game I'd probably choose a cuter, more manga-inspired style, and for a grim story about WW2 I'd choose a painted, semirealistic style with darker colours - unless the client asked for something else.

Based on the client's description about the character, I do a very rough sketch. At that point it doesn't have colours or anything. Sometimes I do a couple of different outfit sketches.




Then, after I make changes to the sketch based on the client's request, I block in base colours. At this stage I ask the client to tell me if any final changes need to be made because it's hard to change things when the sprite is done. I usually sketch with light colours on a warm grey background because pure white is very overpowering and makes it hard to see lighter shades like the light yellow I'm using below.


After the client is okay with the colours, I either start doing the lineart or painting. Here I'm using a sprite from Our Healing Hearts as an example. The client preferred a painted anime-style look, so I skipped the lineart stage. I'm painting the clothes, hair, eyes, mouth, etc all on different layers so I can change things (like colours or details) easily if I have to.


After doing a rough painting I usually show the design to the client once again. At this stage I don't usually make any changes to the design unless I really have to, Usually this is the point where I decide the character design is done, but with Our Healing Hearts the pose happened to be suitable for the sprite, so instead of starting from the sketching stage again, I just started turning the design into a sprite.



Above is the almost finished sprite. It needs some finishing touches but it's very close to being ready for the game, Since the pose of the arms in the design was a bit unnatural I drew the hands again based on the client's request. I also drew a wheelchair for the character. I chose to draw the whole wheelchair instead of just drawing the visible parts so that I could get the structure and perspective right.

Stay tuned for next time where I'll write about designing characters for my own games.



All-Female Faust: Gendering Goethe

By Meagan



For about a year now, I’ve been working on Faust: Scene II - a kinetic novel adaptation of an excerpt from Goethe’s classic tragedy.  The dialogue in this personal project of mine is nearly unaltered from a contemporary English translation.    The art is heavily inspired by historical artists such as Heironymous Bosch and Harry Clarke.  The element that I feel is entirely mine, however, is the gender presentation of the two main characters.


Making Faust and Mephistopheles women wasn’t an arbitrary decision.  In fact, I wavered back and forth for a long time about how “true” I should stay to the source material in this regard.  Ultimately, though, I chose to make Faust: Scene II a story about women.

In the Western literary canon, women and other marginalized groups are rarely represented in important roles - yet we’re told that these works are somehow universal and speak to the essence of what it is to be human.  Faust the character, especially, is often read as a metaphor for humanity as a whole, and his existential struggles represent humanity’s collective grappling with morality and scientific progress.  Changing the characters’ gender is my way of questioning the supposed universality of the (straight, white) male experience.  I want to challenge players to read these same broad philosophical themes in a female character, rather than in the men we’re erroneously told depict the “default human.”


What’s more is that Faust: Scene II is an opportunity for me to portray an older female character.  Women over 35 are a rarity not just in games, but in all forms of mass media, and scarcely (if ever) do they get to play the role of protagonist.  Their roles tend to be limited to passive, grandmotherly figure or evil witch stereotypes.  Faust, in sharp contrast, is not only an active and driven protagonist in my kinetic novel; she’s also a university professor and renowned scientist.  Simply put, by changing Faust’s gender, I hope to expand what we think of as “appropriate” roles for older women.  As a woman myself, I want to know that I’ll still have options in life 10, 20, or 30 years from now.


All this being said, I don’t have any illusions that my 5-minute Ren’Py game is going to totally change the world.  However, if it gets a few players to think about the gender representation issues I’ve talked about here, I’ll consider it a success.  Faust: Scene II is nearly complete with only a couple art assets to finish up.  Expect plenty more updates from me related to this project!             

Sunrise Postmortem: Part II (Background Art)

by S.

Sunrise's cutout-style animated intro
As NaNoRenO takes place only over a month, I had to be careful how I portioned my time. I wanted to create painted sprite art, but I also wanted to animate the background art. In order to have both, I adopted a simpler cutout style for the background art. The 2D style allowed me to create background art more quickly, but also allowed me to easily make multiple movable layers that I could then animate or remove, depending on the needs of the current scene.

Overall I went for a retro collage look, because collage is one method of combining flat graphics with highly rendered images. This combination is also the opposite of the typical visual novel, which generally uses simplified character art on highly rendered background art. I was curious how the reverse would work. (NaNoRenO is a nice time to experiment).

Once I settled on the approach, I began with the most intimidating background first. In this case, the plane. All of the -punks are about technology (steampunk, cyberpunk and so on,) and dieselpunk is no exception. To be true to the setting, some form of dieselpunk technology had to be incorporated. Hazel-Bun (one of my collaborators on Sunrise) suggested a plane:
Sunrise: Shiye's Work Room. It has several layers that can be animated or removed.

Whenever approaching a subject I haven't drawn before, I spend some time studying and practicing . Since I hadn't drawn (any?) planes before, I spent some time sketching WWII planes from reference to get the feel for the proportions of a plane. This later helped when creating preliminary sketches for other scenes that used planes (there are three in Sunrise).


Sprites with halftone outline

Integrating with Sprite Art
In order to make the character art look like it belonged on the background art, I created halftone outlines for the characters. Unfortunately, these outlines tended to flash when ATL (Ren'Py's Animation Transformation Language) was applied. I worked around it for some characters, but with some of the sprites that I coded in early on, such as James's, the outline still flashed every time the character spoke. Next time, I would make any outlines part of the character sprite rather than a separate silhouette.

Unfortunately, there was no time to go back and rework background or sprite art, so if I tried something as an experiment (like the halftone outline), I would lose too much time if I went back and fixed it. In my personal work, I might make several variations on any give piece. (I made five variations on the Tell a Demon textbox until I was satisfied—with Sunrise I only had time for two.)

Sunrise Postmortem: Part I (Sprite Art)

by S.
Sunrise Sprite Breakdown

The above image shows the basic stages of sprite construction in Photoshop. Sofia was the final sprite I painted, and by that time I nearly tossed the drawing stage altogether and went straight to the underpainting stage.

The approach I took with the Sunrise sprites is actually very similar to the one I use in order to paint the Tell a Demon art: a drawing, followed by an underpainting, followed by a final overpainting (example on my Tumblr, here). This basic process, by the way, is pretty similar to that of the Renaissance masters.

CGs? What CGs?


Prior to Sunrise, I was a slower digital painter, probably due to the fact that I did not have clearly defined steps before. Or, not clearly defined like I had for my traditional art. Although I spent more time on the sprites than any other part of the process, I was surprised at how quickly the Sunrise sprites went. Each one took about three evenings, including the expressions, despite that some expressions required me to re-paint significant portions of the characters' faces.



Although I painted the expressions on transparent layers, I painted the poses on an opaque layer. Later on, I cut out the sprites using masks made in Illustrator. I find this to be a faster and more forgiving method since it allows me to easily change the contours of the character and I don't have to worry about accidentally painting on the wrong layer.

Overall, I felt like my work and working method improved over NaNoRenO. Hazel-Bun also helped here by drawing concept sketches and character designs to work from and offering me feedback on the look of each sprite as I painted them.


One problem I stumbled across was the painted style. I used two Photoshop brushes for the character painting, and as a result the brush strokes look very digital. I prefer to combine digital and traditional textures for this reason, but in future I would explore using different digital tools so that the digital look wasn't so overt. I would also prefer to spend some more time on the characters; Sofia, as the last sprite I painted, began to look a little more stylized than the others.

Sunrise Postmortem


Sunrise: A Dieselpunk Fairytale
Sunrise: A Dieselpunk Fairytale, is a visual novel created for NaNoRenO, a visual novel game jam. It's a story about Sofia, a noblewoman who is struck by a curse just when court politics are getting dicey for her and her fiance, Shiye. (Read more about the story or download here).

I'll cover my part (or most of it) in the following posts:

Part I: Sprite Art

Part II: Background Art


Part III: GUI & Design

Saturday, May 2, 2015

Skyfish: Introduction to the world

by Aviala

Frankly, I'm not sure how to start writing about this. I've been planning the world for years, so there's a lot to talk about. Bear with me while I try to keep this short and snappy but probably get lost into tangents.


The world of Skyfish is a mixture of fantasy and steampunk, but I've made an effort to make it different from the typical fantasy genre that Tolkien started - which I have nothing against, being a fan of the genre - but I wanted to create something really unique.

I can't talk about worldbuilding without mentioning my partner Tasmir. He has helped me a lot, and the world wouldn't be the same without his extensive knowledge of history and culture - and his sometimes infuriatingly specific requests for things that would actually work instead just looking like they might. Bless him.

The map of the world as it is - still a work in progress. Many of the names are placeholders.
The story of the game begins in Southern Marava, a country stuck in a hundred year long civil war. Southern Marava is officially run by local councils, but near the war-torn border the power belongs to the warlords. The country has abandoned both it's long-lasting traditions and it's former rule under a long line of Empresses. 

One of the more fantastic qualities of Skyfish is the floatstone, which can only be found in the large lake next to Souther Marava. Floatstone is a crystal-like substance with the power to make things (or people) fly. It was only discovered around twenty years ago, and harnessed into powering airships ten years ago.

Marava is just one of the countries in the world we created, but it already has it's own culture and even a language. We're working hard to make both Marava and the whole (known) world even richer and better.

New Contributor: Aviala

by Aviala



Tell us a bit about yourself.
I'm Aviala, a game design student and a visual novel creator from Finland. I'm also the founder of Lizard Hazard Games, my group and soon to be business. Right now I spend a lot of time working on my project, Skyfish. When I have time, I also do art as a freelancer for other game projects.

Why visual novels/interactive fiction?
I don't remember how I first found Ren'Py, the visual novel engine, but I was amazed by how easy it was to learn how to make a simple VN. After my failed attempts to draw a webcomic I decided that a story-based game would be perfect to tell the story I couldn't bring into comic form.

What was the last thing you worked on?
Last night I worked on some commission work, and earlier today I finished writing a backstory for a Skyfish character. Skyfish is my first big game project so I haven't really worked on anything very significant before that.

Working on anything right now?
Yes, Skyfish. I've been working on it on and off for around 3 years, but there wasn't any significant progress before I started focusing on it a few months ago.

What are a few of your inspirations (artistic, literary, games)?
I don't have many inspirations that I'm directly drawing from, but when I was younger I used to read a lot of fantasy literature. The Hobbit is one of my all-time favourites, because my mother used to read it to me when I was little, and since then I've read it multiple times. Fantasy literature helped me read better and inspired me to try my hand at writing - though it's been a long time since I wrote a story before Skyfish, so I'm rusty.

The TV show Breaking Bad inspired me to write better morally ambiguous characters. The show helped me define some characters for Skyfish. As for art... I don't have many specific artists or works that inspire me. I just suck in inspiration from all around me, I guess. Having many artist friends helps.

Other interests?
Lots. I'm interested in medieval combat, and I'd like to try my hand at that someday. For now I only do boffering aka foam weapon combat. I also have other nerdy hobbies like tabletop roleplaying and LARPing. I have a fabulous sense of style and I love to shop at thrift stores.

Plant, animal or mineral?
Plant.


New Contributor: Meagan

by Meagan

From Faust: Scene II
Tell us a bit about yourself.
In addition to game dev and freelance illustration, I also work part-time in a university archive handling cool old stuff. 

Why visual novels/interactive fiction?
I’m trained as an oil painter, actually, and I have a strong interest in digital art and visual storytelling.  Visual novels seem like the perfect way to combine those interests and bring my 2D art to life.

What was the last thing you worked on?
I did some illustrations for Detective City, a Twine game made for Global Game Jam 2015.  I’m also the background artist and UI designer for the upcoming fantasy VN Queen At Arms.
 
Working on anything right now?
My current personal project is Faust: Scene II - an all-female kinetic novel adaptation of a scene from Goethe’s Faust.
   
What are a few of your inspirations (artistic, literary, games)?
Oh gosh, umm…. Northern Renaissance painters, medieval manuscript illumination, the Pre-Raphaelites, Golden Age illustrators, weird atmospheric games like Year Walk and Limbo, and story-driven indie horror RPGs like Ib and Mad Father.  That’s the short list, anyway.
 
Other interests?
Goth subculture, heavy metal music, mythology, folklore, and world religions.
 
Plant, animal or mineral?  
Animal, I suppose. 

New Contributor: OokamiKasumi

From The Adventures of Prince Ivan
Tell us a bit about yourself; why visual novels/interactive fiction?
As an author, I saw Visual Novels as a fantastic new way to tell a story. I was already creating worlds with words alone. The idea of adding images, music and sound effects to a story fascinated me.

What was the last thing you worked on?
The Walk, a Psychoanalysis Game. It's actually more of a Quiz game than a Visual Novel. Truthfully though, I was testing some coding just to see if I could do it.

Working on anything right now?
I'm in the planning (plotting) stage of a couple of new ideas, but I'm either missing needed assets to complete it, or the idea is just to big for me to accomplish by myself.

What are a few of your inspirations (artistic, literary, games)?
My core inspiration for making visual novels is an older game called "Ballad of an Evening Butterfly" (link), one of the VN's translated by DejaVu. With only a handful of choices available, it was far more Story than Game. I played it and pretty much thought, "Hey, I can do that!" However, several years passed before I found the RenPy VN Engine and started making my own VNs.

I have two other sources of inspiration: The old "Choose Your own Adventure" books and Fairy Tales. Many of the older Fairy Tales actually have riddles and puzzles in them, so they work well as VNs, but studying the style of story branching CYOA books use is where I got my first ideas on how multi-path stories should work.

Other interests?
Photoshop. I became an addict after working with a couple of scanlation groups that translate manga from Japanese to English. I adore experimenting with ways to take photos and make them look like paintings.

After too many years of experimentation I finally figured out how to make VN character sprites. However, the 'paperdoll' technique I use is not a popular style. Unfortunately, I just don't have the drawing skills needed to make each character an individual work of arte, so I make-do with the limited skills I do have.

Plant, animal or mineral?
Animal!