# Blobby

## Documentation and Startup Guide

- created: 03/11/2014
- latest update: 03/11/2014
- by: Danijel Durakovic
- email: danijel.durakovic@gmail.com

Thank you for purchasing my game. If you have any questions that are beyond the scope of this help file, please feel free to email me.

### General Info

Blobby is a puzzle platformer where the goal of the game is to input commands that will get the character through the stage successfully.

Features:

- Resolution: 480x720 (scaling)
- Works with all modern browsers
- Supports both touch and click controls
- Supports custom level creation with the Tiled Map Editor
- State saving

### Deployment

You can either host the game as-is, embed the HTML directly, or embed the game inside of an iframe. This section describes steps to deployment for each method.

## Host as-is

To host the game as-is, simply copy everything in the blobby folder to your server. You're done!

Note: if you try to run the game from your local machine (using the file:/// as address in your browser), you may get an error such as "Cross origin requests are only supported for HTTP." and the game might not finish loading. This is a browser security measure and should not be a problem once the game is hosted on a web server.

##

## Embed the HTML directly

If you already have a running website and you wish to embed the game within it, you can do this by simply embeding the HTML code. The following steps will show you how:

1. Copy game files

Copy all the folders from within the blobby folder to your server.

Make sure that the document you are embeding the game in resides on the same level in the folder hierarchy. For example, if your site is located under /public_html/mysite, then the link to game's JavaScript code would be /public_html/mysite/src/blobby.js.

If you do not wish to mix your own website's files and folders with game's files and folders, you can avoid this by embeding the game with the iframe element as described below.

2. Add style sheet to HTML

Add the following line to the <head> element of your document:

    <link rel="stylesheet" href="css/blobby.css">

Note: if you're embedding the HTML directly, remove the body definition from blobby.css (simply delete lines 1 through 6) in order to prevent mixing the styles with your own document.
3. Add game canvas, loading screen and script to HTML

Add the following code somewhere within the <body> element of your document.

    <canvas id="blobby" width="480" height=720"></canvas>
    <div id="blobby-loadscreen">
      <span id="blobby-loadlabel">Loading Blobby ...</span>
      <div id="blobby-loadprogress">
        <div id="blobby-progressbar"></div>
      </div>
      <span id="blobby-progresslabel"></span>
    </div>
    <script src="src/blobby.js"></script>

## Embed inside an iframe

If you wish to embed the game in your website while separating it from your own content, you can embed the game inside an iframe element. The following series of steps will show you how:

1. Copy game files

Copy the game folder to your server under a custom folder name (for example, http://yoursite.com/blobby-data). You will need the entire contents of the blobby folder.

2. Add the iframe element to HTML

Add the <iframe> element somewhere within the <body> element of your document and point it to the location of game files:

    <iframe src="/blobby-data" frameborder="0" width="480" height="720"></iframe>

Make sure the src attribute matches your custom location.

### Customization

## Customizing Levels

To customize levels, you can use the Tiled Map Editor (http://www.mapeditor.org). Simply open the included json files to see the levels that are already created.

The level file is composed of 48x48 pixel tiles. Level width needs to be fixed to 10 because of the nature of the game. Level height can be anything from 12 onward.

Levels are composed of several layers:

- background layer
  This is a tile layer that represents game backgrounds.
- wall layer
  This is a tile layer that represents walls. Player will collide with these walls.
- objects layer
  Object layer that holds game objects (torches, spikes and lava)
- enemies layer
  Object layer that holds game enemies (spears, gnomes, ghouls and ghosts)
- entities layer
  Object layer that holds the main character (blobby) and the target (friend).

Some of the objects can hold specific properties. Here is a rundown of objects, categorized by the layer they fit in:

1. Objects Layer

- TORCH
  type: torch
  Represents a torch.
  Properties: n/a
- SPIKES
  type: spikes
  Represents spikes that will kill the player upon touch.
  Properties:
  - facing ( up, down, left or right )
  Determines which way the spikes are facing.
- LAVA
  type: lava
  Represents lava that will kill the player upon touch.

2. Enemies Layer

- SPEAR
  type: spear
  Represents a spear that moves up and down.
  Properties:
  - facing ( up or down )
  Determines whether the spear is coming from above or below.
- GNOME
  type: gnome
  Represents a walking enemy.
  Properties:
  - facing ( left or right )
  Determines which way the enemy is facing.
- GHOUL
  type: ghoul
  Represents a walking enemy. Same as ghoul, only using a different sprite.
  Properties:
  - facing ( left or right )
  Determines which way the enemy is facing.
- GHOST
  type: ghost
  Represents a flying enemy. These enemies are supposed to be placed 1 tile to the left or right of the level, and the direction should be adjusted accordingly (left for a right-sided ghost, right for a left-sided ghost). The enemy will traverse the screen continuously in given direction.
  Properties:
  - facing ( left or right )
  Determines which way the enemy is facing.
  - amplitude ( any positive number )
  Determines how far across the y axis the enemy will move.
  - frequency ( any positive number )
  Determines how fast the y position changes.
  - xval
  Determines the starting value of the sin function. This value will get incremented as the game runs. Default is 0.

3. Entities Layer

- BLOBBY
  type: blobby
  Represents the player.
  Properties:
  - facing ( left or right )
  Determines which way the player is facing.
- FRIEND
  type: friend
  Represents the target that the player is supposed to reach.
  Properties:
  - facing ( left or right )
  Determines which way the friend is facing.

Levels should be created in such a way that the main character always progresses from the top of the level to the bottom.

Upon finishing the level, test it in the game to see if there is a way to solve it. This task may require some trial and error because every small action in the game leads to different results.

Levels are loaded and activated automatically, but you need to provide a level count and the level filenames must be in the following format:

level1.json, level2.json, ..., levelN.json

To change the number of levels, open the file src/blobby.js and navigate to line 50, where it says:

    var levelCount = 12;

Change the number (12) to how many levels you have in the lvl folder (N in the example above).

Maximum number of levels is 42.

## Customizing Graphics

You can customize graphics by replacing the png files in the gfx folder. Make sure the filenames remain the same and the tiles in the master tileset (master.png) are aligned correctly within a 48x48 grid. The master tileset needs to have 10 columns and a custom number of rows.

## Custom Music

To customize music, you can put your custom tracks in the music folder. The tracks need to be in ogg format. To apply these tracks in game, change the code from line 41 to 43 in the file src/blobby.js. Follow the same naming convention and list your tracks from 1 onward. The script will handle loading and playback automatically.

Example code for two custom tracks:

    track_1: 'music/first_track.ogg',
    track_2: 'music/second_track.ogg'

Remember to put the commas (,) between items.

### Sources and Credits

I've used the following images, icons or other files as listed.

- Game Font: Mecha (http://www.fontspace.com/captain-falcon/mecha)

- Music: All tracks by Deceased Superior Technician at http://www.nosoapradio.us/

Once again, thank you so much for purchasing this game. I'd be glad to help you if you have any questions relating to this item. If you have a more general question relating to HTML5 Games on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Danijel