View previous topic - View next topic |
Author |
Message |
XMark Guitar playin' black mage
Joined: 30 May 2002 Posts: 870 Location: New Westminster, BC, Canada
|
Posted: 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: 173 Location: U.S.A.
|
Posted: 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
|
Posted: 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
|
|
Back to top |
|
|
BadMrBox Bringer of Apocalypse
Joined: 26 Jun 2002 Posts: 1021 Location: Dark Forest's of Sweden
|
Posted: 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
|
Posted: 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
|
Posted: 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
|
Posted: 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
|
Posted: 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
|
Posted: 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
|
Posted: 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
|
Posted: 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
|
Posted: 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
|
Posted: 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
|
Posted: 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 |
|
|
|
Page 1 of 4 |
All times are GMT Goto page 1, 2, 3, 4 Next
|
|
|
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
|
|