Difference between revisions of "Art Specification Document"

From Open Surge Engine Wiki
Jump to: navigation, search
(Visual References)
 
(41 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Stub}}
 
 
 
{{image_specs
 
{{image_specs
 
|float=right
 
|float=right
Line 8: Line 6:
 
|transparent_color=#ff00ff
 
|transparent_color=#ff00ff
 
|image_format=PNG
 
|image_format=PNG
}} This document describes what it takes to make sure your artwork looks its best in the Open Surge game engine.  While it is not complete, it should serve as both a good starting point and a valuable reference for all Open Surge artists.
+
}}
 +
=Introduction=
 +
Open Surge is a retro game, meaning: low-res pixel art.
  
We can and will replace the "ripped" content with original user-made resources.
+
Desired style: a Saturn-esque mixture of ''Sonic Mania'' and ''Knuckles' Chaotix'', with shading. Currently, Surge is flat. We want him to have lighting and more detail, as in the picture below (same for Neon and Charge).
  
==Introduction==
+
[[File:Surge-improved-sprite.png|512px|thumb|left|Credits: TopHatter]]<br clear="all">
This game is NOT tile-based. It's brick-based. Bricks are blocks that are placed freely on the scene (examples: platforms, ramps, trees, plants).  Some bricks can be animated, while others are obstacles (floor/walls).  Furthermore, bricks can be passable in front of the players or behind them (decorative objects).
+
  
Bricks can be of multiple sizes, even in the same level.  Your designs can combine a rough layout of large pillars and platforms with the detail of small rocks and bushes. The game engine recognizes level bricks as either rectangles (floor, walls) or triangles (ramps). We can even create classic circular loops by combining a few triangular bricks.
+
NOTE: adjust the lighting direction/sun to the top-left corner of the screen, as is the case for the levels.
  
[[File:Loops.png]]
+
= Specifications =
 +
== Overview ==
 +
The general idea is to create the look of a "cartoon-ish" retro game, including vibrant, saturated tones and an emphasis on pixel art. Keep the following in mind:
 +
* The screen resolution is 426x240 pixels (16:9)
 +
* The standard magenta (rgb <span style="color:rgb(255,0,255);">'''255,0,255'''</span>) is used for transparent pixels.
 +
* The engine supports the portable network graphics (PNG) format. Think 2D pixel art; the PNG format handles that job well.
 +
** A PNG image ''should not'' exceed 2048x2048 pixels and ''must not'' exceed 4096x4096 pixels
 +
[[File:Lighting_Boom.png|426px|thumb|left|Gameplay picture]]<br clear="all">
 +
[[File:Screenshot3.png|426px|thumb|left|Gameplay picture]]<br clear="all">
  
== Specifications ==
+
== User Interface (UI) ==
The general idea is to recreate the look of a SEGA CD/32x game, including vibrant, saturated tones and an emphasis on pixel art.  The original platformer style must be maintained.
+
* Acessibility is everything
 +
* Minimalism ("less is more")
 +
[[File:Options1.png|426px|thumb|left|Simple, obvious UI]]<br clear="all">
  
Keep the following in mind:
+
== Level graphics ==
[[File:Desert1.png|200px|thumb|right|Desert Brickset made by Celdecea]]
+
=== Scenery ===
* The engine supports portable network graphics (PNG) format. Think 2D pixel art; the PNG format handles that job well.
+
Open Surge is brick-based. Unlike tiles that are fixed in size, bricks are blocks of variable size that are placed freely on the scene (examples: platforms, ramps, trees, plants).  Bricks can be animated or static. They may or may not affect collisions (e.g., decorative scenery vs floor and walls). Furthermore, bricks can be passable in front of the players or behind them (decorative bricks).
* The color mode is 24 bits per pixel
+
* The standard magenta (rgb <span style="color:rgb(255,0,255);">'''255,0,255'''</span>) is used for the transparent color.
+
  
=== GUI ===
+
Your designs can combine a rough layout of large pillars and platforms with the detail of small rocks and bushes. We can even create classic circular loops by combining a few bricks.
* Acessibility is everything
+
* Symbolic, minimal text (if any)
+
  
=== Level graphics ===
+
* '''Official bricksets must be grid-compatible'''. That is, the width and the height of every brick must be a multiple of 16. Examples: bricks of 16x16, 32x16 or 16x32 are okay, but a brick of 17x23 is not. There are detailed guidelines at the [[Bricksets]] page.
* Please read the [http://opensnc.sourceforge.net/forum/viewtopic.php?id=33 detailed brick mechanism]. '''REALLY.'''
+
* The game supports Parallax Scrolling. Backgrounds are usually large in width (about 500~1000 pixels wide) and have diverse heights. We attach the backgrounds to different layers (having different speeds) in order to create the parallax effect. Please read: [[Backgrounds]]
* The sizes of the bricks are diverse. The image to the right shows several different-sized bricks which are used to create a level.
+
* Please read the [http://opensnc.sourceforge.net/forum/viewtopic.php?id=62 detailed background mechanism].
+
* The game supports Parallax Scrolling. Backgrounds are usually large in width (about 500~1000 pixels wide) and have diverse heights. We attach the backgrounds to different layers (having different speeds) in order to create the parallax effect.
+
  
 
=== Items ===
 
=== Items ===
 
* The items are diverse in terms of animation and size. Examples:
 
* The items are diverse in terms of animation and size. Examples:
[[File:Checkpoint_orb.png]]
 
 
[[File:Spring_pads.png]]
 
[[File:Spring_pads.png]]
 
[[File:Item_boxes.png]]
 
[[File:Item_boxes.png]]
[[File:Switches_and_doors.png]]
 
  
 
=== Enemies ===
 
=== Enemies ===
 
* The enemies are also diverse, but they tend to be "small" in size and have few animation frames. Example:
 
* The enemies are also diverse, but they tend to be "small" in size and have few animation frames. Example:
  
[[File:Lady Bugsy and Slime Bullet.png]]
+
[[File:Springfling.png]]
[[File:Sir_bugsy.png]]
+
[[File:Moska.png]]
  
=== Characters ===
+
== Characters ==
 
+
[[File:Surge2020.png|256px|thumb|right|Surge spritesheet (v0.5.1)]]
* Characters have many animations and many frames. Each animation frame must fit ''roughly'' in 50x50 pixels.
+
* Characters have many animations and many frames. Each animation frame must fit a 64x64 box. Inside that box, graphical boundaries should fit ''roughly'' 50x50 pixels (whenever possible). For more information, please read [[Characters]]
* Available animations:
+
* Minimum set of animations:
 
** stopped
 
** stopped
 
** walking
 
** walking
 
** running
 
** running
** jumping/charging/rolling
+
** jumping
** crouch down
+
** ducking
** look up
+
** looking up
 
** pushing a wall
 
** pushing a wall
 
** death
 
** death
Line 68: Line 68:
 
** braking
 
** braking
 
** hold the ceiling
 
** hold the ceiling
** flying (only for [["Neon" the Squirrel]])
+
** ledge
** climbing (only for [["Charge" the Badger]])
+
** waiting
* Examples:
+
** winning (level cleared)
[[File:Chargex.png||thumb|left|"Charge" the Badger]] [[File:Elsato.png||thumb|left|El Sato is not an official character, but it's displayed here for artistic reference]]
+
** charging
 
+
** rolling
 
<br clear="all">
 
<br clear="all">
  
== Visual References ==
+
= Testing your art =
* Knuckles Chaotix (SEGA 32x)
+
Testing your art on the game is a matter of modifying a few text files. It's simple to do, and you don't need any programming. Read more at: [[Sprites]]
* Sonic CD (SEGA CD)
+
 
+
Please follow the links:
+
 
+
http://img19.imageshack.us/img19/3955/visualref1.jpg
+
 
+
http://img697.imageshack.us/img697/8153/visualref2.png
+
 
+
http://img697.imageshack.us/img697/2227/visualref3.jpg
+
 
+
http://img30.imageshack.us/img30/8260/visualref4.gif
+
 
+
http://img16.imageshack.us/img16/6457/visualref5.jpg
+
 
+
http://img16.imageshack.us/img16/7159/visualref6.gif
+
 
+
http://img403.imageshack.us/img403/2167/visualref7.gif
+
 
+
http://img684.imageshack.us/img684/2757/visualref8.gif
+
 
+
http://img403.imageshack.us/img403/1176/visualref9.png
+
 
+
== Testing your art on the game ==
+
Please read: [[Sprites]]
+
  
 
[[Category:Development]]
 
[[Category:Development]]

Latest revision as of 08:27, 10 August 2021

Art Specs

At a Glance

When creating new brick sprites for Open Surge, please use the following export settings:

Bits-per-pixel 24
Transparency None
Transparent color #ff00ff    
Output format PNG

Introduction

Open Surge is a retro game, meaning: low-res pixel art.

Desired style: a Saturn-esque mixture of Sonic Mania and Knuckles' Chaotix, with shading. Currently, Surge is flat. We want him to have lighting and more detail, as in the picture below (same for Neon and Charge).

Credits: TopHatter

NOTE: adjust the lighting direction/sun to the top-left corner of the screen, as is the case for the levels.

Specifications

Overview

The general idea is to create the look of a "cartoon-ish" retro game, including vibrant, saturated tones and an emphasis on pixel art. Keep the following in mind:

  • The screen resolution is 426x240 pixels (16:9)
  • The standard magenta (rgb 255,0,255) is used for transparent pixels.
  • The engine supports the portable network graphics (PNG) format. Think 2D pixel art; the PNG format handles that job well.
    • A PNG image should not exceed 2048x2048 pixels and must not exceed 4096x4096 pixels
Gameplay picture

Gameplay picture

User Interface (UI)

  • Acessibility is everything
  • Minimalism ("less is more")
Simple, obvious UI

Level graphics

Scenery

Open Surge is brick-based. Unlike tiles that are fixed in size, bricks are blocks of variable size that are placed freely on the scene (examples: platforms, ramps, trees, plants). Bricks can be animated or static. They may or may not affect collisions (e.g., decorative scenery vs floor and walls). Furthermore, bricks can be passable in front of the players or behind them (decorative bricks).

Your designs can combine a rough layout of large pillars and platforms with the detail of small rocks and bushes. We can even create classic circular loops by combining a few bricks.

  • Official bricksets must be grid-compatible. That is, the width and the height of every brick must be a multiple of 16. Examples: bricks of 16x16, 32x16 or 16x32 are okay, but a brick of 17x23 is not. There are detailed guidelines at the Bricksets page.
  • The game supports Parallax Scrolling. Backgrounds are usually large in width (about 500~1000 pixels wide) and have diverse heights. We attach the backgrounds to different layers (having different speeds) in order to create the parallax effect. Please read: Backgrounds

Items

  • The items are diverse in terms of animation and size. Examples:

Spring pads.png Item boxes.png

Enemies

  • The enemies are also diverse, but they tend to be "small" in size and have few animation frames. Example:

Springfling.png Moska.png

Characters

Surge spritesheet (v0.5.1)
  • Characters have many animations and many frames. Each animation frame must fit a 64x64 box. Inside that box, graphical boundaries should fit roughly 50x50 pixels (whenever possible). For more information, please read Characters
  • Minimum set of animations:
    • stopped
    • walking
    • running
    • jumping
    • ducking
    • looking up
    • pushing a wall
    • death
    • getting hit
    • spring pad jump
    • breathing underwater (air bubble)
    • braking
    • hold the ceiling
    • ledge
    • waiting
    • winning (level cleared)
    • charging
    • rolling


Testing your art

Testing your art on the game is a matter of modifying a few text files. It's simple to do, and you don't need any programming. Read more at: Sprites