HTML5 Canvas Old School RPG

[Gaurav]

Hi all,

I am working on a demo of an old school top down single player RPG, perhaps like Dragon Warrior. The source code is based upon some sample code contributed from Mozilla. I discovered this community and OpenGameArt.org recently and have begun to use it in my demo.

What I've done so far:

• Load maps from XML generated by the Tiled program.
• Scrolling / Walking Animation
• Four submaps
• Random encounters, zones of different monsters in a single map.
• A very basic battle system.
• Multiple enemies per encounter.
• 3 basic items
• 2 basic spells
• Main Menu: Item, Spell, Equip, Status
• First dungeon w/ treasure chests, boss monster
• First town w/ weapon, armor, & item shops
• 5 Swords, 4 Armors, 3 Helmets, 3 Shields.
• On screen gamepad for touch screen users
• Save & Load

Roadmap:

• Independently walking NPCs
• Multiple character party
• Battle Animations
• Music & Sound Effects

Screenshot:


I'm posting here now to get some feedback and advice, and to see if there is anyone who would like to collaborate. I am particularly looking for help with art and story in order to make this into a real game. Also, please report bugs here, or by submitting an issue on github.

[qubodup]

I can only say one thing: when on the map the player arives on a tile there is a short wait before he moves on even if I didn't let go of the movement key?

[Gaurav]

I can only say one thing: when on the map the player arives on a tile there is a short wait before he moves on even if I didn't let go of the movement key?

Okay, I've reduced some of the timeouts a bit, I think the delay should not be noticeable now.

[riidom]

You might want to take a look here:

http://en.wikipedia.org/wiki/List_of_OGL_Publishers

[Gaurav]

I've managed to implement a very simple battle system, added the possibility for multiple enemies per encounter, and added a second zone of different enemies on the map. Check it out!

For now, there are no items/spells, and the way to heal is to enter and leave the town.

Right now, for a limited time only, I can offer the opportunity for a designer/artist to lead the direction on making this into a real game. That means: your story, your vision, your art, and I'll do all the programming to make it work.

[Gaurav]

Just a quick heads up, I'm making a lot of progress with my game. See the first post for all the updates. I'm still looking for a dedicated artist.

[Gaurav]

Updated the first post with all my progress.

[Gaurav]

Added a on screen game controller for those without a keyboard (such as touch screen users). Moved demo to Github since webs.com serving svg files with incorrect mime type.

[Gaurav]

Saving & Loading your game is now implemented! Thanks to Jebb Burditt for his contribution.

I could really use some help testing this feature, please report bugs here or on github.

[qubodup]

chromium 13.0.768.0 (Developer Build 85475) on windows xp has a problem with the movement animation: the frames are drawn on top of each other rather than being replaced. At least I notice this when the screen is scrolling.

Screen scrolling is extremely slow.

Walk animation speed appears unnaturally fast. (not the movement, just the animation)

There seems to be a stop or small pause when a tile is entered. Probably when you enter a tile, you check whether movement input is given. I would like to be able to press movement keys and not have to 'feel' this movement pauses on each entered tile.

I would like to be able to skip messages/message timers during battle using return key. The current speed is good but after fight #500 you really want to skip faster.

[Gaurav]

Screen scrolling is extremely slow.

Walk animation speed appears unnaturally fast. (not the movement, just the animation)

There seems to be a stop or small pause when a tile is entered. Probably when you enter a tile, you check whether movement input is given. I would like to be able to press movement keys and not have to 'feel' this movement pauses on each entered tile.

I reworked the animation code a bit to try to fix these issues. Please let me know if it is any better.

[qubodup]

It seems the animation has problems when the map is scrolling.

The following video shows it kind of (it fails to show the slowdown on map-scroll somehow though - xvidcap-recorded)

http://www.youtube.com/watch?v=7wRPRjidh1M

This is Chromium on an Eee PC 1000H

Just to be sure: http://gaurav0.github.com/Old-School-RPG-Map/ is the right place to play the latest revision, yes?

[Gaurav]

Yes, that's the right place. I'm not seeing a problem in the video.

The slowdown with the scrolling may be due to how underpowered your computer is.

[qubodup]

Watch the char animation while the map is scrolling. I see multiple animation frames at the same time when that happens.

Hm.. I see the same problem (multiple animation frames at the same time while scrolling map) on my desktop pc as well. Arch Linux, 64bit, Chromium/FF without slowdown.

I attached two examples of what appears on my screen. Not as it should be: https://github.com/Gaurav0/Old-School-R ... Trevor.png

Perhaps you can make your gameplay slower by zooming in in ff or chromium

[Gaurav]

OK, I see it. Wow, you are really eagle eyed! Thanks!

I think it's fixed now. Let me know if it is fixed for you.

[qubodup]

http://gaurav0.github.com/Old-School-RPG-Map/ has the same problem still (perhaps my browser didn't update some file? perhaps you forgot to push to the web branch?)

You can test it by zooming in, the game will become slower and the animation will be easier to see. (ctrl and + keys).

[Gaurav]

Yes, I updated it. You probably need to force a reload or clear your cache.

All this zooming gave me an idea. I've implemented an experimental "full screen" feature. Just double click! Of course, the scrolling performance is only acceptable on IE9. I'll keep it undocumented for now.

[qubodup]

ah, chache clear helped.

if I reload very fast, combining ctrl+r and ctrl+shift+r I get an error:error message. probably just a github prevention thing.

/Old-School-RPG-Map/images/osck.svg:-1Resource interpreted as Image but transferred with MIME type image/svg+xml.
/Old-School-RPG-Map/xml/Forest1.tmx.xmlFailed to load resource
/Old-School-RPG-Map/xml/Castle1.tmx.xmlFailed to load resource

[Gaurav]

The first error message you cite is a bug in chrome. Image/svg+xml is the correct mime type for an uncompressed svg file. I get that warning every time.

The other two are problems in downloading. How do you think I should deal with an xml file, image, or other resource failing to load? I thought about putting in a game loading progress bar, but if it just never finishes that isn't very user friendly. Most HTML5 games I've looked at don't deal with the issue at all, and that is what I'm doing so far.

[qubodup]

Can you force a re-load after some time?

Alternatively show an error message with "Something went wrong :( Please refresh this page (F5 or Ctrl+R or ⌘+R)" (not a pop-up! in the game screen instead.)

[Gaurav]

Can you force a re-load after some time?

Alternatively show an error message with "Something went wrong Please refresh this page (F5 or Ctrl+R or ⌘+R)" (not a pop-up! in the game screen instead.)

Forcing a reload??? Bad idea.
I decided on a throbber instead of a full progress bar. But since I found that I had to keep track of all my resources anyway, I actually decided a good diagnostic message for when something goes wrong was in order:

{l Code}: {l Select All Code}

One or more resource(s) failed to load:
xml/Forest1.tmx.xml
xml/Castle1.tmx.xml

My changes are up, so you should be able to see what I did.