Pixel Joint Forum: [OPP] [WIP] Revised Style Guide

Message

Ripped straight from the chatbox when I was helping Hapiel, and posted here for your convenience. Some of this was in the making for up to a year. Hopefully it's still in the making.
Welcome to the OPP!

Before diving in and making or finishing assets, please read the guide below, then check out what we have done so far to get a feel for the style of the project.

GENERAL

• STYLE [GENERAL]

The style of all OPP assets is cartoony and 3-dimensional, with simplified and exaggerated features.
Tiny or realistic details and shading and realistic proportions should be avoided.

• SHADING [GENERAL]

All OPP assets use DawnBringer's 32-color palette.
Animated sprites, E.G. Players, NPCs and enemies have flatter, simplified shading/rendering.
Non-animated sprites, E.G. FG tiles, BG tiles, and static assets have slightly more detailed shading/rendering.

Most assets are lit from a top down to a 30° angle, tending towards frontal lighting.
Avoid straight top-down or side-on lighting that casts hard shadows, especially on animated sprites and sprites used in multiple environments.
Avoid dithering, over-rendering and single-pixel noise in all sprites.

See below for material examples.

 [STONE, DIRT/WOOD, CHROME, GLASS, WATER, GRASS, LEAVES, PLASTIC, SKIN 1, SKIN 2]

• OUTLINES [GENERAL]

Assets have 1-px outlines which can be broken/shaded according to light sources, or colored. Avoid solid black outlines.
Outlines get lighter towards the light source. At the point closest to the light source there is no/minimal outline.

Players/NPCs have black or dark outlines darker than the object's shadow.
Near BG assets have dark outlines the same color as the object's shadow.
Far BG assets have light outlines the same color as the object's shadow.

• SUBJECTS [GENERAL]

For utility, the OPP will cover the generic themes most commonly used in platformer games through the ages before branching off to others. These include:
• Cave (Rock, Ice)
• Jungle (Forest, Temple)
• Ice
• Village
• Factory
• Castle

Specific assets that don't fit those themes are welcome as long as they are in the proposed style, but those themes are our priority and most assets should be geared to fit them.
Some assets can and will be interchangeable.

SPRITES

• PROPORTIONS [SPRITES]

For humanoid characters, head-to-body ratios usually range from 1:2 to 1:3:

[vis. example is placeholder]

This applies less strictly to non-humanoid characters, but they are still within range.

For all characters, heads, hands and facial features are large. Legs are shorter than torsos. Hands are simplified in sprites.
Players and NPCs have tall black eyes with small highlights, red/pink ears and noses.*

*This is a general rule for generic character types. Exceptions can be 
made for specific character types, E.G. glowing eyes or black animal 
noses.

• ANIMATION [SPRITES]

All animations are meant to be played at 8/100 seconds (80ms).
Animation is fluid and some are complex, so some animation experience is recommended.
Animated sprite sizes can range from 32x32 to 96x96 tiles, but keep it reasonable to avoid the wrath of the pixel gods.

Animations are listed in order of priority. Bold animations should be completed at a minimum.

PLAYER
• Run
• Jump
• Idle
• Take damage
• Crouch
• Fall
• Attack
• Walk
• Climb
• Die
• Talk
• Prolonged Idle
• Interact

NPCS
• Idle
• Walk
• Talk
• Interact

ENEMIES

(Required
 animations depend heavily on enemy design, E.G. walk and idle might be the
 same animation.)

• Walk
• Idle
• Run
• Attack
• Jump
• Fall

Foreground and background tiles are usually not animated (with exceptions, E.G. water tiles). Other sprites such as pickups or particle sprites can be animated.

TILES

• STYLE [TILES]

All tiles are based on a 32x32 grid.

Walkable foreground tiles consist of a 32x32 base tile which sprites are placed on, and an additional background tile on top of this, about 4 to 8 pixels high.
Other background tiles are placed on successive layers behind this.

[vis. example, todo]

Detail tiles are placed on top of/behind base tiles to break up the grid and add visual interest.

[vis. example, todo]

Tiles on the same layer can be placed on top of each other for flexibility.
Use tiles that can be combined with other tiles instead of several unique tiles if you can.

[vis. example, todo]
Ideas:

Custom simple examples of materials w/color ramps, for visual ref, doubles as example of color usage (DONE)

Updated character rosters

Moar hyperlinks

Replace "marked with a *" with "red" or something else if formatting allows it

Still some elaborating to be done now, then much later some visual formatting to kill the plaintext look. Thoughts?

EDIT: update 1.

EDIT: update 2.

Author	Message
pistachio Seaman Joined: 16 February 2017 Online Status: Offline Posts: 9	Topic: [OPP] [WIP] Revised Style Guide Posted: 20 February 2017 at 5:02am
	Ripped straight from the chatbox when I was helping Hapiel, and posted here for your convenience. Some of this was in the making for up to a year. Hopefully it's still in the making. Welcome to the OPP! Before diving in and making or finishing assets, please read the guide below, then check out what we have done so far to get a feel for the style of the project. GENERAL • STYLE [GENERAL] The style of all OPP assets is cartoony and 3-dimensional, with simplified and exaggerated features. Tiny or realistic details and shading and realistic proportions should be avoided. • SHADING [GENERAL] All OPP assets use DawnBringer's 32-color palette. Animated sprites, E.G. Players, NPCs and enemies have flatter, simplified shading/rendering. Non-animated sprites, E.G. FG tiles, BG tiles, and static assets have slightly more detailed shading/rendering. Most assets are lit from a top down to a 30° angle, tending towards frontal lighting. Avoid straight top-down or side-on lighting that casts hard shadows, especially on animated sprites and sprites used in multiple environments. Avoid dithering, over-rendering and single-pixel noise in all sprites. See below for material examples. [STONE, DIRT/WOOD, CHROME, GLASS, WATER, GRASS, LEAVES, PLASTIC, SKIN 1, SKIN 2] • OUTLINES [GENERAL] Assets have 1-px outlines which can be broken/shaded according to light sources, or colored. Avoid solid black outlines. Outlines get lighter towards the light source. At the point closest to the light source there is no/minimal outline. Players/NPCs have black or dark outlines darker than the object's shadow. Near BG assets have dark outlines the same color as the object's shadow. Far BG assets have light outlines the same color as the object's shadow. • SUBJECTS [GENERAL] For utility, the OPP will cover the generic themes most commonly used in platformer games through the ages before branching off to others. These include: • Cave (Rock, Ice) • Jungle (Forest, Temple) • Ice • Village • Factory • Castle Specific assets that don't fit those themes are welcome as long as they are in the proposed style, but those themes are our priority and most assets should be geared to fit them. Some assets can and will be interchangeable. SPRITES • PROPORTIONS [SPRITES] For humanoid characters, head-to-body ratios usually range from 1:2 to 1:3: [vis. example is placeholder] This applies less strictly to non-humanoid characters, but they are still within range. For all characters, heads, hands and facial features are large. Legs are shorter than torsos. Hands are simplified in sprites. Players and NPCs have tall black eyes with small highlights, red/pink ears and noses.* This is a general rule for generic character types. Exceptions can be made for specific character types, E.G. glowing eyes or black animal noses. • ANIMATION* [SPRITES] All animations are meant to be played at 8/100 seconds (80ms). Animation is fluid and some are complex, so some animation experience is recommended. Animated sprite sizes can range from 32x32 to 96x96 tiles, but keep it reasonable to avoid the wrath of the pixel gods. Animations are listed in order of priority. Bold animations should be completed at a minimum. PLAYER • Run • Jump • Idle • Take damage • Crouch • Fall • Attack • Walk • Climb • Die • Talk • Prolonged Idle • Interact NPCS • Idle • Walk • Talk • Interact ENEMIES (Required animations depend heavily on enemy design, E.G. walk and idle might be the same animation.) • Walk • Idle • Run • Attack • Jump • Fall Foreground and background tiles are usually not animated (with exceptions, E.G. water tiles). Other sprites such as pickups or particle sprites can be animated. TILES • STYLE [TILES] All tiles are based on a 32x32 grid. Walkable foreground tiles consist of a 32x32 base tile which sprites are placed on, and an additional background tile on top of this, about 4 to 8 pixels high. Other background tiles are placed on successive layers behind this. [vis. example, todo] Detail tiles are placed on top of/behind base tiles to break up the grid and add visual interest. [vis. example, todo] Tiles on the same layer can be placed on top of each other for flexibility. Use tiles that can be combined with other tiles instead of several unique tiles if you can. [vis. example, todo] Ideas: Custom simple examples of materials w/color ramps, for visual ref, doubles as example of color usage (DONE) Updated character rosters Moar hyperlinks Replace "marked with a *" with "red" or something else if formatting allows it Still some elaborating to be done now, then much later some visual formatting to kill the plaintext look. Thoughts? EDIT: update 1. EDIT: update 2.
	IP Logged

Hapiel Rear Admiral Joined: 03 May 2021 Online Status: Offline Posts: 3227	Posted: 20 February 2017 at 5:41am
	Thanks for rewriting this. To be clear for others: This is to replace the old style guide Some pointers of mine on this new suggested version: • STYLE [GENERAL] The style of all OPP assets is cartoony and 3-dimensional 3-dimensional seems very vague to me, perhaps the guide should elaborate what that means? Floor tiles are very flat for example. Also, probably here there should be a mention of sideview/platformer projection. • SHADING [GENERAL] Should there be some more detail on color usage? How to structure your ramps, contrast, etc.? For example now we have a huge difference in contrast of these new assets compared to these old ones ANIMATION [SPRITES] Good idea to add the asterix in there, but I think you might have overdone it. I'm sure people can use these sprites with way less animations, some games just require running and jumping animations and nothing else, not even idle! Also, static images can work perfectly fine as idle placeholders, so also this I wouldn't stress. It's super cool to finish everything, but realistically speaking, the amount of characters grows faster than the amount of animations. My suggestion of order of priority: PLAYER • Run • Jump • Idle • Take damage • Crouch • Fall • Attack • Walk • Die • Talk • Prolonged Idle • Interact NPCS • Idle • Walk • Talk • Interact ENEMIES Required animation heavily depends on enemy design, walk & idle might be the same animation and run & attack might be the same animation too • Walk • Idle • Run • Attack • Jump • Fall Foreground and background tiles are not animated As suggested by pringles, we're thinking of animating some water. Should the guide leave room for exceptions? Perhaps a mention somewhere at the bottom, that there are always exceptions to every "rule"? I'm looking forward to other additions and opinions
	IP Logged

Hapiel Rear Admiral Joined: 03 May 2021 Online Status: Offline Posts: 3227	Posted: 20 February 2017 at 11:33pm
	Some more thoughts: Player characters might also get a "climbing" animation? low priority. In the tile section there should definitely be some explanation about layering tiles, all kinds of details should be layered on top for extra flexibility and less complex tiles. For example: This becomes this
	IP Logged

Hapiel Rear Admiral Joined: 03 May 2021 Online Status: Offline Posts: 3227	Posted: 26 February 2017 at 4:28am
	Whadda yadda think of this?
	IP Logged

pistachio Seaman Joined: 16 February 2017 Online Status: Offline Posts: 9	Posted: 01 March 2017 at 3:51am
	That's pretty great Hapiel. Some issues though: Darkest color in the material examples got cut off, and the DB32 gray was not really a good color to use there because it's confusing glass/chrome Typos: "typicaly" is "typically", no "and" in "red/pink ears noses", "transparent" is "transparent tiles" I'll mock up some visual elements soon then hopefully we'll get it working in the site.
	IP Logged

OPP
Pixel Joint Forum : Pixel Art : Collaborations/Challenges : OPP