HTML5 Canvas Old School RPG
Sunday, November 14, 2010 - 10:15
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
- 4 submaps
- Random encounters, zones of different monsters on 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 game controller 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.
Very nice so far. Keep up the good work!
Bart
Very nice!
Hope I can play it soon.
@Anonymous
The demo is already very playable and quite fun. For now, you can restore your HP/MP by entering and leaving the town.
HTML5 Canvas Old School RPG
Very cool. Nice. Just discovered it today. Hope you are able to do something more and also package it for off-line playing or atleast provide instructions so people could do it.
@Shirish Thanks!
I'm not sure what you mean by "package it for playing offline". Anyone can download the source already, and as HTML5, it doesn't need to be compiled, just put on any web server. Also, you can check "Work offline" in your browser and it will run from the cache.
HTML5 Canvas Old School RPG
Ok, then its cool. I didn't know that one could do that. Although it would have been better to play it as a stand-alone game as well (without the browser), but still nice.
Updated first post with all my progress.
HTML5 Canvas Old School RPG
Moved the game to Github since webs.com was serving svg images with wrong mime type.
HTML5 Canvas Old School RPG
I have a few suggestions.
http://opengameart.org/content/battle-loop Combat (Background)
http://opengameart.org/content/3-melee-sounds For combat
http://opengameart.org/content/mysterious-calm For towns (background)
Remember, sound and graphics makes a game seem cool.
Implementing it might be possible with
I hope this is a good enough help to make the game more fun to play
Hey wotske, thanks again for the feedback.
I've reduced the encounter rate to 0.14, or about 1 in 7.
The walking speed is pretty much tied to the rate at which I scroll. Right now I scroll at 4 pixels per frame. I can double that to 8, but any number in between will make the scrolling uneven (the tile size is 32). I've found 8 pixels per frame to be way too fast, the character pretty much runs across the screen.
Sound is definitely on the menu for future updates. But I was planning to do some battle animations first.
When I get around to doing Load & Save, it will be with HTML5 LocalStorage. I don't plan to use a server for anything.
HTML5 Canvas Old School RPG
This stuff is cool.
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.
HTML5 Canvas Old School RPG
HTML5 Canvas Old School RPG
Text messages like "Game saved to slot 1" keep on the screen and can sometimes in combat give strange results. My suggestion would be disabling them after 15 seconds and when combat starts.
It might be worth keeping track of some statistics like:
This allows users to try to do things in the best way possible. I can remember that when we played tomb raider, we tried to save it the least amount of times to improve one meaningless number in our saves.
Hi wotske,
Thanks!
I disabled the arrow keys while any text is displayed, so now you have to dismiss it before you can continue.
HTML5 Canvas Old School RPG
HTML5 Canvas Old School RPG
Hi,
this looks really interesting. I am planning to build a HTML5 frontend for my game engine (http://florian-berger.de/en/software/fabula) and might look into this since the basic concept is very similar.
Regards,
fberger
This reminds me of RPGJS. It's an open-source project, using HTML5 and Javascript to create an RPG-Maker-esque game online.
Gobusto:
While I am very impressed by RPGJS technically, I would be very wary of actually using it. It uses RPG Maker XP as its game editor, and that raises a lot of copyright issues. Not to mention the demo heavily uses RPG Maker XP art. As far as I can tell, they did not get Enterbrain's permission for any of this.
HTML5 Canvas Old School RPG
HTML5 Canvas Old School RPG
This is very impressive work! May I ask how you implemented the save and load features? Is it saved onto the local drive?
Save and load is implemented using HTML5 LocalStorage. As the name implies, yes, the data is stored locally.
HTML5 Canvas Old School RPG
HTML5 Canvas Old School RPG