Welcome Guest ( Log In | Register )

[ Big| Medium| Small] -

Post new topic Reply to topic  [ 2 posts ] 
  Fri May 04, 2012 2:11 pm
User avatar

Big Dumb Guy
There are many such scripts out there on the net, but they are silly and often just lying with an animated gif. This script actually produces a working loading bar for your HTML based game.

This is designed to be used with a load page - in this page, you should dump all the images in your game, perhaps with PHP, all of them. The objective is to preload all of the images into the player's cache, so that when they then go to play the game, they don't have to wait for images to load. This has it's advantages and disadvantages, and therefore you'll want to create a "skip" button/link regardless.

The ideal place to use this would be in an iframe on the landing page of the game, like so:

<iframe src="load.html" width="200" height="20">No frames</iframe>

With a little CSS work it will look fine. Remove scrollbars and borders etc.

Now for the code. It's actually very simple.

Each image:

Draw it as such:

<img src="url" onload="plusone();" style="visibility: hidden;" />

In your iframe, you'll want to disable scrolling so that only the loading bar is displayed. We need visibility: hidden, not display: none, otherwise the images won't load at all.

The Loading bar

<div style="width: 200px; height: 20px; border: 1px solid white; background-color: black;">
<div id="loadbar" style="background-color: red; width: 0px; height: 20px; overflow: visible;">
<div style="font-size: 12px; font-family: verdana; font-weight: bold; color: white; padding-top: 4px; width: 200px;">
<span id="countspan">

Explanation: we have a container div that draws the background and the border of the loading bar. Inside this we have a div that represents the bar - coloured here in red. This div contains a further div containing the percentage loaded, but this is overflown and positioned in the middle of the bar.

Now all we do is, every time an image fully loads, increment the percentage accordingly. here's the javascript.


<script type="text/javascript">

var count = 0;
var total = document.images.length;

function plusone()
count += 1;
total = document.images.length;
perc = Math.floor((count / total) * 100);
document.getElementById("countspan").innerHTML = perc;

var o = document.getElementById("loadbar");


The result is a loading bar that's a perfect match to that used in RuneScape, (as that's the simplest design really) which you can then style yourself to better fit your game.

Note that this is designed for games such as my own, and I know not many people will have a game like that. But the logic used is hopefully useful to other game engines and other web designers in general.

Happy days!


This is a live example that loads all of the images in the game Afar, therefore you might not want to run it unless you intend on playing the game.


Top Top

  Fri May 04, 2012 7:14 pm
THAT foreigner
User avatar

Location: Netherlands
This is cool, ive been looking for stuff like this inthe past. Idk if ill use it, since i plan on doing lots of ajax stuff and dynamic shit so thisd be redundant.

Still cool


Top Top
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 2 posts ] 

Who is online

Users browsing this forum: No users and 0 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

We are an independent, not-for-profit game making community.
Board Index
About Us
Downloadable Games
Free Browser Games
Games in Development
RPG Maker Support
Game Maker Support
Construct 2 Support
HBGames the eZine
Advanced RPG Maker
Site Announcements
Powered by phpBB © phpBB Group