JavaScript+PHP Online Game Prototype

[Gan]

http://arcadeoftheabsurd.com/gmgchat/scripts/LegendSword/Login.html

Create an account, log in, interact with others online and even chat with them!
Yes, this is a prototype online game using Silver's Legendary Sword game with a lot of magical php dust sprinkled on it.

Silverwind, you did a fantastic job on your engine. Very easy to understand and use.

Now the game seems to run fairly fast. Though it could run faster through new technologies such as HTML5 canvas drawing and Websockets(real server/client communication instead of php database stuff). Which in fact would make it probably 1000x faster and more awesome.

Sorry if it looks kinda clunky, I worked on it a little yesterday and finished the prototype today. And my cat's snoring... Hah. I guess it's time to hit the hay.
What do ya think?

Warning: It is a prototype. There will be some quirks.

[Zoo]

the chat box doesn't seem to work, and it should be a different chat box, not just the GMG chat thrown in. It's pretty impressive, but needs a whole lot of work.
Things you need to add:

Custom player designs. At least let us pick from male or female, but if you want it to be super awesome, I'd add the choice between elf, human, and dwarf, just like QoM. Seriously I can't tell which player is me.

A player's name above his graphic.

More maps. Like the ability to go in that cave or those houses

Fix the sign post.

Finally add monsters, EXP, different weapons, gold, shops, a PVP, player markets (Where players can sell stuff to other players) and all the other stuff that makes a good MORPG. and start putting up advertisements. Start charging people monthly (for a "Premium Membership") and start a Wiki, and a new forums site. And make a million bucks. (But never mind those last two sentences.)


If you make this way better, it will be the next MORPG that advertises on armorgames and noone has heard of.

[Gan]

Yeah, the game seems to cancel most touches to the chat box. Though you can click the message box just right to send a chat.
Not entirely sure how to make it better.

[Zoo]

I believe there's a problem with the logging out. There are four players on the screen, only one is moving. I think their avatar sits there, even when their logged off, which could make the game less like an RPG and more like walking over a bunch of corpses. Also, it will lead to confusion as to who's on and who's not.

[Gan]

You're right. Once you create an account you stay logged in forever.
I can fix this by making a sort of inactive timer that logs players off after a few minutes.
I should also upgrade the updating process to be more efficient. To only send back data that changed instead of all data.

Silver, would it be possible to put a text label over the head of a player and have it move with the player? Would make it much easier to recognize people.

[Zoo]

You don't really need both a custom avatar and a name over the player, whichever is easier will work.

[Gan]

Probably won't be a custom avatar, just the normal avatar and a name.

Hmm. This prototype was a challenge to make and I proved it can be done.
Now what?

(A) I could keep it up as a proof of concept and just brag about it every now and then.
(B) I could update it further to turn into a fuller ORPG with multiple maps and maybe enemies. (Would be increasingly hard to do with PHP due to lack of server side world processing)
(C) I could upgrade it to HTML5 which will give a tremendous speed boost and a ton of new graphical possibilities. Also use HTML5 websockets which forgoes the php for a real server. In which it'll turn into a real fast paced Mmo. Though compatibility drops to just the latest browsers.
(D) Research new ways of server side processing compatible with older browsers.

I dunno, I'll figure something out. Might try out (C) cause it'd be interesting.

[Zoo]

w00t. I love HTML5. It's pretty awesome, and I've never even tried making a game with it. What I've seen of the canvas element has flash-like results, and runs insanely fast.
http://canvasrider.com/

[Gan]

Wow that's awesome.
I'm looking through tutorials on the canvas element. I think it'll be awesome. In fact it'd be awesome if Silver gave it a whirl.

Here's an HTML5 canvas cheat sheet:

[Silverwind]

Silver, would it be possible to put a text label over the head of a player and have it move with the player? Would make it much easier to recognize people.

Sure, you could have another div element inside the "playerDiv" element and change the innerHTML property with JavaScript to display the name. Something like this:

Code: [Select]

element = document.getElementById('playerNameDiv');
element.innerHTML = player.name;

If you wanted the name to display above the player's sprite image, you'd have to change the value of "overflow" for "playerDiv" in "interfaceStyles.css" to "visible". Then just give it an negative "top" sub value of "style".

Wow that's awesome.
I'm looking through tutorials on the canvas element. I think it'll be awesome. In fact it'd be awesome if Silver gave it a whirl.

So far the only thing that excites me about HTML5 is the native video playing capabilities. I'm quite a casual web developer, not into the bells and whistles.

[Gan]

Thanks. I'll try out the name thing.

As for the canvas, I think it's much more than a bell and whistle. I see it more as a fundamental and necessary tool for web based game development.
Silver, you've used GM which has fairly low graphical abilities. Very similar to HTML divs. Eq, Me and the rest of the community are use to Sc and much more advanced graphical abilities. We like smooth animations, lots of sprites on the screen and super fast and low CPU graphics.

[Silverwind]

It's true, my love for development is in simplicity and my love for RPGs is the basic mechanics more than anything else. If it can accomplish Yipe! I'm a happy chappy!

[Gan]

Haha yeah divs are perfectly fine for RPGs but not so good for ORPGs. Gotta eek out as much speed as possible.
Silver, I bet I can make a canvas with drawing ability more simple than your div setup. Also plenty faster(you'll be able to do real time battle or card based battle with fancy sword animations!)

Now to put it into persepective:

HTML Div Tag Graphics when put to the test cause the browser to soar up to 100% CPU when updating a few sprites at 30fps. Plus it really can only move around divs and images. No individual pixel support or awesome drawing commands. And it's a bit hackish cause adding other things like chat boxes and stuff don't play nice with the relative and absolute div positions.
Why is this method so slow? Cause everytime you change something, the html gets changed and the website has to be re-rendered.

HTML5 canvas was made to fill a vacancy in interactive web graphics. Yes, it was designed for speed, functionality, animation, beauty, and to annihilate bloody slow flash. It also plays nicely around other html objects like forms and textboxes and text. It's designed just like Sc's painting commands are designed.
HTML5 has 2 major modes. 2D - Drawing through pixel manipulation. Able to draw images, lines, shapes, gradients, and able to get and change individual pixels as well as flip frame buffers and draw offscreen.
3D - Able to use WebGL to either show 3D content with GPU processing or to super power a 2D game through the GPU.
2D uses CPU, 3D uses GPU. Both insanely fast. 2D can handle thousands of moving sprites at 30 fps. 3D can handle 60,000+ moving sprites at 30fps.

[Gan]

I attempted to put the names in but I think I did something wrong. They appear at the top.
Anywho I think this is a sign. To go with the html5 canvas.

[Gan]

http://arcadeoftheabsurd.com/gmgchat/scripts/HTML5%20Sources/Canvas.html

Here's what I got so far. Playing with the HTML5 canvas. It's really fast and well very little in source code.