WebGL Action RPG
Tuesday, January 11, 2011 - 13:40
Hi there,
First of all, you must have a webGL-compatible browser (firefox 4 or google chrome) to run the demo. Chrome is the best choice for performances and graphics (particles do not work well with firefox 4.0).
I have started a little RPG/hack & Slash game engine. The demo is here : http://nicolas-bonnel.github.com/WARPG/
The GitHub repository is here : https://github.com/nicolas-bonnel/WARPG
Wow, quite fast shooting. I've got to install a newer browser...
You mentioned "Skeleton interpolation between keyframes." on your todo list - I just wanted to point out that you may have a look at nlerp (normalised linear interpolation) instead of slerp (spherical linear interpolation). nlerp is a simple and a sufficient approximation when there are not-too-big-differences between q and q'.
I just have implemented both interpolations. I find that slerp give better results, but I will perform some test with more models to see the computation cost of slerp vs nlerp. For the moment the frames shown are hardcoded (4->11 = walking on the skeleton model), I will change this soon.
First post updated, I ll post the changelog here now :
- Added sky, fog and a grid system for optimization, there is now 2000 objects on the map and the demo should run on lower hardware.
- Added static models (chest, house, shrine, trees). Added monsters : minotaur and antlion (special thanks to pfunked : you made awesome stuff).
- Linked a sword to the skeleton model : you can now attack monsters.
- Added collision detection
- Monsters have an health disk bellow them and can now die.
- Improved drawing (objects in the view radius but in the back are not drawn anymore)
Wow, very nice!
The RPG game is excellent! Hope to see it develop further, so cool to see OGA content used in this way :D
Ru on older hardware? I get 9 fps (max) and I only got this laptop in October!!!
I have an axe to grind with the world of software development being slowly shoehorned into web browsers. So please take any hint of criticism as a dig at this global trend.
I'm always in favour of new FOSS games and wish to see every project succeed in it's goals.
In that spirit, I look forward to seeing future improvements. :)
http://forum.freegamedev.net/
clrg : what's your configuration (CPU, graphic card) ? I moslty test the code with chrome, I just realised than chrome's performances are way better than firefox 4 (at least on ubuntu).
Another problem I just experienced : the drawing of the 2D interface I lately added is very costly because some textures are uploaded to the graphic card each frame. I have an idea to solve this problem, I hope it will fix it !
I also lowered the view radius : less objects are drawn, this should increase performances. I'll soon add shortcuts to personalize the view and be able to hide the interface.
Nice work! I love seeing my creatures moving about in 3D
I'm getting an error on Chromium - could not initialize WebGL.
You need to have chrome 8+ to run the demo. There are some instructions here to enable webGL : http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation
Ah, okay. It works fine when I launch it with --enable-webgl. :)
Some little updates (let's say it's v 0.01) :
- You can now die and monsters disapear when dead. Added some randomness in monster level (increases with the distance to (0,0))
- Added 2 panels (shortcuts 'P' and 'L') : settings (only view radius for the moment) and aptitudes.
- You can now level up some aptitudes (constitution, intelligence, stamina, dexterity, melee, cast fire, sword).
- When hit you enter in recovery mode, which cancel your current action.
- Added a particule system. Particle effects are written in json files which should allow quick particle definition
- Added the fireball skill ('Q' shortcut) :)
Awesome to see the updates, I gave you a mention in Freegamer the other day :)
Updates for v 0.02 :
- Removed the 'Q' shortcut for fireball.
- Skills have now a level requirement.
- Added a skill panel : you can access it by clicking on an aptitude in the aptitude panel ('L' shortcut). It then will propose all skills linked to this aptitude that you can use according to your aptitude levels. You can then drag & drop skills on the shortcut bar.
- Added a dozen of skills : melee (precise attack, power attack, burning strike, thunder strike), fire (flare, inferno, flame nova), air (lightning bolt, lightning, thunder, nova).
Short term roadmap :
- Inventory, item database, item drop
- Areas for map generation : for the moment objects are randomly put on the map. There will be some areas (forest, village, ...) that will constrain objects and monsters location.
@TheAncientGoat : thanks for the mention :)
Hmm, I can't seem to find any skills? Clicking on aptitudes open a panel, but there's nothing there except a close button; and the "Melee" aptitude doesn't open a panel when I click on it either
@ TheAncientGoat : Which browser do you use ? Is there some errors in the console ?
EDIT: I reinstalled firefox 4.0 : there was a problem with a function, now the skills should display in the tab. However drag & drop do not work with firefox 4.0 :(, I'll have to look at that.
No errors, just debug messages. And yeah, I was using Firefox 4
I can't find any documentation on the about dragging a button with firefox / html5. The w3c spec says a button can have the attribute draggable, but I can't make it work with firefox 4 :(. If I don't resolve this issue, i will add a 'add to shortcut tab' button for each skill in the skill tab.
So for the moment the demo only works well with chrome (put you can still use skills with the skill tab opened).
Updates for v 0.03:
- Removed the map file, now the map is randomly generated with square & diamond algorithm and is a little bit larger.
- Switched matrix library to glUtils (link is in the credit page) which is a lot faster.
- Added an area concept : the map is composed of various areas linked together by paths. Villages need some improvement thought.
- Added a starting point, with a shrine, when you die you will revive there. Monsters level is now given by the level of an area, which increase with the distance in the graph of the starting point.
- Added cemetery objects, this still need some improvements to make nice graveyards. Added skeleton enemies.
- The drawback of these updates : loading time has increase (between 5 and 10 sec). I'll add a loading screen soon.
I think next update will focus on inventory implementation and cross browser compatible drag & drop (I plan using JQuery, for the moment drag & drop works only with chrome).
Cool, tried it out in Chrome, skills work! The new version is awesomeness, I love the themed areas... Dude, you have one of the best HTML5 games out there, as well as one of the best open source, 3d RPG's XD
I read you're looking into making an inventory, I already made one as a JQuery plugin if you're interested.
You can see a test at http://sueastside.be/GUI/test/index2.html It's a grid based inventory with object sizes (diablo II style)
Note: Objects can be anything, I used to have it set up as webgl so you had spinning shields and what not, but the event handling changed on our webgl viewer, so i switched it to images to show it to you. (You could change no3D to false in the line $(".draggable").InventoryObject().DAMNPreview({no3D: true, lazy: false}); and then you'll have webgl again, but it will be kind of odd, you'll see :) )
Hmm, a few things that need doing though: An amount of skills available for each skill next to the level or something. It is irritating having to look through every category just to find skills to use.
There should also be buttons to access the skills list, sothat people don't have to read through the controls in order to be able to find these features.
very impressive stuff!
works great for me.
Glad you enjoy it, and thanks for the positive feedback, it will give me more motivation to continue :).
@ sueastside : Very nice. I love diablo II, and this is exactly what I'm looking for (but with a bigger grid, perhaps 20x10). What's the licence of the code ? I will look deeper into this next week.
@ TheAncientGoat : I'll add a global skill list soon. But the idea is to select skills according to the style you want to play your character. So If you want to play a caster, all casting spells will be in the cast aptitude. If you want to play a fighter, all your skills will be available in the melee aptitude. I will soon add a hint when new skills are available to the character too.
The grid size is customizable (although i have the bad habbit of encoding such stuff in attributes) "<div class="inventory" columns="3" rows="4">"
It doesn't really have a license, so consider it public domain, if you would improve it sending me a diff would be nice :) (but not obligatory)
@sueastside you should put custom data attributes as <div data-columns="3">, that way jquery even picks it up as $('div').data('columns') and it's proper html5 :)
@ sueastside : I have browsed some forums, and it seems a lot of diablo players don't like the inventory system, mainly because it takes too much time to optimize the room available. I think i'll do like Pfunked did for FLARE : all items will have the same inventory size. It will be easier to code interactions with the shortcut bar.
Another perk of having all the inventory items the same size is that the inventory items art is all a standard size, so it's probably easier to share to more projects. E.g. I intentionally chose icon sizes that match Wesnoth's so that my icons could be used in their campaigns.
@Tartos : My orginal C++ code had a rectangle packer algo implemented to do some auto sorting, personally i think its part of the appeal, you can sort to fit more stuff rather then be limited by some artificial number limiting your encumberance.
The code doesn't change though, the default size is 1x1, so it becomes a regular slotinventory when you don't specify sizes for the objects.
Using DAMN I'm not limited to a standard size for icons, it can render the mesh to the size i want, and it matters even less in webgl mode. But yeah I can see the issue if you have handpainted icons.
Updates for v 0.04:
Next time i'll try to add more content and add a little quest system.
Wow, another excellent update :) Very, very close to a full game now, all you need are NPC's and "collect 10 rat livers" quests XD
A main menu type thing would be cool as well, as well as a loading bar to show how fast assets are downloading (however, I really like being able to play while assets are downloading, saves a lot of time)
do you write JS or is it java code passed through GWT?
edit: also: your are the only person I know that writes html to the w3c spec. that NEVER works haha :)
All the code is written in Javscript. What's wrong with my HTML code ? I'm not very experienced, i started web programming recently. At least it works on my computer, and many people has reported it was working with their config. If I did something wrong, then tell me how to correct it instead of saying it never works...
hi tartos,
sorry, you got me wrong :) no offense meant towards your html code. it looks good and does what it should!
i meant that the way w3c specifies things and how they are done in browsers often differ, but less so with the modern browsers you target.
cool that you write js! i respect you more for it :)
This is really impressive Tartos, you are a coding machine! May I ask what your long term vision is for this game?
@ Smonos : No problem, I'm not a native, sometimes it's sometimes hard to me to catch the meaning. But you got it, I follow the w3c specs because anyway, it works only in modern browsers (I don't even have to look with IE compatibility :P).
@ p0ss : thanks, but you are an art machine and I'm really impressed with all the artwork you are doing :).
My roadmap is the following :
- Adding quests, I hope I will manage to have a quite good result with proceduraly generated quests.
- Add all various kinds of items (jewelry, armors, ...), and skills.
- Add more content (monsters, items, ...). If people play for few hours, I would be happy.
- Balance the game, make it fun to play by improving controls and camera.
---- summer -----
- Add dungeons
- If the result is good, and if I find the time, try to code a server and switch to a mmo with some pvp.
What I'd like to do is a game where all players have different builds. All skills should be usable in endgame and all items should be different.
Maybe a bit of an extreme feature request, but will most probably be needed for dungeons: Being able to enter building meshes. Would make nicer cities and give more detailed exploration. Could also be used for environmental meshes, like rocks and bridges.
Yeah, that would be awesome, it would allow real 3D fight/exploration too. For the moment the game is 3D engine in a 2D plane. But this simplification saves me a lot of time. I'd like to add zelda-like features too :P. But I think I won't look into this before automn or next year.
I have moved the project on github. It is the first time I use this tool, so the repository is not clean, but you can already browse sources. The repository is here : https://github.com/nicolas-bonnel/WARPG
The demo is now here : http://nicolas-bonnel.github.com/WARPG/index.html
For the moment files in the 'demo' branch are the same as in master branch, but I plan to use tools to minimize javascript.
Also, there are some little updates (v0.05) :
- New items : weapons, armors parts
- Items have a quality : normal, magic (1-2 powers), rare (3-4 powers) and epic (5-6 powers)
- Few powers availables for items : +elemental damage, + HP/SP/MP
- Added chests (A to open) that drop higher quality loot
- Added a Trash in the inventory menu
- Added / modfied new 3D objects : trees and training stuff
- Modified a little bit some monster stats
Next time i'll really focus on quests and bosses. I'll try to add more content (items, skills, powers) if I have time too :). I think I ll start to add resists too. I plan to do like for diablo 2 and handle slash/pierce/blunt resists like elemental resists.
Repos are a sign of a mature open source project, it's really awesome to see this grow :) Now, we need to see the forks and patches flow in :D
Remember to leave a link to the repo on the games' page! And write up some sort of guide for contributors
Also, check out this screenshot someone made of the game on this reddit thread
I saw your post on reddit yesterday, thanks for the ad !
But as said in the comments its not still complete :P. I also started to write some doc on the wiki : https://github.com/nicolas-bonnel/WARPG/wiki/Contribute , i'll update it today.
Sun is coming back, I didn't find a lot of time to work on the project last month, but here are the little changes I made (v 0.06):
- New items : leather armor parts
- Modified the inventory : new picture for the hero and stats displayed (damages and resists)
- Added resists on armors
- Skills now use equipment damage modifiers
- Removed some skills : magic missile and melee attack
- New skill : ice nova, fire missiles, charged bolts, slashing, piercing and blunt attacks.
- Reworked other skills a little bit
- Added antlion bosses in forests
- Added a trader that can buy your items.
- Added a makefile in the project : all js files are now concatened into one file. This makes the gh-pages branch cleaner.
Also, for testing purpose, chests drop 10 items :).
Impressive! I hadn't thought that I'll see native (well WebGL is almost native) 3D game in pure JavaScript any time soon.
I checkout repo, but it seems that 3D models are located in somewhere different, can't find it.
P.S. maybe it would be interesting for You as You works with a lots of JS, small presentation about CoffeeScript http://lanyrd.com/2011/rubyconfindia/sfkyy/