Topic
Networked, multiplayer street in HTML5/JavaScript with chat. Update at bottom.
After my article linked here earlier this week about the deficiencies of HTML5 as an online game platform, it got me thinking. While I still believe (as TS did IIRC) that HTML5 was not up to snuff for doing something like Glitch, I had to see how far I could push it in a few hours last night and this morning.
This experiment touches only the ability of HTML5, CSS3 and JavaScript to create a smooth experience in the kind of side-scrolling environment that we knew and loved in Glitch. Really, I'm experimenting for my own purposes (by trade I'm a web development lead specializing right now in HTML5/CSS3 front ends that deliver a rich experience on Enterprise platforms). I'd also never created a timer-based animation system before and wondered how that would come off in JavaScript. It's very smooth on my 8GB RAM/6 core machine running linux. YMMV, obviously. I'll probably try it on my phone shortly.
It's really a work in progress for self-education, and there are lots of things not working so if it doesn't work for you... don't feel the need to tell me.
TL/DR: Unzip to your HD. Run Google Chrome. Do File->Open and find the index.html. Use the arrow keys and space bar to move around. Put your headphones on if you want to get a little misty.
unUrthed experiement here.
I probably won't take it much further than this, just because A) I've satisfied my geek curiosity about how you do this and B) I feel like someone raising a decrepit zombie just because they want to see a loved one one last time.
Having done this, it becomes even more obvious how massive Tiny Speck's undertaking was. The stuff I did here is truly the least of things, and was probably mostly handled by the Flash engine anyway. And my point from the original article stands: without some kind of code and settings protection you cannot make a group-participatory game without serious server-level cheat-clamping overhead. It's just not feasible right now.
Cheers, all.
Replies
-
1.- I downloaded your file and received a file named unurthed.zip
2.- Opened the file "index" with Google Chrome.
3.- ... o_o
4.- DO MINE DO MINE DO MINE DO MINE! -
Actually, if you've downloaded your Sprite files (instructions elsewhere on forums and per Google), you can do it yourself, no harder than following a cookie recipe:
1. rename the walk sprite file to characterSprite.png
2. rename the jump sprite file to jumpingSprite.png
Put those into the image folder in the extracted archive and you should be able to watch your Glitch come to a freaky semblance of life. And *poof* you just achieved the "You now think you're a 'hacker' but you're not" badge. -
Hi experimenting friend :]
You may want to check out what I posted earlier this week
(Also striatic and UXRoot did some cool html5 experiments way before us)
Your demo is really neat for some fully home-made code!
My approach was more lazy (I'm not a dev), but you may want to have a look at that Construct 2, it's amazing.
I don't know enough to tell if HTML5 was ready for this game, but to answer you last paragraph, it seems possible to have your javascript obfuscated, to make it "extremely difficult for anybody to reverse engineer your game"...
PS: stay tuned I'm releasing an actual g.a.m.e today -
I envy you all your ability to code. I've been trying to learn to code games for ages. I've tried a variety of different languages. My brain just has not been able to learn to "speak" any of them, let alone write any of them very much beyond "Hello World."
Then again, maybe I have more time these days to try again.
I definitely will stay tuned :D - That's precisely what I'm trying to tell on the other thread... you ain't need no coding with Construct 2 :)
-
"1. rename the walk sprite file to characterSprite.png2. rename the jump sprite file to jumpingSprite.png"
That didn't work for me. - Asazi, did you replace your own sprite images in the exact same folder? (in this case, the folder called "image" in wherever your unUrthed.zip files were extracted to).
- Yes I did. My sprites show up, but they're messed up. The placement is all wrong.
- Yeah -- I thought sprite sheets had uniform widths. They don't. I'll post here again when I adapt to that.
-
In case anyone is interested, the final state of this for will be:
1. Full "platform" character motion and physics
2. Implementation of all idle states
3. Out-of-the-box support for different sprite sheets (they are apparently all different sizes for different people)
4. Ability to move between streets (basically load a different background)
5. Provide a platform-specification tool for making new streets.
And most of all:
6. Allow multiple users to walk around on each other's streets simultaneously. Note that to get this you would have to run either some kind of local server if you just want to do it at home, or run the server software I'm building somewheres on the Big Great Internets is you wanted people to interact across the Internet.
1 and 5 are done. They were the hard ones. 2 and 3 are pretty trivial. 4 is architected but not built. The real trick is going to be #6. The overall architecture supports the kind of messaging and motion that will have to happen though. -
Ok, I tackled #6, because the other stuff is just "nuts and bolts." So now, if you have access to a node.js server (which I'll explain in a minute), you can run this on your home network. You and two other friends (three characters hard-coded for now, but it's possible to open it) can all fire up an instance of this thing -- called unUrthed for now -- and walk around together. You can chat too. The response is pretty good. I was cruising around, chatting with my daughters the other day (who both still miss the real game), and the one said "It feels like home."
To make this work, you need some pretty specific stuff, because we're now into the realm of true multi-player which means servers, etc. First, you have to use Chrome. Second, you need to get and install node.js (nodejs.org). Once you have that, you need to use nodejs's "npm" command to install "websocket". Get that all done, and you can use this for reals. Here's how (warning, requires a little bit of geekery):
1. Find out your local IP address. On Windows, get a command prompt (DOS window) and type ipconfig. One of the numbers there will look something like 192.168.1.152. Take that number and put it into line 32 of the file called unUrthed/script/urClient.js. The number in there right now is "127.0.0.1". Replace this with your local IP.
2. Fire up both servers (global and street-level). Once again, get a command prompt and using the cd command, navigate to the unUrthed/script directory. Then type node globalServer.js. You should see a message that says Server is listening on port 1338. Open another command prompt window (do NOT close the other one), navigate to that same directory and type node streetServer.js. If your node.js and websocket installation went correctly, you're good to go.
3. In Chrome, open unUrthed/index.html. You have three characters you can currently choose from. Pick one from the drop-down and hit "Go". You're in.
Have someone else on another computer open the index.html file as well (give them a copy of the whole directory tree after you put in the new IP address). They'll have to pick a different character than you to get in. You should be able to both run around on the same street and chat in real time. Boo-yeah.
Next up -- support for arbitrary characters and sprite sheets, multiple locations, and object detection and highlighting. I have about 40 hours into this now, and think that these last few bits will push it to 60 or so. Sadly, that will be about all the time I have to put into this.
Here 'tis: https://docs.google.com/open?id=0Bwi2Tl9bZCbzU0ZyZ0Vob24yVUU -
That sounds pretty cool (a bunch of tests are happening on Construct forums with node.js and websocket.io too)
But how many people do you expect to understand and install all this?
if you already spend a bunch of hours on the code, how about a real server deployment on some free host, so we may actually try this?