The graphic design for CodingGame

In this post, I will go into some more detail about the graphics in CodingGame.

In my opinion, the main purpose of the graphics is to make it as easy as possible to see what’s going on in the game. I want the graphics to be a one-to-one reflection of the game state. All game objects and their attributes have a graphical representation and all world state transitions are highlighted by an animation. The amount of graphical elements that do not serve a function in the game and convey no useful information is minimized.

At least in principle, this should make it possible to get a feel for the game and even infer all of the game mechanics just from watching the game, making it unnecessary to consult pages and pages of documentation. It should also make the game more fun to watch for people who don’t already have intricate knowledge of the game mechanics.

In accordance with this goal, I am using an abstract/minimalist design where all the game objects are composed from simple geometric shapes. This also allows me to generate all of the graphics programatically, which plays to my strengths and gives a lot of flexibility. In terms of the art style, I am aiming for a sci-fi/space theme that features mostly dark colors with a few very bright elements.

Anyway, I promised screenshots, so let’s get to it!
The game units come in different sizes, their body is simply represented by a regular polygon:

drone_body

These are then filled with all the modules equipped by the unit.

Here are all current module graphics (all inside a size 1 unit):

Engines

module_engines

Shield generator

module_shields

Empty storage

module_storage

Storage with mineral crystal

module_storage_crystal

Storage with energy globes

module_storage_energy

Factory

module_factory

Weapon

module_lasers

A larger unit with several modules:

drone_large

Some additional objects:

Mineral crystals

mineral_crystals

Laser missiles

missiles

A screenshot with a larger scene (very large image, click through for zoom):

scene_large

In other news, the collision detection and physics for CodingGame is now really solid, and I have made a lot of progress on integrating all the components and implementing the game mechanics and API. I can’t promise anything for sure, but if things keep going smoothly I should be able to release an alpha version in about a month. Before then, I plan to write another blogpost to describe my ideas for the game mechanics in some more detail.

Advertisements

3 thoughts on “The graphic design for CodingGame”

  1. Looks cool, although your laser missiles are a bit curvy. I look forward to playing making bots when the time comes. I am also wondering if you would consider open sourcing the game. I would love to follow the development, and maybe even help out.

    Like

    1. I’m glad to hear you like it 🙂 I do plan to open source the game eventually. I was going to wait with that until the codebase is bit more stable and I have had the chance to clean up some of the hacks. Maybe it makes sense to open source earlier, I’ll give that some thought. In any case, I will make sure to post regular progress updates.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s