Blobby

Documentation and Startup Guide


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.

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:

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.

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:

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

1. Objects Layer

2. Enemies Layer

3. Entities Layer

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.

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

 


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