Skip to main content

User login

What is OpenID?
  • Log in using OpenID
  • Cancel OpenID login
  • Create new account
  • Request new password
Register
  • Home
  • Browse
    • 2D Art
    • 3D Art
    • Concept Art
    • Textures
    • Music
    • Sound Effects
    • Documents
    • Featured Tutorials
  • Submit Art
  • Collect
    • My Collections
    • Art Collections
  • Forums
  • FAQ
  • Leaderboards
    • All Time
      • Total Points
      • Comments
      • Favorites (All)
      • Favorites (2D)
      • Favorites (3D)
      • Favorites (Concept Art)
      • Favorites (Music)
      • Favorites (Sound)
      • Favorites (Textures)
    • Weekly
      • Total Points
      • Comments
      • Favorites (All)
      • Favorites (2D)
      • Favorites (3D)
      • Favorites (Concept Art)
      • Favorites (Music)
      • Favorites (Sound)
      • Favorites (Textures)
  • ❤ Donate
Show off your project!

HTML5 Canvas Old School RPG

Gaurav
Sunday, November 14, 2010 - 10:15
Gaurav's picture

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.

  • Log in or register to post comments
bart
joined 11 years 8 months ago
Monday, November 15, 2010 - 06:28
bart's picture

Very nice so far.  Keep up the good work!

Bart

 

  • Log in or register to post comments
Anonymous (not verified)
joined 0 sec ago
127.0.0.1
Sunday, November 21, 2010 - 13:57

Very nice!
Hope I can play it soon.

  • Log in or register to post comments
Gaurav
joined 12 years 4 months ago
Sunday, November 21, 2010 - 14:04
Gaurav's picture

@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

  • Log in or register to post comments
shirish
joined 12 years 8 months ago
Wednesday, December 15, 2010 - 10:27

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. 

  • Log in or register to post comments
Gaurav
joined 12 years 4 months ago
Thursday, December 16, 2010 - 11:03
Gaurav's picture

@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

  • Log in or register to post comments
shirish
joined 12 years 8 months ago
Saturday, December 18, 2010 - 12:45

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.

  • Log in or register to post comments
Gaurav
joined 12 years 4 months ago
Sunday, April 3, 2011 - 11:18
Gaurav's picture

Updated first post with all my progress.

HTML5 Canvas Old School RPG

  • Log in or register to post comments
Gaurav
joined 12 years 4 months ago
Sunday, April 10, 2011 - 12:27
Gaurav's picture

Moved the game to Github since webs.com was serving svg images with wrong mime type.

HTML5 Canvas Old School RPG

  • Log in or register to post comments
wokste
joined 11 years 11 months ago
Thursday, April 14, 2011 - 08:26

I have a few suggestions.

  • Faster walk speed (+50%) and even less enemies (1/7 instead of 1/5). 
  • Sound. Look around at this side and find what you like. I found
    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
    • <audio src="..." [loop="loop"]>
    • document.getElementById('audiotag1').play();
  • Load & save. I don't know if you want to store this information on a server or what you are planning, but it would be a great addition, even if just everything is stored in a cookie. (The easiest way I presume)

I hope this is a good enough help to make the game more fun to play

 

  • Log in or register to post comments
Gaurav
joined 12 years 4 months ago
Saturday, April 16, 2011 - 18:49
Gaurav's picture

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

  • Log in or register to post comments
Anonymous (not verified)
joined 0 sec ago
127.0.0.1
Tuesday, May 10, 2011 - 01:59

This stuff is cool.

  • Log in or register to post comments
Gaurav
joined 12 years 4 months ago
Monday, May 16, 2011 - 10:05
Gaurav's picture

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

  • Log in or register to post comments
wokste
joined 11 years 11 months ago
Friday, May 20, 2011 - 02:12

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:

  • The number of times you saved (before completing the game)
  • Time played.
  • Kills.

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.

  • Log in or register to post comments
Gaurav
joined 12 years 4 months ago
Friday, May 20, 2011 - 18:17
Gaurav's picture

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

  • Log in or register to post comments
fberger
joined 11 years 8 months ago
Tuesday, July 19, 2011 - 13:39
fberger's picture

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

  • Log in or register to post comments
Gobusto
joined 12 years 3 months ago
Wednesday, August 10, 2011 - 05:03

This reminds me of RPGJS. It's an open-source project, using HTML5 and Javascript to create an RPG-Maker-esque game online.

  • Log in or register to post comments
Gaurav
joined 12 years 4 months ago
Monday, August 29, 2011 - 21:29
Gaurav's picture

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

  • Log in or register to post comments
Anonymous (not verified)
joined 0 sec ago
220.255.2.148
Sunday, October 23, 2011 - 09:12

This is very impressive work! May I ask how you implemented the save and load features? Is it saved onto the local drive?

 

  • Log in or register to post comments
Gaurav
joined 12 years 4 months ago
Monday, October 24, 2011 - 11:08
Gaurav's picture

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

  • Log in or register to post comments