[XMark]

I posted in the General Forum, but updates on the project probably fit in this one better.

Summary: I'm redoing The ARC Legacy in HTML5 with Canvas and JavaScript because I've seen its potential in other games online. It's a bit of a gamble because I'm not sure if Canvas is going to become the standard in the future, or if Flash will continue to reign supreme. Heck, Silverlight might even surprise us all but I doubt it.

Currently working on the project itself, and the first real stumbling block I've encountered is in image loading. It seems that even when I run the page locally I still have to force it to wait for images to finish preloading. It's working, but I think I'll be providing a downloadable version for people to play locally if they don't want to wait for content to download every time they change maps or enter a battle screen.

On the plus side, semi-transparent PNGs are going to be quite useful!
_________________
Mark Hall
Abstract Productions
I PLAYS THE MUSIC THAT MAKES THE PEOPLES FALL DOWN!

[Jinroh]

[XMark]

Second stumbling block was figuring out how to do file input, for things like loading maps.

Then I discovered JavaScript's XMLHttpRequest function and that took care of it all for me after much frustration getting it working.

So I've decided on a map file format and it's actually just Javascript itself, loaded in and eval'd. Basically just a bunch of lines like:

Map[0] = [0,0,0,0,0,0,1,0,0];
Map[1] = [0,0,0,0,0,1,1,1,0];
Map[2] = [0,0,0,0,0,0,1,0,0];
etc...
When I finish the map editor the save function will just generate this code for me to copy and paste into a file.

I'm going with a variable number of layers and variable width and height for maps. Also, I'm setting it so that the active layer for entities on the map is variable. So maybe there's just one layer underneath the player and entities, and 3 layers on top of them.

Or if there are two layers below the player, layer 2 can be used combined with semi-transparency for shadow effects instead of making separate shadowed tiles for every ground type.
_________________
Mark Hall
Abstract Productions
I PLAYS THE MUSIC THAT MAKES THE PEOPLES FALL DOWN!

[XMark]

Yeeha walking demo!

http://abstract-productions.net/arc/index.html

Goes slow in Firefox, but Chrome has no problem at all.
_________________
Mark Hall
Abstract Productions
I PLAYS THE MUSIC THAT MAKES THE PEOPLES FALL DOWN!

[BadMrBox]

Nice :D.
There is a big difference in performance between chrome and firefox when it comes to stuff like this.
_________________

[XMark]

Yeah, I ran some tests last night, and the drawimage method itself is what's slow in Firefox. I may be able to speed it up a bunch by having it skip trying to draw any map element with value 0 (completely transparent tile, which is most of the second layer).
_________________
Mark Hall
Abstract Productions
I PLAYS THE MUSIC THAT MAKES THE PEOPLES FALL DOWN!

[Verious]

You could probably execute the following lines of code outside of the draw() function for a nice performance boost, since the references will not change once the page has loaded.

[XMark]

I tried that, it makes no noticeable difference.

It's in the drawimage method itself, Firefox is just slow with it, at least with full-color PNGs.
_________________
Mark Hall
Abstract Productions
I PLAYS THE MUSIC THAT MAKES THE PEOPLES FALL DOWN!

[tcaudilllg]

One thing Richard found out (and I later came to acknowledge) was that it helps to use as many global variables as possible in JS. Never pass an object which has a member array in time critical situations. Instead, use a global array.

[DeveloperX]

Its funny how my name continues to pop up all over the fucking globe even though I haven't been around in ages!

but yes, thats true to some extent.

If you are aiming to grab the most speed out of JS, especially the spidermonkey implementation that firefox uses, then you need to be very aggressive in the inner-loop optimizations.

Don't use multidimensional arrays, don't use arrays that contains other arrays, etc.
make sure that you are not computing anything more times than you need to.

I haven't looked at what you've done, but thats because I lack the time.
I support your efforts, and wish you luck with your project.
_________________
Principal Software Architect
Rambling Indie Games, LLC

See my professional portfolio

[Terry]

This is shaping up very nicely! It's running a bit slowly for me at the moment though...

I saw a few people posting this library on Twitter today; have you had a look? I tried the zelda-like and got perfect performance with it. Could be worth a study!
_________________
http://www.distractionware.com

[XMark]

I've done extensive testing to see where the slowness comes from, and it's all in the drawing methods. If I keep all the game logic and all the loops and arrays and everything in place, but take out the drawImage calls for the map tiles (so it's just the people floating over the background), it goes blazingly fast, something like 70 FPS when I take the timer restriction off. So it's not the 3-dimensional map data arrays or any of the game logic that's slowing things down. Just the multiple separate DrawImage calls for each tile. Firefox itself may be doing something redundant with each time it draws.

Unfortunately it goes just as slow if I convert to 256-color GIFs, so I'll just stick with full-color PNGs + semi-transparency.

It seems to be only Firefox and Opera with the problem. Chrome gets something like 100 FPS with no scaling (timer restriction removed - otherwise it's limited to a steady 45 FPS). Even Chrome has some problems with scaling up to 3x though. The frame rate goes down to somewhere around 40 FPS at 3x.

So I'm just going to keep going as I am. Nothing that I'm planning in the future will add any significant extra image drawing. And hopefully Firefox gets their Canvas rendering speed up to Chrome and Safari's level in a future version. It seems that all the browsers are in the midst of a JavaScript speed war, and future versions of all browsers are promising hardware-accelerated graphic rendering.
_________________
Mark Hall
Abstract Productions
I PLAYS THE MUSIC THAT MAKES THE PEOPLES FALL DOWN!

[XMark]

One other thing - it seems that an alternative is available. GetImageData and PutImageData seem like lower-level functions to place pixel data onto the canvas. Maybe they'll go faster that drawImage?
_________________
Mark Hall
Abstract Productions
I PLAYS THE MUSIC THAT MAKES THE PEOPLES FALL DOWN!

[tcaudilllg]

Are you using SetTimeout for SetInterval to do the timing?

[XMark]

It's setTimeOut

EDIT:
What happens if you use SetInterval, and the function takes longer than the interval time to run?
_________________
Mark Hall
Abstract Productions
I PLAYS THE MUSIC THAT MAKES THE PEOPLES FALL DOWN!