Showing posts with label backgrounds. Show all posts
Showing posts with label backgrounds. Show all posts

Wednesday, February 26, 2014

Planning a Visual Novel

How do I PLAN my 
Visual Novels?

Since it's utterly pointless to create a story I don't have the resources, or skill, to turn into a Completed visual novel, I begin my planning by looking through my Assets and Asset Sources, to see what I can use. By the way, I am constantly adding new graphics and links to my asset collections.

Music
For the main menu, and for individual scenes I prefer to use one album, or collection by one band, or artist per game. This makes the music consistent in style.

Images
For backgrounds and characters, I happen to prefer using photo images. Occasionally I'll draw my characters from scratch, but my backgrounds are almost always heavily filtered images, or filtered photo-manipulations.  

Photo Sources

Anime style Character & Background sources:

3D Modeling program:

Sound Effects
For locations as well as for things that happen.

Then I consider my...
Artistic limitations:
  • What can I draw?
  • What can't I draw?
    • Can I make what I need with SketchUp?
    • Can I Photoshop what I need from bits and pieces of what I do have? 
    • Can I art-filter Photos into what I need? 
      • Do I have the right plug-ins to make a photo look like Art?
      • Do I have the right photos?

Then I consider my...
Coding limitations:
What I know how to code, or can get templates, sample codes, and/or tutorials to code.

The LemmaSoft forum holds a comprehensive library of tutorials, samples, and template games. Seriously.

Next to consider are my...
Copyright Limitations:
  • Paid license for commercial use?
  • Creative Commons, free to use with Credit, but not commercially?
  • Public Domain? 
  • Stolen from the Internet? (With the possibility of a copyright infringement lawsuit?)

Once I know what I have, I can then figure out what type of game I can create vs. what I can't create, and explore possible work-arounds for what I want to create. 

What I Want vs. What I Have

As you can probably guess, I prefer making adult games. However, I rarely have enough graphics to fully illustrate an erotic scene, so I Fake It. I select one one static image and write extremely detailed text to fulfill the erotic portions of the game. Oddly enough, this technique has proved to be rather successful, (read: Popular among my players).

For those who have actions scenes in their games, but just can't get the graphics to illustrate them, this technique could be a viable option -- IF you have a damned good writer on your team.

To see full-sized image: Right-Click > View Image

Next comes...

Game Planning

I use FreePlane, a free mind mapping program, to plot out the main paths/options in the game. FreePlane is disgustingly easy to use. Most of it is simply point > click > type. It even has a built-in Spell-Check, though you have to Turn It On, plus internal hyper links (green arrows) to jump from any bubble to any other bubble.

With this program, I can map out the game into multiple stages (or chapters,) with all their branching options, plus hyper links that jump to specific results.

By closing all the options, then clicking open only those I wish to select, I can actually do a dry-run of the entire game. This is particularly useful for uncovering anything left open-ended before I even begin coding.

To see full-sized image: Right-Click > View Image 

As for the story writing aspect goes, I tend to write out most of the dialogue and narrative right into FreePlane, then just copy-paste the text straight into the game's code.

How to Plot the Story

I plot out my stories in FreePlane, but then I've crafting stories for a really long time so most of the work happens inside my head. For those who need a little assistance getting their ideas organized, there's this technique;

Visual Novel Graphics

To make the graphics FIT exactly the way they're supposed in the game without any extra adjustments, I open Photoshop and create a PSD file set to the exact dimensions of the game. On separate layers in this one file, I create all the graphics; buttons, textboxes, menus, and backgrounds.

Once they're created, it's simply a matter of saving the individual layers as PNGs and JPGs into the Game file.

 1024x768 game
For full sized image: Right-click > View Image

I create the characters in their own PSD files because they tend to have hundreds of layers all by themselves. I also make them complete; head to toe at 1100px tall for a game 768px in height, then cut the image from the top - down to fit the 768 screen.

Ivan's PSD file was over 800MB in size.
He had 4 costume changes, 6 poses, and 14 different expressions. 

Once I have all (or most of) the graphics made, I open Ren'Py, my visual novel engine of choice, and begin coding the game together.

When I  run into problems --and I do regularly-- I visit the LemmaSoft forum for Tech and Coding support. It is the ONLY place to get quick, if not immediate help for Ren'Py coding complications. Mainly because the creator of Ren'Py; PyTom, hangs out there.

The Cookbook section of the forum has a whole treasure-trove of coding tricks for just about everything from making an Image Gallery, and a Music Room, to setting up Turn-Based Battles. Warning: This section has been known to induce Feature Creep in games!

What about Beginners?

If you're a beginner working on your very first visual novel, I cannot recommend this tutorial high enough:

This tutorial will teach you everything from the ground floor of opening the RenPy engine, all the way up to the intermediate level of setting up menu choices and jumps, posting flags to change events, and applying a point system to select an ending within a working multi-ending game that you code from scratch.

When I first ran into this tutorial, I had already completed two games. Even so, I could not believe how many Basic things I'd never learned. This one tutorial made so many things that seemed complicated very easy to learn -- and Use.

Enjoy!

Wednesday, June 13, 2012

Photo to Art Game Backgrounds



Making Backgrounds 
My Technique for turning Photos into Art with Photoshop.

The most common question I get asked about my game Faery Tale, is: How did I do the graphics?

The short answer is Photoshop.
-- Every image is a multi-layered photo-manipulation that was heavily filtered multiple times to make them look like fairy tale art.

I'm a big-time art nouveau fan, as in the art of Alphonse Mucha, so that was the style I was aiming for.



While I am not about to give away every single secret to my techniques, mainly because they took months of experimentation to figure out, I am willing to reveal the basic process.

It all begins with Photoshop and quite a few Art Plug-Ins, such as:
  • Topaz Labs: Clean 3, Adjust 4, and Simplify3
  • Alien Skin Snap Art 2
  • Imagenomic

And yes, I used ALL of these plug-ins for each image; background and characters.

The most important part of the process, however, is the Line Art. That was done using the Color Sketch action from 10 Sketch Effects, a Photoshop actions set that is available free on Deviant Art.


How I do it:
-- In Photoshop...


Stage 1: Pick a good image.



Stage 2: Photo-manipulate the image to suit your needs, then duplicate the finished image so that you have two layers.




Stage 3: Hide the copy layer. On the Background layer, make the lines using the Color Sketch action from 10 Sketch Effects.




Stage 4: Level the lines to darken them, then Reduce Noise to clean it. After that, Art Filter the line art to make them look more like a sketch.

I use a rather expensive art plug-in for this process, but you can make a somewhat rougher version for Free by using Drawing and Threshold Actions 1 by eGulumse, specifically, the first action: 1- Çizim+path. (Experiment with the different styles. You might find one that works better for you.)

The trick is to make your line art with the 1 Color Sketch action, SAVE A JPG COPY in your files, (but don't close it!!!) Run the 1- Çizim+path on the color sketch line art. This will give you this result:



Flatten Image, then Retrieve your saved jpg. Set the color jpg UNDER the black and white lines then set the black and white lines to Overlay.


The results are not as refined as what I use, but then I paid serious money for my plug in where this is Free. :)

Stage 5: Hide the line art layer. Turn on the copy layer and Art Filter the untouched layer to make it look like a painting or drawing, or both. 


I use another rather expensive plug in for this process, but Photo to Watercolour Action by

cazcastalla  is a fairly reasonable and Free substitute.  

 


Stage 6: Turn on the Lines layer and set it on top of the Art layer. Set the Lines to Multiply at 50% Opacity, then Merge the layers.




Stage 7: Overlay and Soft Light artistic textures over top of the whole thing to make the image look even more like art.

I overlay a personally created scribble texture to break up the flatness of the colors then softlight two different splotchy watercolor-style textures, but a sketch type screentone texture can work for the scribble texture, and watercolor textures are easy to find on DeviantArt. 




Enjoy!