A PHP isometric graphical game

[SirChick]

Hey guys,

For some time (2 years) i been working on game development. And decided a few weeks back to make a graphical isometric game in PHP.

It seems PHP text based games are very popular but i want to push past that and start bringing people to graphical engines.

The game so far runs at 30 FPS to 60FPS the browser is a huge factor on performance as is you're PC specs. Chrome and IE9 (altho i would avoid IE) being the winners on performance - but that comes to no surprise as Chrome is leader in almost every aspect. FF is slightly behind and the rest are miles behind and are unplayable.

(Don't get me started with tablets/phones) but i will eventually find a way to get it working on that.

The general jist of the game is you build you're own city and complete quests and battle other player's armies that you create from you're city. This does ring bells to age of empires, but it has its limitations given the language I am using, there for its not quite the same.

 

I will attach screen shots when i am past the engine making stage and apply my own graphical designs, currently im using Sim City 3000 sprites to get it all working :P

Edited March 21, 2012 by SirChick

[Uridium]

Iv;e had the pleasure of seeing first hand at what SirChick can do and i have to say im very excited about seeing this engine..

[a_bertrand]

Cool! I made myself (quiet some years ago now) a 2D game with JS and PHP. The only real issue is how many "tiles" you can load and how to preload them as that seems to be inconsistent. Some times simply browsers fails to keep all the images in memory as you would have wished.

[Spudinski]

Yea. Ok.

Good luck.

Edit: Chrome also supports WebGL... Might want to take a look at that.

[SirChick]

Cool! I made myself (quiet some years ago now) a 2D game with JS and PHP. The only real issue is how many "tiles" you can load and how to preload them as that seems to be inconsistent. Some times simply browsers fails to keep all the images in memory as you would have wished.

 

This is actually quite easy. Are you referring to NEAB? If so the logic is this:

 

Lets say player position is:

X = 5

Y = 7

 

Then your loop would be like this:

for( i = x - (total_tiles/2); i < x + (total_tiles/2) )

for( i = y - (total_tiles/2); i < y + (total_tiles/2) )

this then loops through array positions.

Lets say total tiles was 10...

 

It will therefore load 20 by 20 tiles around the player. To work out how many tiles is needed you need to get the width and height of the window in which loads the graphics then divide by the tile gird width and height.

But always remember to add a +1 to that answer so you get a buffer of 1 tile edge to avoid the issue of some tiles unloaded. This is particularly useful if player position is stored at pixel level and not grid level.

[a_bertrand]

Yes I'm talking about NEaB, and... sadly this doesn't work. Seems the browsers do have a limit number of images they are willing to cache.

[SirChick]

It works for me =/ Browsers can easily cache 20 by 20 tiles.

When you consider alot of the tiles are the same particularly ground tiles.. it probably is less than 20 by 20 anyway..

How do you know you're tiles are not being cached?

[a_bertrand]

I know they are not cached because the browser display at some point wrong tiles and it takes a while (staying on a fixed pos) to get the right tile showing. And... NEaB have more than 400 tiles ;)

1521 background tiles

731 foreground tiles

12389 monster tiles

6105 player tiles

[SirChick]

hmm on my map which is 1million by 1million tiles it loads fine because i use edge buffers.

I'm not sure how you load you're images... but ....

Are you loading all of them before the player even reaches a situation where the tile/image is needed? If so thats going to cause memory issues and unnecessary loading of images.

To make it efficient, you only load the 20by20 range of tiles and unload any thing past that limit.

in the loops you would have the array of tile X:Y with src..

so

pseudo code:

for( i = x - (total_tiles/2); i < x + (total_tiles/2) )

for( i = y - (total_tiles/2); i < y + (total_tiles/2) )

//wise to do checks if such an array position exists before assigning

ground tile = ground[x][y].src;

sprite tile = sprites[x][y].src;

}

}

 

The only pre-loading you do is compiling the arrays ground and sprites this is done on loading the game. You can also do this to a degree on the fly by only loading the array of information based on a given map ID (you could even cut the map into sections to make the array smaller still).

And then load on the fly. This means the amount of memory used is significantly lower. And you don't have to loop through massive lists of images to find the correct tile (which would take forever with that many tiles you mentioned and will be the cause of long load times.)

To improve speed again, you could pre-compile teh array of data, and store it in a DB table. Then you simply select that array from the data field. So its not pre-compiled every load (of course u have to recompile and save to DB if you edit maps).

That way it will load once the SELECT query is done and not loops to make the array which is slower.

EDIT: This is the same approach used in Age of Empires in C++

Edited March 22, 2012 by SirChick

[SirChick]

I just looked at your engine quickly and noticed its using old HTML standards. Most of which is not using hardware support features of browsers. =/ Although not much you can really do about it unless you re-code the entire engine.. unless you plan to do a next gen engine.

 

But i see the issue you're on about - as you scroll on map editor it loads other tiles briefly. Page source is too compressed to make it easy to read what the problem may be so i can't really say how to solve it. I'm sure i can find the fix if i saw how you draw it.

[a_bertrand]

Don't worry anyhow I stopped developing it. I'm not interested in it anymore. However it was to point out that you can't always handle it.

BTW When I developed it, it wasn't old standards, it was the way to go ;)

[SirChick]

Are you not making a new next gen version :P ?

[a_bertrand]

No I will not go further with that development. I made it, it works (maybe not perfectly), it had his players but that's it. No more fun for me, therefore I move along.

[Sim]

Wheres the screen shots?

[SirChick]

Wheres the screen shots?

When they are ready :P Graphical orientated programming is 100 times more work than text based games. Any screen shots i have of now are not worth showing they are meaningless and are not going to be used in the actual game, i just use them to make sure it draws it properly :)

I have been working on the game for about 2 years. None of the graphics involves CSS/HTML its all modelling so its many hours just to make something like a basic decent looking building :P :(

But screen shots will be posted when possible.