Talk HTML5 Games with the Experts – Resources and Transcript

So I reckon we may as well kick off. @mb4 and @SitePoint_Paul, would you guys kick off by telling us about the kinds of things that you do re game developing?

and, since you mentioned it before in the article, HTML5 are JS games, is that right?

@YamilG that’s right.

I’ve only made a handful of HTML5 games, using Canvas 2D and SVG specifically.

I’m trying to write some simple online games, but I’m not sure what I should use. Should I develop in HTML5/Javascript? What are its limitations?

@programmer The only alternative to using HTML/Javascript is plugins like flash.

Is java another alternative?

Is it easier or harder than Flash?

… and Flash wont get you far on mobile devices, neither will Java.

It’s still quite new and there aren’t great frameworks like Flash to make HTML5 development easy yet.

Flash is expensive.

So yes, it’s harder because you still need to do a lot of the heavy lifting yourself.

@programmer yes, HTML5 is quite cheap to develop for at $0.00

@markbrown4 Haha

Though, some of the early game frameworks like impact.js are quite expensive at $99

I have an open source alternative that will create Flash, but the learning curve is steep.

I was very impressed with the BrowserQuest project (http://browserquest.mozilla.org/) how hard is it to make a game like that? I mean, compare with traditional gamedev

So what about the limitations? Are HTML5/JS games limited to Pacman and Tetris, or will we be seeing more large-scale games?

@yamilG, looks awesome :) hadn’t seen that before.

@Cuebit you’ll definitely see more impressive looking games than that.

With things such as Unity3D some quite fancy games can be made

Cuebit: there will certainly be larger scale games than Pacman/Tetris. WebGL will help on the front for graphics.

how about canvas vs svg … should one starting now pay attention to svg, or just focus on canvas?

Paul_Wilkins: as far as I know, Unity3D games can only run on the web using a plugin?

@YamilG It’s not super easy to create a game like browserQuest.

How well does it do sound?

You can get the basics of rendering setup fairly easy with a fast loop and canvas rendering objects at different positions, with different state

diogo: Personally I find Canvas much better fitter to building games, but SVG can be useful as well for vector graphics. Ideally you should know what each one it good at, so you can pick the right tool.

how about the Google port of Quake II, was is rewritten with web technologies or just some kind of “emulator” translating the original game to HTML5? what would you recommend?

I mean, if you want to play sound clips and also record the user’s voice, for example.

YamilG: according to the page, “In the port, we use WebGL, the Canvas API, HTML 5 <audio> elements, the local storage API, and WebSockets to demonstrate the possibilities of pure web applications in modern browsers such as Safari and Chrome.” — http://code.google.com/p/quake2-gwt-port/

now that we’re getting more devices with high ppi graphics (new MBP, or iPhone 4), will it be necessary to think in terms more of vector graphics (svg) instead of fixed dimensions pngs? are there other techniques to deal with this?

btw sorry for my bad english…

@programmer I haven’t done enough with the Audio API yet, it can definitely be done though.

@YamilG I’ve been doing a bit with retina lately

Not necessarily.

Canvas actually has a dpi-density property that you can double to render 4 times the pixels

YamilG: high DPI certainly doesn’t make it _necessary_ to think in terms of vector / SVG graphics… but that will be one way to get things looking crisp.

Images you just need to create at 2x versions of as defaults and then scale to half the size when rendering.

YamilG: but having graphics scaled up will be fine for many games, and Canvas can also be used to render high-DPI images, and programmatically generated shapes in canvas can also be at native resolution.

@programmer check this out http://www.html5audio.org/2012/06/google-io-turning-the-web-up-to-11.html

http://retinafy.me/ is a great little book on how to deal with retina screens

Hi to those of you that have just joined us. I’m Community Manager for SitePoint and am moderating this session. Feel free to jump in at any time with questions.

http://createjs.com/ is another game dev framework that looks good. Inspired by flash.

nice! I didn’t know about create.js, looks good

thanks mark

I’ve been keeping an eye on KineticJS too: http://kineticjs.com/

I haven’t used KineticJS yet, but I’ve borrowed some ideas from it, particularly the multi-layer canvas for more efficient rendering.

w3c is working in a api for connecting joypads I think

these frameworks look promising!

yeah, there’s demos available for the GamepadAPI out already.

In Chrome you can enable support for Gamepad API at chrome://flags/

I would like to see a book explaining how to create a game engine with HTML5, that would be nice to have (sitepoint..:)

@YamilG I’d buy it too :)

There’s quite a few of the engines that are out there on github though

well, @markbrown4… what are you waiting for? start writing now :D

does it make sense to use more than one frameworks on the same development?

You just need to do some digging, trial and error, reading the docs

diogo, depends on the framework / library i suppose

didn’t know chrome was already shipping gamepadapi support! :O

If you’re looking at building a game engine, having some knowledge of Linear Algebra is really useful. Here’s a great tutorial:http://blog.wolfire.com/2009/07/linear-algebra-for-game-developers-part-1/

a random question, are you guys living out of gamedev, if so, any advise on how to become a full time game developer?

@YamilG no, my job is a web developer, so sites / applications / games on the side.

@YamilG: Likewise, I build web applications for a living, not games. I believe it’s a difficult industry to get into at this stage. Early days yet, though.

@YamilG I think there’s definitely the possibility of doing HTML5 game dev full time, but there’s nothing quite like an app store that will help you monetize

Once you’ve read that Linear Algebra tutorial, here’s a nice looking library to help with the vector mathematics: http://sylvester.jcoglan.com/

So you’ll need to monetize some other way like requiring sign up / login.

I have a question @Markbrown4. I know that we had some real issues during GeekGames with people cheating. Is this a huge issue for game developers? Are there ways around it or is it just par for the course?

So you recommend paid gamplay instead of in-game ads?

@HAWK, you can never secure anything that is client-side 100%.

how about html5 games incorporation with the facebook platform?

How about interacting with a database?

Security 101 is never trust the client.

So to make a game secure you need to take specific input from the client and control the gameplay on the server.

(and even then, people can use bots to do their clicking/aiming/keyboard input)

No restrictions on server side

It’s certainly possible to secure, but you need to be very specific on the server-side what you accept as valid input.

key question: where to begin? and I mean, baby stepping

Any chance that a book about developing games will come out, from novice to ninja or something like that?

@YamilG facebook apps are basically an iframe that embeds your site inside facebook.

Let me try again. Say I have a database of info and I want to use that to drive a game. How can I do it?

There’s no real limitations that make adding games to a facebook app difficult.

YamilG: “where to begin” depends entirely on what you hope to achieve. For me, I just started playing with the <canvas> API, and reading up on some really basic Linear algebra etc.

Where to begin? You could start with drawing things to the screen, and then form a game loop which receives input (if any) and then updates the screen.

@programmer like any other web application would interact with the database.

YamilG: If you’re more interested in creating actual game content and getting a final product out the door, then loko into the various frameworks and skip the hard stuff of building the game engine :)

But, because you don’t want to be using full page refreshes you need to use Ajax / socket.io to do the communication

Dealing with the database is still just handling input from requests server-side and making updates as needed.

Any thoughts on where to start on creating an HTML5 game like Risk?

@markbrown4 Okay, so learn Ajax then?

Here’s something I’ve been playing with… I’m building it without using any frameworks or game libraries: http://temporary-b82df421.s3-website-us-east-1.amazonaws.com/

(There’s currently no point to the game, but you can click around, and see how various aspects of pathfinding etc work)

If you’re interested, I can push the source code to GitHub…?

Well, 90% of the game will be client-side, if you need to save state during gameplay then you’ll need something like Ajax.

@chrissergent a friend of mine told me about HTML5-Canvas-Cookbook

@diogo thanks. I found it and I am saving the link.

@chrissergent I haven’t actually played risk, but from the screenshots it looks like it would be fairly easy to make.

depending on what you’re wanting you may not need HTML5 either.

A lot of the screen elements could be built with HTML / CSS

@markbrown4 I would actually like to make a game more like Axis & Allies, but I thought more people are familiar with Risk.

I’m just dropping this link in so that it’s in the transcript http://www.html5canvastutorials.com/cookbook/

Sorry, don’t know that one either :)

My browser crashed! Must be all the HTML5 ha ha!

Here’s a pretty amazing physics simulation library for JavaScript… Demo: http://dl.dropbox.com/u/2494815/demo/Joints.html Code:https://github.com/josephg/chipmunk-js

@hAWK I like that page. Thanks.

@chrissergent np

@sitePoint_Paul I assume that you used that basic linear algebra that you mentioned to create your game… does that include the physics (let’s say not trespassing the wall?

@chrissergent board game style games are one of the easier types of games to build so something like Axis & Allies.

molona: yep, what you’re referring to is Collision Detection, which is surprisingly difficult.

http://yellowshoe.com.au/super_fun/ is an example of a game board style game with multiple choice answers / dice driving the input.

@sitePoint_Paul. Yes, I think that’s the term :)

Similar inputs to what those games use I believe.

@markbrown4 I just haven’t done one and thought it would be fun; but where to start; I wish there was a walkthrough for something simple.

Start with what you know. If you feel comfortable with HTML & CSS build the screens using those technologies.

Most of that super_fun game is just HTML/CSS with javascript changing the state and pages.

Ehi guys, what is in your opinion the most complete html5 framework for game design… I’m looking at lime.js, what do you think about it ?

@molona: You can see a lot of the line intersection code here: https://github.com/pda/bottom_up/blob/master/src/code/line.coffee

@markbrown4 I wouldn’t mind a walkthrough of the Super game. That could get me started for the logic of a turn based war game.

From what I’ve seen Impact.js is the most complete but it comes at a price.

@molona: And also the collision detection here: https://github.com/pda/bottom_up/blob/master/src/code/box_collider.coffee

@fhuel lime.js does look good, but I haven’t used it yet.

@fhuel most of the game engines you can tell are good by the games outputted.

what do you think of appmobi?

right, thank you @markbrown4

The lime.js example games feel smooth and fast and it seems to be gaining popularity. Looks like a good option.

@sitePoint_Paul your ‘game’ hosted at amazonaws.com, is there a particular reason for choosing amazonaws?

@sitePoint_Paul thanks!!!

@diogo: because hosting on AWS is cheap and easy, and I use it for other home and work projects.

@diogo: most or all of SitePoint is hosted on Amazon AWS one way or another.

what I’m using there is just a simple Amazon S3 bucket.

AWS is just for static website, isn’t it ?

@chrissergent I can send you a walkthrough to that game. shoot me your email at markbrown4@gmail.com

@fhuel S3 is just for static content, but AWS is made up of lots of services, including EC2 which is their virtual computing platform.

For animating in HTML5, requestAnimationFrame is an important API, however it’s not standard yet. Here’s a nice polyfill script which provides it for all browsers: http://temporary-b82df421.s3-website-us-east-1.amazonaws.com/js/vendor/raf.js

ok, probably it just seems a lot more complex that a “regular” hosting… at least to me :)

does it make sense to obfuscate your js code?

More official URL for the requestAnimationFrame polyfill: https://gist.github.com/1579671

@diogo that won’t prevent someone really intent on taking the code.

@markbrown4 I sent it.

@fhuel It’s probably more complex until you work with it for a while :)

eheheh right

Ok, we have just over 5 minutes left in the session, so if you have any questions that you’ve been sitting on, now would be the time to ask them.

hi, any suggestion for a framework for creating a collecting card game, i plan to write my own using jquery as client and node.js/redis as back-end

If you’re into unit testing — it can be done for game development too. Here’s the tests for my work-in-progress: http://temporary-b82df421.s3-website-us-east-1.amazonaws.com/test.html and the code: https://github.com/pda/bottom_up/tree/master/src/code/spec

@diogo I’d still use uglify.js to compress and minify the scripts but only for speef, not to secure them.

@markbrown4 great answer :)

@badjem79 it depends on the UX involved I suppose.

@badjem79 no immediate recommendations, only to keep it simple as possible. if HTML/CSS can achieve what you want there’s no reason to put everything in a <canvas>.

@sitePoint_Paul could you share any references/links on unit testing?

@diogo: for JavaScript, Jasmine is great for unit testing: http://pivotal.github.com/jasmine/

For Ruby code, RSpec is great: http://pragprog.com/book/achbd/the-rspec-book

Node.js helps if you have a lot of traffic or want to support socket.io like communication.

thanx, I was going to had unit testing for javascript :)

A card collecting game could use socket.io to share with others who are online at the time for example.

A few months ago, Mozilla posted about this minimal HTML5 game template: https://blog.mozilla.org/labs/2012/05/introducing-a-minimalist-html5-game-template/

worth reading if you want a collection of tools to get started.

And that’s the end of the official session everyone. Feel free to stick around and chat as long as you like, but I’m going to cut our experts free. Thanks very much to Paul and Mark for taking the time this morning and to the rest of you for coming along and taking part. I’ll be posting a transcript and list of resources up on SitePoint later today.

If you’d like to sign up for email reminders of future sessions, you can do so here https://www.facebook.com/sitepoint/app_115462065200508

@sitePoint_Paul and @markbrown4

thanks

thanks

thank you

The next session is Sept 12 and the subject is UX with SitePoint author Jodie Moule.

doh missed it lol

thank you!

thank you

@theoWirebox Check out the transcript later today :)

no problemo.

ok cool thanks

No worries – glad you all made it.

Also, if you remember Command & Conquer from the 90’s, check this out: http://www.adityaravishankar.com/projects/games/command-and-conquer/

Feel free to tweet at me at @markbrown4 if you have questions. Would like to see what you guys are making :)

Likewise – I’m @pda on Twitter: http://twitter.com/pda