RPGDXThe center of Indie-RPG gaming
Not logged in. [log in] [register]
 
 
Post new topic Reply to topic Goto page 1, 2, 3, 4  Next 
View previous topic - View next topic  
Author Message
XMark
Guitar playin' black mage


Joined: 30 May 2002
Posts: 870
Location: New Westminster, BC, Canada

PostPosted: Tue Apr 13, 2010 7:07 pm    Post subject: The ARC Legacy (HTML5/Canvas) [quote]

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!
Back to top  
Jinroh
Scholar


Joined: 30 May 2008
Posts: 172
Location: U.S.A.

PostPosted: Wed Apr 14, 2010 2:35 am    Post subject: Re: The ARC Legacy (HTML5/Canvas) [quote]

XMark wrote:
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.


Yeah for my JavaScript Sidescroller I just had the user wait for every image to load, it wasn't long though. Transparent PNGs were really useful for me too. hehe. For that crossplatform transparency. ^^

Can't wait to see what you have cooking. ^_^
_________________
Mao Mao Games
The wolf and his mate howl, taking solace in the silver moon. Pressing ever foreward to see what the future holds.
Back to top  
XMark
Guitar playin' black mage


Joined: 30 May 2002
Posts: 870
Location: New Westminster, BC, Canada

PostPosted: Wed Apr 14, 2010 5:38 am    Post subject: [quote]

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!
Back to top  
XMark
Guitar playin' black mage


Joined: 30 May 2002
Posts: 870
Location: New Westminster, BC, Canada

PostPosted: Thu Apr 15, 2010 8:25 am    Post subject: [quote]

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!
Back to top  
BadMrBox
Bringer of Apocalypse


Joined: 26 Jun 2002
Posts: 1021
Location: Dark Forest's of Sweden

PostPosted: Thu Apr 15, 2010 2:09 pm    Post subject: [quote]

Nice :D.
There is a big difference in performance between chrome and firefox when it comes to stuff like this.
_________________
Back to top  
XMark
Guitar playin' black mage


Joined: 30 May 2002
Posts: 870
Location: New Westminster, BC, Canada

PostPosted: Thu Apr 15, 2010 4:14 pm    Post subject: [quote]

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!
Back to top  
Verious
Mage


Joined: 06 Jan 2004
Posts: 409
Location: Online

PostPosted: Fri Apr 16, 2010 3:18 pm    Post subject: [quote]

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.

Code:
var canvas = document.getElementById ('arc');
var ctx = canvas.getContext ('2d');
Back to top  
XMark
Guitar playin' black mage


Joined: 30 May 2002
Posts: 870
Location: New Westminster, BC, Canada

PostPosted: Sat Apr 17, 2010 10:20 pm    Post subject: [quote]

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!
Back to top  
tcaudilllg
Dragonmaster


Joined: 20 Jun 2002
Posts: 1731
Location: Cedar Bluff, VA

PostPosted: Sat Apr 17, 2010 10:43 pm    Post subject: [quote]

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.
Back to top  
DeveloperX
202192397


Joined: 04 May 2003
Posts: 1626
Location: Decatur, IL, USA

PostPosted: Thu Apr 22, 2010 10:30 am    Post subject: [quote]

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
Back to top  
Terry
Spectral Form


Joined: 16 Jun 2002
Posts: 798
Location: Dublin, Ireland

PostPosted: Thu Apr 22, 2010 9:29 pm    Post subject: [quote]

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
Back to top  
XMark
Guitar playin' black mage


Joined: 30 May 2002
Posts: 870
Location: New Westminster, BC, Canada

PostPosted: Fri Apr 23, 2010 8:09 am    Post subject: [quote]

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!
Back to top  
XMark
Guitar playin' black mage


Joined: 30 May 2002
Posts: 870
Location: New Westminster, BC, Canada

PostPosted: Fri Apr 23, 2010 8:12 am    Post subject: [quote]

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!
Back to top  
tcaudilllg
Dragonmaster


Joined: 20 Jun 2002
Posts: 1731
Location: Cedar Bluff, VA

PostPosted: Fri Apr 23, 2010 4:19 pm    Post subject: [quote]

Are you using SetTimeout for SetInterval to do the timing?
Back to top  
XMark
Guitar playin' black mage


Joined: 30 May 2002
Posts: 870
Location: New Westminster, BC, Canada

PostPosted: Fri Apr 23, 2010 4:22 pm    Post subject: [quote]

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!
Back to top  
Post new topic Reply to topic Page 1 of 4 All times are GMT
Goto page 1, 2, 3, 4  Next 



Display posts from previous:   
Jump to:  
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
You cannot vote in polls in this forum