Changing Visual Elements, Backgrounds, and Colors in HTML 5 Games

By on June 25, 2012

There are many ways to change the visual elements of the HTML 5 games. This tutorial lists some of the changes you can make.

All of the changes are done in the Design tab (Design.ini file).


Working with Colors

You can use HEX, RGBa, and HTML colors in the games. Use the color wheel in the bottom right of the game editor (config.html page) to choose colors.

HEX Colors
Here is a sample: #ffce0c. These colors start with a # sign and have 6 characters after them. Use the color wheel in the editor to get these values.

HTML Colors
There are certain colors that work if you just type the color’s name. For example you can just type the work red, yellow, green, etc. Here is a list of these colors.

RGBa Colors
Here is a sample RGBa color: rgba(140,115,18,1). If you use this you don’t need to have a # sign in front of it. The first 3 numbers are values for Red, Green, Blue. The last number is an alpha. You can set that anywhere from 0-1 and the color with be partially transparent.


Changing the Page Background Color
You can change the color of the browser page outside of the game area.
It is controlled here: body_color=#f9c804 (It is found in the Design tab under the Page Background section. Change the color value to anything you want.)


Changing the Game Background Image
You can recolor and/or replace the image used in the background of the games. (Note: Background image dimensions are 720 x 540)

game_background_image=  (This is the game’s background image. It’s found in the config/images folder. You may see multiple files listed here. You can stack background images.)
game_background_color=  (This line controls the color behind the background image. The background image is actually a partially transparent png file and it lets this color “pass through” it.)

Recolor a background image
You can have a solid color or use a gradient.

Solid color
game_background_color=any color

Radial gradient
game_background_gradient_center=any color
game_background_gradient_edge=any color

For linear gradients replace center/edge with left/right or top/bottom.

Replacing the background image
You can upload any image you’d like to the background.
Copy your new image to the config/images folder in your game. (Make the image 720 W x 540 H)
The game background image is controlled here: game_background_image=file_name.png (Change the file name to match the file that you put in the config/images folder.)
There may be times when you want to stack multiple background images. For example in games that have a visual path that the game piece follows. To stack images just list them in order like this: game_background_image=image1.png, image2.png, image3.png.


Adding a New Game Logo

There a game logos located on the Splash, Introduction, and Main Games screens. You can replace any of them. Your new image file must be placed in the config/images folder.

Now let’s look at the Splash Page Logo section. (The Introduction and Main Games logos function the same way.)
[-----------------------Splash Page Logo-----------------------]
logo1=@Splash Page Logo (Do not edit.)
logo1_image=logo_.png (Change this file name to match the new logo file that you uploaded to the config/images folder.)
logo1_width=659 (You don’t have to match the dimensions of the original logo file. Just input the width/height of your new file. )
logo1_height=135
logo1_X=30 (Use these 2 lines to adjust the X and Y positioning of the logo. You can move the logo around to your desired location.)
logo1_Y=100


Changing Answer Button Colors

You can change the colors of the different states of the answer buttons. There are 4 states:

  • Up – This is what the button looks like when the mouse is NOT touching it
  • Over – This is what the button looks like when the mouse is OVER it
  • Down – This is what the button looks like when the mouse is clicking on it but hasn’t released
  • Selected – When the question type is set to Multiple the button will show a Selected state when a use clicks and releases the mouse

Now let’s look at each line of the button style code (found in the design tab):
[-----------------------Question Button Styles-----------------------]
question_button_up=@Default button style (Don’t edit this line.)
question_button_up_gradient_top=#161644 (Controls the top gradient color. You could change the “top” to “left” and then change the next line from “bottom” to “right”.)
question_button_up_gradient_bottom=#111135 (Controls the bottom gradient color.)
question_button_up_text_color=#FFFFFF (Controls the text color on the up state of the button.)
question_button_up_gloss=true (Change this to false if you don’t want the gloss on the button.)
question_button_up_shadow=true (Change this to false to hide the shadow.)
question_button_up_radius=10 (You can change the amount of curve that the button corners have. Note: This feature is not supported in IE9.)
question_button_up_width=320 (You can change the width of the buttons.)


Changing Main Game Button Colors
You can change the main game buttons such as Start, Continue, and Replay. These buttons have 3 states: Up, Over, and Down.

The settings for the Main Game buttons are found in the section: Main Game Buttons {i.e. Continue, Start, Replay} The are edited just like the answer button explained earlier in this tutorial.

Additional HTML 5 Tutorials
Getting Started with HTML 5 Games
Editing Questions and Answers in HTML 5 Games
Working with Audio in HTML 5 Games
Adding Images to Questions in HTML 5 Games