CauTi0N's Site - html5 game development progress

html5 game development progress in Off Topic

ID:116978

Aug 9 2011, 4:36 pm

Keywords: 12_languages_in_a_year, dragon_warrior, html5, javascript

Hey guys!

So as promised, I was starting myself with a new challenge. I'm not sure actually if I told many of you this, but the challenge is called 12 Languages in 12 Months - a single new language every month, attempting to learn how to use each language and make something with it.

The goal is not to learn it very intricately or to become a master at the language, but rather to pick up an understanding of the language and develop something. The languages I like, I will continue to develop in. The languages I do not like, I will not. If I don't like the language, or can't get used to it, I'll never get anywhere with it, so there is little point to it, in my opinion.

This month's challenge is HTML5 + JavaScript and developing a game (mini-demo) with it. Because it seemed easiest, I jumped right into this and am working on creating a Dragon-Warrior-styled clone.

I am stealing graphics right now, I know - however, I will be working on either making graphics myself, or hopefully, if any of you are kind enough, getting someone else to make actually "good" graphics. ;)

So far, only the movement system is done, but the benefit of that is that this movement system is implementable for any further HTML5 game projects I have. It mimics a grid-based system of 32x32, like BYOND, but this can be manipulated should one choose to do so.

If you have tips or feedback, I'd love to hear it. I won't get offended, I just want to get better. (:

Without further ado, here is my UNTITLED HTML5 RPG.

[EDIT: You must click on the canvas to get it running properly, and movement is WASD! I'm taking care of that first bug, but currently that's how it is.]

#1 Aug 9 2011, 6:12 pm

Forum_account

Without further ado, here is my UNTITLED HTML5 RPG.

I tried it in Chrome, Firefox, and Opera and it didn't work in any. In Chrome and Opera the alerts/prompts showed up but the movement didn't work. In Firefox there was an error and the alerts/prompts didn't show up and the movement didn't work.

My advice would be to use languages for their intended purposes. If you try to use Java, JavaScript, VB, etc. to recreate things you can do in 30 seconds with BYOND, you're not going to learn that much about the other languages. Make an interactive website with JavaScript and HTML. Make a Windows application with C#. Then, in the future when you're working on a BYOND game you might have the need for a non-DM based utility to help with the game's development and you can write it in C#. Or maybe you want to integrate the game with an interactive website and you can do that with HTML+JavaScript.

#2 Aug 9 2011, 7:09 pm
PopLava	It will work out of box with IE9 I beleive.

#3 Aug 9 2011, 8:03 pm
Fugsnarf	PopLava wrote: It will work out of box with IE9 I beleive. Barf [edit] It actually works even less with IE9. Apparently the <canvas> tag isn't supported o.o

#4 Aug 9 2011, 9:04 pm

CauTi0N

Forum_account wrote:

I tried it in Chrome, Firefox, and Opera and it didn't work in any. In Chrome and Opera the alerts/prompts showed up but the movement didn't work. In Firefox there was an error and the alerts/prompts didn't show up and the movement didn't work.

My advice would be to use languages for their intended purposes. If you try to use Java, JavaScript, VB, etc. to recreate things you can do in 30 seconds with BYOND, you're not going to learn that much about the other languages. Make an interactive website with JavaScript and HTML. Make a Windows application with C#. Then, in the future when you're working on a BYOND game you might have the need for a non-DM based utility to help with the game's development and you can write it in C#. Or maybe you want to integrate the game with an interactive website and you can do that with HTML+JavaScript.

That's weird. It's worked perfectly on every browser I've tried. Which versions are you running? Is everything updated? What's your OS?

Game development is actually something people are branching towards in HTML5+JS. I've learned quite a bit so far about how to create objects, how the canvas works, how to grab client input and relay that back to the game.

#5 Aug 9 2011, 9:32 pm
CauTi0N	Weird - in Chrome 13.0.782.112 there is a pixel offset. In an older version of Chrome, it functions properly.

#6 Aug 9 2011, 9:47 pm
Fugsnarf	The only problem I'm having in Chrome is not being able to move up or down. There's also some weird collision going on left and right where I can't walk over the sand.[EDIT] And now I -can- move up and down, but there's still weird collision where I can't move over grass or sand. It also takes quite some time for the tiles to load, that might be an issue for every browser though.

#7 Aug 9 2011, 10:08 pm
CauTi0N	They are separate JS files. It's likely your browser is re-writing it compressed all inside the same source. Chrome does that in the JavaScript console. The CSS isn't intended to be separate. I'm not sure what your browser is doing, but it is all linked separate - that's a bit weird.

#8 Aug 10 2011, 8:37 am

CauTi0N

The DOM was only for debugging purposes.

chat.php is not a game. I was working on a chat program for the internals at my work, and happened to be working on it at the same time.

I'm guessing that BYOND's hosting is doing a lot of funky things - on localhost for any browser & cross-computer, it has worked 100% (aside from IE). I'll test another hosting company.

node.js doesn't look useful for me. I don't have my own server, have no intention for networking games for a while, and the lack of documentation makes it incredibly daunting.

Anyways, I appreciate all the feedback. Unfortunately, it sounds like nobody was able to actually run it properly, so nobody really has seen what it is so far...

Basically, it's a movement system, but I do wish that it actually showed that to you all. Anyways, I'll be posting updates via other blogposts. Keep your updates coming to me, please! I appreciate the feedback.

#9 Aug 10 2011, 8:43 am
CauTi0N	Update: Interesting. On any resolution lower than 1280x1024, there is a 18-pixel offset on the tiles. Well, I suppose that's one useful bug report.

#10 Aug 11 2011, 1:03 pm

CauTi0N

Actually, if you guys could - whoever tested this (working or not), would you please respond here with:

OS:
Browser / Version:
Screen Resolution:

Thanks.

So far, it only works (documented) in:

Windows XP/7
Chrome 13.0.782.112
1280x1024

It works in other resolutions aside from the pixel offset, in all of my tests.

As well, if you all could write what errors you are getting, that would be an added benefit. I appreciate it if I get any responses.

#11 Aug 11 2011, 4:55 pm
Fugsnarf	Windows 7 Chrome 13.0.782.112 1366x768 It works. Takes a crapload of time to display the map. No problem with pixel offsets, actually.

#12 Aug 12 2011, 9:29 am
CauTi0N	Cool. Yeah, I'm working on fixing the map display error. I'm still not sure what is causing it, but I appreciate that. And I'm glad that it's actually showing up for some people. I'll have to find a new host, I noticed BYOND adds extensions to all of my links in the page which may be causing JS errors.