Game Art vs Pixel Art

In this here post we continue my rambeligs on pixel art vs game art this time we will be focusig on...

Game Art

The main difference when focusing on game art is that you must thoroughly identify the intent of what you are creating, what will its purpose be and how will it interact with other elements in the scene? Will it be in the foreground? Will the pallet choice make it stand out or blend in and do you want it to? Will it have animation or is it a static asset?

Once you understand what your creating a little better, you should decide on a appropriate canvas size for the image ie. a 16x16 sprite for a RPG character and a large background image could not be created on the same canvases.

Another thing you should focus on is how much time you have to dedicate towards the asset usually with game development you have set deadlines for art, this is where working with placeholders come in creating a rough draft size of your piece to implement into a game so the other team members can work without having to wait for you to finish your time consuming pixel art.

Something that you need to know for all pixel art is how to save out your art so it is thoroughly compressed without losing any quality, the short answer is save your pixel art as .PNG format its the best for pixel art, it supports alpha it can hold thousands of colors and it is very small, you can also use formats such as .GIF (colour loss) and .BMP (uncompressed) but .PNG is by far the best.

The last major difference compared to pixel art is that animation is used, animation is a large topic so i will focus on this in another post, but all you have to know right now is it is time consuming, plan to give yourself about as much time as you would spend on the static image for each frame in your animation and if you want a nice animation plan to be completely redrawing about 80% of the frames each time.

Next post animation

Pixel Art VS Game Art

Lets take what we have learnt and figure out see how important the rules are to the two main areas of pixel art, for lack of better more jazzy sounding names, Pixel Art and Game Art.

A. Adam and Eve by Fool

Pixel Art

Pixel art is far more open than game art, there are no size restrictions or colour limits, but this dose not mean you should use every colour imaginable because you can, keeping a succinct and tight pallet can still work to a pixel artists favour just as with game art expanding your pallet also opens up room for so many more micro relationships between their many values, defining your pallet early is even more critical when using such a large number of colours on the right A has a pallet of 64 colours while B has used only 20 using more colours doesn't give you more depth in your image knowing how to use your values dose.

B. Basilisk Rider by a3um

Even after what I've said here it is still possible to keep a small pallet and still open it up to hundreds or thousands of colours, how? well im going to tell you.

After you get to a point in your image when your happy with how it fundamentally looks and is solidly constructed, you can start to give your image a bit of extra pop with this technique. create an overlay layer and using whatever tool you like start applying lighting and hue variation to your image, try to keep your colour theory rules in mind but basicly thats it :P Traditionally this is less accepted in game pixel art, as retro games pallets were limited (the original game boy s pallet was 4 greys!) to but given the computing power of pc's and mobile platforms today there is no reason (besides animation) why you can not use this technique in game art.

When it comes down to it pixel art can be pushed any way you desire as long as your taking care to deliberately place and weigh the value of each pixel in its relation to the artwork.

Next post Game art vs Pixel art.

Some of my Pixel Art

This post is for me to show off a little here are some of the bits and pieces i have done, mostly for video games and forum avatars.

These items were created for the game Machines of loving Grace

 Some Repeatable Textures

THE ALMIGHTY CRATE1!11!!

Pixel Art & Colour Theory Strikes back!

Yo pixel champ in the making, lets crack into some more info and techniques to use in our art why not?

Colour Ramps

a colour ramp is a pallet of colours arranged by their hue and luminosity values, creating an easily discernible set of colours for you to use:

Above is the pallet i chose and bellow i have arranged them into a colour ramp. There is still an error in this ramp though all the colours are arranged by luminosity, but in the lower ramp the green hue clashes with the other colours in the ramp, if you were to use it in an image it would not look nice. to create a nice ramp like the top one the hue of the colours should not be random but follow from one to the next

The most important thing about a colour ramp is that it helps you balance your pallet and space out your values evenly, a pallet with varying ratios of relative distance from hue to hue, or luminosity to luminosity will often look quite poor and take away from your art.

Hue Shifting 

Now we understand how to create a colour ramp hue shifting is super easy to grasp, basicly as your luminescence value raises up the ramp you shift the colour to a lighter hue ( refer to cheat notes ) or a darker value the lower it goes, just remember as with your ramp keeping the relative values constant will yield a greater result.

Workflows

Some Commonly used workflows when working with colour:

Grey scale to Hue

As the name suggests you start by just adding in values of black and white till your image is ready for colour, then decide your pallet by replacing greys with your chosen hue value mixed with luminescence and saturation value of that gray.

Painting In Layers

Start by picking your pallet, each colour will be assigned its own layer, starting with the darkest layer you lay down the base of the image moving up layer by layer, tone by tone until you have placed in all the values.

Add as you go

This method is similar to the last but as you find yourself needing more colours for highlights, shadows you add in extra colours to your pallet. This can be a bit dangerous unless you understand colour theory well, as each colour added throws off more micro conections to each other colour in the scene and you will need to alter the relations of a few if not all of the colours in the scene.

That's all for this post,

Smell ya later.

Pixel Art & Colour Theory

Colour theory is a very important concept to learn before you jump into pixel art, it can literally make or break your piece, even if your piece is fundamentally correct in every other way if your colours look like mud and poo, (not actual mud and poo) so will it.

A lot of this post will be information from outside sources as others have put it much more precisely and eloquently than I ever will :P so lets get down to it.

Hue, Saturation & Luminescence

The Photoshop colour picker is an excellent aid in teaching about colours, open it up and have a play for yourself.

These terms are used to precisely describe colour, Hue is the base identity of the colour ie. red, blue. is it defined on this colour picker by the bar of colours in the centre and the H value to the left. Saturation is the intensity of the colour it is defined on the Photoshop colour picker by the X axis of the large window and the S value to the left. Finally Luminescence is what percentage of black or white is in the colour, a value of 100% being completely white and 0% completely black.


The next piece of information is from a post by Dhaos on Pixelation it covers a lot of values for good colour hues and where to put them, so take in all the magic numbers and keep them close on hand:


[BAISC PIXEL COLOR THEORY]-pixels are much more exact than natural media so you must 'learn' what colors are light and dark*the follow values are the HUE of a color (using RGB to select colors is alot more complicated... I only know like two artists who do it)*I do not include most of the inbetween colors (teal violet, magenta etc...its not necessary right now, I'm only included commonly used colors)


[MIDTONES] (the 'base' tone if you will) +red:5-25hue or 340-355hue +orange/brown:25-40hue (the less saturation this hue has, the more brown it becomes) +yellow: 40-50hue +green: 65-80hue (darkers greens 'hue:120ish' generally look VERY bad unless they are confined to a small area on a pic) +blue: 200-215hue +purple: 220-245hue


[SHADOWS] (where light does not hit...) +red: 0-10hue or 330-340hue +orange/brown: 10-25hue +yellow: 20-30hue (note the shadows of yellow tend to be orange or brown) +green: 80-95 or 120~145 (again...there usually isn't alot of dark green in an image, even a forest scene, so this hue:120+ is ok) +blue: 220-245hue (note...the shadows of blue tend to be purple... perhaps its a pattern...) +purple: 225-245hue (purple generally is its own shadow)


[HIGHLIGHTS] (where light directly strikes an object...used to make specific objects POP)-This section is complicated. It involves hue shifting to figure out-highlights are generally done by shifting your midtone hue to the next brightest colour-red/orange/brown: maximum hue: 35-50 (aka yellow~yellowish-orange)-yellow: maximum hue: 55-60 (any higher and you get green)-green: maximum hue: 55-65 (yellow is brighter...thus it highlights green)-blue: maximum hue: 160-195 (notice the huge-ass range... blue is just weird that way...most greens/teals/light blues can highlight it beautifully)-purple: maximum hue 200-210 (aka blue) OR 300~345 (again huge range, magenta/violet can highlight purples as well)


[COLOR COMPARISON]-yellow->green->orange/brown->red->blue->purple-some colors are brighter than others...its just how colors are-yellows are generally the brightest 'colors' aside from white(s)...-colors blend best if 1)they follow the hue rainbow-thing 2)the tones are seperated by an area of shadow

Please enjoy the cheat notes, i have :P

Next post will be on further colour techniques

Ciao

Pixel Art: Terms / Linguo / Techniques Part 2

so im gonna talk a bit about bad techniques and how you can avoid them, so lets get to it:

Pillow Shading

pillow shading is an effect that occurs when in an attempt to shade an object the artist will not consciously pick light source, the end result is shitty looking banded shading from the centre of the object radiating outwards ( like an onion, its got layers [ not like an ogre ( they don't have layers )]) pillow shading can be fixed slightly by dithering but you will still have the underlying weak lighting issues causing any other items to be added to the scene to also look oddly lit even if they are not pillow shaded themselves.

Examples:

pillow shading on all sides of a cube and a face with pillow shading.
don't do this there are no fixes besides reworking all the clusters in the image or starting again.

Jaggies

Jaggies are often seen in line work, but can also be found when clusters meet each other, the cause is usually noobish mistakes, avoiding the use off aa or simply not cleaning your line work, so here's what it looks like.

Examples:

on the left bad line work is cleaned using the sequence method (11122322112321...) and on the right AA is used to soften the deliberately straight line.

Banding

banding is when the placement of your pixels cause a loss in apparent resolution, usually occurring around the edges of a piece though any area is prone to banding. banding in low resolution pieces is generally acceptable as altering out banding at that level can change the whole identity of what the cluster is conveying, but in a larger piece say 150 pixels and up avoiding banding is a good practice, banding comes in many forms and ill go through a few of them now.

Examples:

(note: plz ignore the bad everything in these pictures)
1. Staircase banding: pretty bad banding, occurring when a line of pixels goes parallel with another line of pixels. this also occurs as hugging banding in the shading on the arm

2. Highlight banding: another common newby form of banding when the highlight follows the along with the edge or outline of the piece, this can be fixed by AA or deleting out pixels that are on the edge of eace "step"

3.Spaced Banding: this one is tricky, your brain is awesome, it can calculate that 2 rows of unconnected pixels are on the same level and link up that there is a common row of pixels causing, yep, banding. AA can help as well as moving highlights or effected areas a pixel or so

4. 45 degree banding: pixels at 45 degrees are very easy to spot at natural resolution using a sel-out can help stop this also putting in another step for your lines

Pixel Art: Terms / Linguo / Techniques

Welcome back! This time I am going to teach you of some of the common terms and techniques used in pixel art. Let me just say that the following information is what I call it, terminology can vary depending on the artist so just be aware.

Anti Aliasing (AA)

AA is used to make edges look smoother by blending jaggy pixels edges with a 3rd mid-tone colour.

Examples:

A. no AA
B. too little AA is also too dark
C. Good amount of AA also 2 shades of gray
D. Too much bad AA, very messy, way too many grays, sloppy as all hell

Dithering

Dithering is a blending process, by using patterns you can create a gradual overlap of two colour tricking the eye to discern a 3rd colour from the mix. dithering can also be used to add style to an artwork via custom dithering patterns.

       Examples:

A. Standard dithering pattern
B. Stylised dithering patterns
C. Messy dithering, not too pretty eh?

A word of warning with dithering if the piece you are working on is too small dithering can look weird and ruin it, it is generally used to blend larger clusters of colour together or convey lighting which would look strange on a 32 x 32 piece.

Clusters 

When you have a group of continuous pixels together its called a cluster, clusters make up most of pixel art as a single pixel on its own will not usually convey a lot of meaning, unless its being used as a highlight or in a smaller image. placing clusers next to each other creates form and meaning that cannot be achieved by single pixels, but the single pixels hold the identity of the cluster in their tiny tiny pixilated hands. when editing clusters be very aware that any slight change can throw off the form of other clusters just by being next to them. In the end pixel art often comes down to placing down pixels and evaluating if it looks better or worse than before you placed it, so never be scared to experiment.

Examples: 

A. a witches hat the clusters working together nicely
B. here i have edited the first sprite and the lightest cluster is now giving the witches hat a slightly faceted look, also it confuses the light sorce of the image
C. the darkest cluster is far too dominant over the rest of the image causing a loss of form

Ill also add in a link here to the cluster thread at wayofthepixel.com you can get a better idea of how editing single pixels can dramaticly change the look of a piece: wayofthepixel.net/index.php?topic=15566.0‎

Sel-out (Selective Outlining)

An optional technique used to give an outlined piece a bit of extra colour information. Basicly colouring in your outlines, not advised if your character or asset is a similar colour to its background. selective outlining can also help you give form and depth to your piece.

Examples: 

a bushy green thing with sel-out applied

Next time: Bad practices and things to avoid

Ciao

Pixel Art Basics: Setting up

YO!

Welcome to a series of informative tutorials helping you get started and learn more about techniques used in creating the pixel art and implementing it into a 2d game!

To me pixel art is a very interesting medium, like all art there are many rules that define what it is and how you can go about doing it, but like all rules they are there to be broken or at least bent to a degree so from all my research so far im going to throw at you a bunch of accumulated knowledge blasts so try and catch em while there hot!

Setting up 

Hardware your going to need: a computer (duh) and ideally a graphics tablet if you don't have one a mouse is fine too but to make more modern pixel arts a tablet is what you want. 

Program wise i use and will be writing these tutorials for Adobe Photoshop, i prefer Photoshop because of all the awesome tools it has your not going to get anywhere near as many options to tweak your art as with Photoshop, but if for some reason you don't want to or cant use Photoshop there are many other alternatives you can also use such as Gimp, Graphics Gale, Aseprite, and if you want to use your browser to create pixel art pixelartor.com will do the trick fine.

Setting up Photoshop for pixel art

When i set up my scene in Photoshop I choose a size slightly larger than what i want for my final piece if im being more artistic and free form with what im making if i know exactly what ill be making and its intent ie. a game item or rpg tile think about what your making and how many pixels it is going to be and make it that size. To make it easy for you set up a 8 X 8 pixel scene to start off. (ps were gonna make a pokemon's ball)

Thats mostly set up the only other things i like to change are turning off the pixel grid under view->show->pixel grid but thats up too you. also optional is a warm cup of coffee or beverage.

Tools

The Pencil tool is the main tool you will use for pixel art, it is your bread and butter you dont need to change many settings here this baby is gold, his partner in crime is the good ol' Eraser tool but before we touch him he needs to be told how to act, in the tools menu your gonna want to change its mode over from brush to pencil. Wonderful your 2 most potent pixel tools are set up, another thing you can set up now is turning of anti aliasing in your preferred selection tools tool menu other than that your ready to go baby.

Ok now you have your scene set up have a play now and make a pokeball so when you come back and learn more you can laugh at what a bad job you did :P

Next Post will be on pixel art Jargon and terms you should know 

Ciao!

Text and Drive game Breakdown

Text and drive

• A first person perspective from the inside of the car as the driver (3D)
• The player has to steer the car with the numpad and text his girlfriend with the keyboard while using the mouse to look
• There is a clingy girlfriend who keeps texting you as you drive and you must respond fast
enough or be dumped
• While texting a post effect blurs the road as you focus on the phone
• You must navigate traffic and obsticles to survive
• Your “score” is based on the number of texts you send as well as the distance you travel
• To reply to your girlfriend there is a template response which you must type correctly, as the
game progresses the complexity of the responses increases and
• Start, pause and end gui are all within the phone

Experiential Aims

We aim to provide the player with a unique challenge/simulation experience 
challenging the players reaction speed, multitasking and typing skills.

Game Rules

The game has 2 end condition rules miss 2 texts from your girlfriend and she dumps you and you throw the phone into your speedometer from pure rage at what a bitch she is OR you crash your car into another car or obstetrical and you crash and your phone is embedded into the speedometer from the force of the crash both leading to the players end score and options to play again displayed on screen.

Systems

1. car control
2. switch focus
3. text input
4. pause menu
5. start menu
6. end game
7. tutorial
8. odometer
9. cars AI
10. scripted SMS

Conflict / Why its Fun

conflict is created in our game by giving the player 2 obviously counter productive tasks that they need to balance in order to continue and get a larger score. Driving means you cant see what your texting and you inevitably make spelling mistakes (which you tight ass bitch girlfriend hates) and pulling up your phone obscures your driving view making it easier to screw up driving.

its fun because its a challenge and it has a quirky humor.

Goals

the games goals are firstly to get the high score, maintain control as long as possible and also unwind the story unfolding between you and your (demon harpy from the pits of hell) girlfriend.

Story / Gameplay Outline

start the game you are greeted by a loading screen of a mock iphone or galexy or whatever also the loading screen for the game as your phone boots up it takes you to the start menu a bunch of apps (start menu) giving you options of start, info on the game & how to play.

starting the game you are prompted to type out a text to your girlfriend "hey :)" after that you get a text from your service provider the screen that tells you "numpad enter switches between drive and phone mode, 1=left, 2=slow down and 3=right esc=Pause NO REPLY" effectively pushing you straight into the game and giving you all the information needed to start playing.

The game ends when you either crash into another car or meet up with your girlfriend and she throws away your phone because, you guessed it. shes a bitch.

Mechanics

1. Car Controller
2. Texting
3. Switching focus 

Demographic

12 and up, anyone who can type and has a sense of humor. mild swearing.

Console

PC

Game Prototyping

polished game ideas from our awesome TEAM TACO's prototyping week.

Magic Pet Shop Escape

• save magic animals and help each other escape from the wizards pet shop to maul him after trying to burning it down for insurance money
• play as different animals with unique controls and abilities to escape the inferno!
• 3D 3rd person cutesy art style 
• save different animals to use them by opening their cages, switch through different animals to solve puzzles
• dog: super strength (push cages)
• rabbit: ice breath (hold off fire for small amount of time)
• cat: telepathy (scout the puzzle/maze)
• animals that survive try to maul a wizard
• gameplay style is akin to "push box"

Taco Tactics

• Grow your taco business from the ground up, use advanced marketing techniques, espionage and good ol' fashion delicious tacos to put your rivals out of business and become the most gargatuously mammoth taco company of all time
• 2D isometric strategy game
• Ruthless AI opponents
• be the first to make 1 million dollars profit to win!
• hire taco vendors to move more product and take revenue away from rival taco vendors
• street thugs to pester rival vendors and protect your own
• cooks to increase the deliciousness and demand of your tacos
• and spies to steal taco recipes and intel from rival companies
• build various buildings to research recipes, sales techniques and upgrade your units

Flock of Life

• Lead your flock of homing pigeons to relative safely with your pigeon (cursor) avoiding obstacles on the way in an Apocoliptic Hellstorm
• pick up stray pigeons to your flock and avoid losing your pigeons to meteors, hell deamons and giant floating Beiber head (the obvious bringer of the apocolypse)
• top down "galaga"-ish view but with awesome crisp 3D graphics
• Epic Environments 
• attack enemies by forming formations (scissors, gun, ect) that are more powerful depending on your flock size

Text and drive

• A first person perspective from the inside of the car as the driver (3D)
• The player has to steer the car with the numpad or arrow keys
• There is a clingy girlfriend who keeps texting you as you drive and you must respond fast enough
• While texting the road blurs out as you focus on the phone
• You must dodge traffic to survive
• Your “score” is based on the number of texts you send as well as the distance you travel
• To reply to your girlfriend there is a template response which you must type correctly, as the game progresses some of the characters are missing and dificulty of responses increase
• Start and pause menu are in the phones menu, end screen is a car crash