JavaScript Jabber

JavaScript Jabber is a weekly discussion about JavaScript, front-end development, community, careers, and frameworks.

Subscribe

Get episodes automatically

080

080 JSJ – Impact.js with Dominic Szablewski


Panel

Discussion

01:20 – Dominic Szablewski Introduction

01:54 – Impact.js

03:00 – Selling/Charging vs Open-Source/Consulting

06:09 – Game Development

08:42 – HTML5 Game Development

17:10 – AI

18:24 – Making Games Engaging

25:52 – Getting Ideas for Games

28:10 – Trial Licensing

29:32 – Writing Impact vs Regular Web Development

33:44 – The Game Engine

  • Tile Mapping

37:18 – Browser Differentiation

40:33 – Testing

41:47 – Getting Started with Game Development

43:30 – Multiplayer, Networking, and Communication

45:25 – Making a Career Out of Game Development

47:37 – Nintendo Web Framework

Picks

Next Week

Promises for Testing Async JavaScript with Pete Hodgson

This episode is sponsored by

comments powered by Disqus

TRANSCRIPT

CHUCK:  It’s not a tumor! [Hosting and bandwidth provided by the Blue Box Group. Check them out at BlueBox.net.]  [This episode is sponsored by Component One, makers of Wijmo. If you need stunning UI elements or awesome graphs and charts, then go to Wijmo.com and check them out.]  CHUCK:  Hey everybody and welcome to episode 80 of the JavaScript Jabber show. This week on our panel, we have Jamison Dance. JAMISON:  Hey friends. CHUCK:  Joe Eames. JOE:  Hey there. CHUCK:  AJ O’Neal. AJ:  Hello. Coming at you, well, pretty live. CHUCK:  Almost alive, huh? AJ:  Yeah. CHUCK:  I’m Charles Max Wood from DevChat.TV. I just want to remind you to go pick up my freelancing video, how I went freelance at GoingRogueVideo.com. I also just posted another video to the list on how I use Evernote. So, if you’re interested in that, you can check that out too. We also have a special guest this week and that is Dominic… DOMINIC:  [Payback]. CHUCK:  I have to try it. Szablewski. DOMINIC:  Almost, yes. Szablewski. CHUCK:  Szablewski. Okay. DOMINIC:  Right. [Chuckles] CHUCK:  So, since you haven’t been on the show before, do you want to introduce yourself? DOMINIC:  Yeah, sure. I’m the author of a JavaScript and HTML5 game engine called Impact. And the HTML5 part about it is basically it’s using the HTML5 canvas element and the audio elements. So canvas for drawing and audio for sound, obviously. I’ve been working on that game engine for three years now. And it’s a commercial product. I’m selling it and it’s basically my main job right now. CHUCK:  Interesting. So we did bring you on the show to talk about Impact. Do you want to just give us a rundown of how you got started working on it? DOMINIC:  Yeah, sure. So I started on it working in university. And my bachelor thesis was actually building an HTML5 game. It’s called Biolab Disaster. I released that in 2010, I think. And I had to actually build a game engine for this game because there was no HTML5 game engine around at that time. So after I finished the game, I thought, “Hmm, I have something really good right here. Maybe I can polish it up a bit more and release it open source or maybe even sell it.” So I spent another two or three months writing documentation for it and polishing everything and commenting the code properly and stuff like that and try to sell it for those $99 on the Impact website. That’s basically the story of how this was started. JAMISON:  That’s such a fascinating story to me for so many different reasons. It seems like, especially in JavaScript, there’s just such a culture of open source and you just live off people’s good will somehow. How did you make the decision to try to sell it instead of doing it open source and doing consulting or some of the other models for making money off of software? DOMINIC:  That’s a really good question. Well, I actually had to think long and hard about this too. If I wanted to sell it, at first I just wanted to publish it open source and don’t write any documentation for it whatsoever. But I was done with university and I was thinking I don’t want to get a job anywhere. [Chuckles] DOMINIC:  I want to do freelance work and maybe build some iPhone games and stuff like that. You know, it was just an experiment to see if I can actually sell a JavaScript framework for $99. And the result was quite surprisingly that yes, I can. That it worked out. I’m making a living off of it. So yeah, it’s just an experiment, or just started as an experiment and it worked. JAMISON:  Do you end up doing lots of consulting related to Impact as well or is it mostly just from sales of the product? DOMINIC:  It’s mostly from the sales of the product. I do make some money with advertisements on my games. There’s one game I published two years ago called Z-Type. It’s a type to shoot kind of game, shoot-‘em-up game where you have to type the words on the screen. And there’s a small app banner from Google on the side. And surprisingly, it still makes a lot of money each month, even two years after the launch. But most of the money comes from selling the licenses. And I do some freelance work now and then. For instance, I published some games for Google’s Chrome for Android. They wanted to show off the browser so I published some games of mine and made sure they work really well on the browser and stuff like that. CHUCK:  I have to say that I’m actually very heartened by you charging for it. I’m a huge proponent of open source software. But at the same time, if this is something that people are going to rely upon, it’s nice to know that there’s a dedicated person behind it that basically gets paid to keep it up and make it work. DOMINIC:  Yeah, that’s one of the positive things about it. I really got some angry emails and comments in my blogs when I announced that I wanted to sell the game engine instead of releasing it open source. JAMISON:  [Chuckles] You had the audacity to charge money for it. DOMINIC:  Yeah. [Chuckles] People were really pissed off about this and asked me, “How can you do that? You know that’s JavaScript and it’s open source anyway. So how can you charge money for it?” But again, it worked out and so I guess it proves me right. [Chuckles] CHUCK:  Yeah. So I want to get in a little bit to game development and just writing games. The thing that I get, a game engine. When you’re building a game, you’re basically moving elements or images around and things like that. I guess what I’m curious about is what goes into writing a game and how do you make sure it’s a game that people will actually want to play? DOMINIC:  Well the second part of the question was probably the harder one. [Chuckles] I’m going answer the first one first. If you have a game engine like Impact, what you have to do is build the game world you want to have. So if you have a jump and run game, you have to build jump and run levels. Or for a top down RPG kind of game, you build bigger worlds and stuff like that. Then you have to write the behavior for all the objects in the game world. So the main object for most games is the player. I’m calling these objects entities in Impact. So you have a player entity and you program behavior that gets called 60 times per seconds. So you have an update function on each of these entities that gets continuously called for the player entity. That’s for instance, if you press a button, you walk forward and you write these simple behaviors for each of the entities. For an enemy for instance, it’s checking the distance to the player and then moving the enemy into the direction of it. So if you have all these things wired up, the game is basically playable. And now comes the hard part about it: tuning it so that it is fun to play. It’s really difficult to explain this. I guess it’s a bit like an art form. So you just have to do it and you get better with the time. Your first games will probably suck. [Chuckles] And you’ll get better each time. And each game you make, you’ll figure out stuff that is fun to play and you’ll know what isn’t fun. You also have to focus on what you actually want to achieve with the game. So maybe you have a game that wants to tell a story, so it should be easy to play through. Or you have a game that’s really hard and the fun comes from actually beating the game. There are different kinds of good gameplay. Again, that’s really hard to put into words. JAMISON:  So I want to ask about HTML5 game development specifically. Browser games used to mean Flash. And now JavaScript and HTML5 are a viable alternative. But there’s also Unity and I think there’s a couple of other things to build games that work in browsers. So why do it in JavaScript and HTML? DOMINIC:  That’s a good question. Actually, I wanted to write a game for my bachelor thesis and I looked into Flash first. And I looked at Flex, the Flash game engine, which was really popular back then. And I really struggled to get something working to get stuff to behave in the way I wanted it to. So I thought maybe I should write something on my own. Back then there was this discussion going on with the iPhone not supporting Flash. And there was a huge hype about HTML5 and can you write games in HTML5? And is this really an alternative to Flash? I wanted to check it out to see if it works. So that’s why I picked JavaScript to write this. Also, the canvas and audio elements were pretty new back then. And I’m curious, so I have an interest in everything that’s new. So I wanted to try it out. And yeah, surprisingly, in the end I could get my games working on the iPhone and other mobile phones, working in the browser. So I think that’s the main reason to write games in HTML5 right now, to have it working everywhere. JAMISON:  So you can run it on a phone and don’t care about what operating system it is and on a browser and stuff too? DOMINIC:  Yeah. JAMISON:  Unity doesn’t work on phones, right? Or does it? DOMINIC:  It does, but I think it’s really expensive. For the Android license, I think it’s about $600 or something. JAMISON:  Okay. DOMINIC:  And it’s always a native app. So I think HTML5 is pretty good at delivering games right where you are. So if you visit a website, you can just play the game instead of installing an app and waiting for the download. And it’s right there. Also, if you want to publish a game as an app, you can bundle it with some frameworks. In the beginning, I tried using PhoneGap, which is basically just like a browser view bundled as a native app for the iPhone and Android. And it works just like in the browser. But mobile browsers still have some limitations. So I set out to build another framework called Ejecta. This framework is open source and it’s basically a JavaScript runtime that simulates canvas and audio elements. So it’s like a browser that only can display a canvas element. And it’s really good at that. It’s really fast and the audio works way better than it does in mobile browsers. So if you want to publish your game as a native app, you can always use these frameworks without changing anything in the code. CHUCK:  I think that’s actually pretty cool, the Ejecta idea where you can write the game and then you can publish it to another platform like the iPhone. DOMINIC:  Yeah, exactly. Ejecta is for iOS only, so it works on the iPhone and iPad. But there are a couple of other projects. CocoonJS for instance works on Android as well. But it’s not open source. So you have to use their, I think they have a cloud compiler. So you upload your HTML5 game and they will give you the packaged app back. CHUCK:  One thing that I want to ask about really quickly, related to this, is that if somebody’s playing my game on the web and I want to be able to persist some state (they’re on this level, they’re in this place in this world or dungeon), is there a way to do that with Ejecta so they pick up where they left off? DOMINIC:  Yeah. Ejecta supports the local storage stuff just like in the browser where you can use local storage. You have this key-value object where you just set some key to “I’m a level five,” and when you log the page again, you can read this key back. In Ejecta it works exactly the same way as in the browser. So if you use the local storage API, it works on the browser the same as in Ejecta. CHUCK:  I guess what I’m asking is if somebody gets to level five on the web, can they download the game onto their iPhone and get to level six from level five? DOMINIC:  Well, you can do that. You have to have a small API on your server and Ejecta will fire AJAX, call on API on your server and ask for the level the player is in. CHUCK:  Awesome. DOMINIC:  So I think you need something like user accounts for that, or a password, or something. CHUCK:  Yeah, that makes sense. That’s what I was driving at. DOMINIC:  Yeah, but of course you can use the XML HTTP request API to load stuff from different websites in Ejecta as well. JAMISON:  Is there a certain style of game that lends itself more towards browser development? I’ve seen the Firefox demos that they’ve done with Epic where they port the Unreal engine to Firefox. They do some crazy 3D rendering stuff. But most of the HTML5 games I see seem more simple and more 2D games. Is that a theme? Or do you think it’s a viable platform for 3D games as well? DOMINIC:  Well, I think it will be a viable platform for 3D games in the future. I’m not sure it’s quite there yet. But the interesting thing is that you’re at this really, really simple games. Five years back, you didn’t even have any action games written in JavaScript. You only had some simple puzzle games where you have to click some buttons or something. And now you have 2D action games and shoot-‘em-ups with thousands of bullets on the screen. And you also have these crazy experiments with 3D games. I think the browser is really catching up to what you can do on game consoles and on desktop games. I don’t think it will ever be at the same level as game consoles because it’s running in the browser and the browser is not dedicated as a game system. But I believe the gap will get smaller and smaller. And with Impact, I am focusing mainly on things you could do with the Super Nintendo. So think several background layers and some objects on top of it. But of course, with potentially better graphics. If you wanted to build maybe a poker game or something, I wouldn’t recommend Impact for this. Impact is mainly focused on action games and stuff where there’s real-time movement and collisions and stuff like that. CHUCK:  So one question related to this is does it tie into physics engines or include a physics engine? DOMINIC:  Well there’s a very simple physics engine in Impact directly. This is used for the example games on the website and for all games I wrote myself. Then there’s a plugin for Box2D. If you need robust physics with ropes and stuff like that, you can always use Box2D. But if you use Box2D, it will get a bit more complicated because you have to configure so much stuff. You have to set up all the game objects and all the vertices you have to put around your game objects and define stuff like the weight of the objects. And all these things make the game development a bit more complicated. That’s why Impact comes with a very simple physics engine built-in that you can use for most action and arcade games. CHUCK:  Okay. Because I have this brilliant idea for a hit game called Mad Avians and I thought, you know. [Chuckles] JAMISON:  Sounds like a plan. JOE:  So what about AI and things like that? DOMINIC:  It’s interesting that Impact has gained quite a community of devoted programmers. So there are plugins for everything. You have, for instance, a pathfinder plugin that you can use right in Impact. And if you want to have an enemy walk from one side of your game level to the other side, you can use this pathfinder plugin so this enemy will find its way. There are people writing tutorials on how to program special behavior for the enemies and stuff like that. There’s nothing built into Impact for enemy AI. So Impact is only concerned about basic game objects that move around and collide with each other and can measure the distance to each other and stuff like that. But you actually have to decide for yourself what you want to do with all this information, for instance if you want to approach the player or run away or something like that. So that’s the main job you have to do as a game developer, I think, to program all this behavior for the different objects in the game world. CHUCK:  So how do you hit that sweet spot where people are going to want to play the game. Obviously, you don’t want to make it too easy or too hard. Are there tactics that people use when building the games to make them engaging? DOMINIC:  Yeah, sure. JAMISON:  Microtransactions. DOMINIC:  [Chuckles] JAMISON:  Done. DOMINIC:  I try to avoid these. [Chuckles] What you can do is you can make the game pretty hard. One thing, if you develop games, I think you tend to always make them too hard. Because you write a portion of your game and then you try it and you play it. And if you’ve developed your game for two weeks or something, you have played it one week out of these two weeks. So you’re the best player for this game that isn’t even released yet. [Chuckles] DOMINIC:  And so you tend to make games way too hard. And it’s really crucial to have some play testers at the end. But one tactic to mitigate this is to have checkpoints in your game. So what I did for Biolab Disaster, for the first game I made, was to actually make it pretty hard if you are not a gamer. But there are checkpoints throughout each level where the game will persist. If you die, you just are teleported back to this checkpoint, but all the enemies you have killed will remain killed. So there’s a bit of a punishment, but it’s not too bad. And basically with this, everyone can finish the game. And it was pretty important for me for this first game I wrote that everyone can play it and can finish the game regardless of how experienced they are. And then there’s another thing that I figured out with the Z-Type game, the typing game. It’s that there are some types of games that everyone can play, or people can play, that usually wouldn’t call themselves gamers. This typing game was getting so popular because it’s not like any other game. If you can type, if you know how to use Word, you can play the game. And that was really a great boost in popularity for this game. Again, there’s no real definite answer to say what’s fun and how to make a game fun. It’s just you have to iterate. You have to program it, you have to play it, and repeat. JAMISON:  So I actually took a tiny break from listening. I was listening at the same time. But I just booted up PlayBiolab.com and this is really polished. There’s a lot more to this than just the interaction of the objects. All the enemies have little animations that telegraph what they’re going to do. So they’re going to try and attack you but you can still avoid it. And there’s sweet background music and stuff. Part of the intimidating thing in game development to me seems to be the vast array of stuff you have to know how to do. I could program this. I couldn’t create the graphics or do sound design or do the animation or anything. Do you just have to be a wizard to do all this? [Chuckles] JAMISON:  Or do you farm it out to other people? DOMINIC:  Yeah, you have to team up with other people who can do that stuff. For instance, for Biolab Disaster I had a good friend who did all the music and sound design for it because I have no idea how this all worked and I’m not a musician. I really struggled with the artwork I have to say, because I don’t consider myself to be an artist. But the interesting thing is Biolab Disaster is quite low res. It’s a retro-style game. I think the game screen is only 240 by 160 pixels. So it’s really tiny. If you don’t have to paint that many pixels, you can’t do that much wrong. The smaller the graphics are, the better they will look, I think. So doing pixel art is one of the ways to get out of the graphics design stuff. If you want to have a nice-looking game, you can always team up with other artists. For instance, there’s a subreddit called gameDevClassifieds where people are searching for artists or artists say they want to work on a game and show off their portfolios and stuff like that. So I think it’s not that hard to find someone. If you can prove that your game is fun to play, just make it work with colored rectangles or something and present it to someone who can do all the graphics and get them interested. CHUCK:  Yeah, I’m one of those people that would definitely have to team up with somebody who has the artistic skills. I think you could probably go find some music on AudioJungle or something like that, that you can loop and just find different clips for different stages in the game or whatever. DOMINIC:  Right. There’s also a site called OpenGameArt.org which is actually what the name says. You can find some artwork there. They’re just under different open source licenses. Sometimes you don’t have to give attribution at all. Sometimes you just have to set the credits on the title screen or something. And there’s a lot of good artwork on there that you can just use in your game. Just throw it in there and set up the animations and you’re done. I don’t think it’s that intimidating to build a whole game. You know you can start small and again, make everything with colored rectangles or something and just prove that the game is fun to play. Actually, there are many games with crappy graphics out there that do really well. For instance, if you know Doodle Jump for the iPhone, the graphics are drawn with pencils, I think, and scanned in. It doesn’t really look like much, but it’s fun to play and it was all that’s needed. CHUCK:  Yeah, I’ve played a few games that don’t have incredible graphics but they’re interesting to play. One that comes to mind for me is called Bubble Ball on the iPhone. DOMINIC:  I don’t know that one. CHUCK:  Yeah, the graphics are not really polished. But it’s a puzzle game. So you’re trying to figure out how to position all of your different pieces and elements so that when you release the ball it rebounds off of everything or interacts with the different elements that you have there so that it winds up at the goal. DOMINIC:  Sounds a bit like The Incredible Machine games. Do you know that? CHUCK:  I haven’t seen those. DOMINIC:  They are pretty old, from the 90’s I think, where you had to just get some objects into a goal somewhere and you had to place all these springs and conveyer belts and stuff like that in the game world. CHUCK:  That would be way fun. AJ:  Is it a Rube Goldberg or something like that? [inaudible] DOMINIC:  Yeah, exactly. CHUCK:  Right. So they just give you a bucket of parts and you get to put it all together. DOMINIC:  Yeah. CHUCK:  Yeah, I think that could be fun. JAMISON:  So I wanted to ask another question, too. One problem I see when people start trying to design games is they make them really complex. They’ve maybe played a lot of video games but haven’t really written one before so they’re like, “I’ll have this thing from Halo and we’ll take this thing from StarCraft,” and think of all these triple-A games that have huge teams of hundreds of people and tens of millions of dollars poured into them. Where do you go to get your ideas and how do you make sure that you are creating a game small enough that you can do yourself? DOMINIC:  I think that just comes with experience. The interesting thing about Impact is that at the beginning, it was mostly people from the web development route that were interested in Impact. Not so much game development people but web development people that wanted to build games. And most of these have a programming background and they know how complicated things will get. But occasionally of course, there’s someone who says, “I want to make a game like World of Warcraft, but bigger and with thousands of players on the same screen,” and stuff like that. JAMISON:  [Chuckles] The problem with World of Warcraft is it doesn’t do enough and my game will be better because it’ll do more stuff. DOMINIC:  [Chuckles] Exactly. So what I always tell people is to start really, really small, to build something like Pong at the beginning or to take one of the example games that come with Impact and just implement small ideas. For instance, if you have a jump and run game, you could implement things like teleporting around or trying to get two players working. Maybe you have the same keyboard on the same screen and you have to jump off of each other and stuff like that. It’s quite hard to know how much work everything will be at the beginning. It’s one of the things you have to figure out yourself. But I think you can start small enough. So always, at the beginning, just try to finish something, something really tiny. It doesn’t have to have a lot of levels or tell a story or something. But just try to make something that is fun to play, even if it’s just one screen and takes two minutes to play. JAMISON:  So I also wanted to talk a little bit more about Impact specifically instead of game development in general. Do you have a trial license? Or how do people check out Impact to see if they want to buy it? DOMINIC:  Yeah, that’s complicated. I thought a lot about offering a trial license, but in the end it’s really hard to do. Because if you buy Impact, you get the whole source code for the whole game engine and the level editor with it. And it’s really important for me that you get the source code in a readable form, so not minified or obfuscated, because I want people to look into the code and understand how things are, what is happening and how things work. So I thought about offering a smaller version if Impact as a trial or something. But I’m working alone on this, on the game engine. So I don’t want to have to care about two different products or a dumbed-down version of one product as well. I have a lot of stuff to do with the game engine itself. What I do now is if someone buys the game engine and isn’t happy with it, I just offer a refund. So if you don’t like it, just write me an email and you’ll get your money back. That’s way easier for me to handle than a trial license or something like that. CHUCK:  So have you done much web development? DOMINIC:  I’ve done quite a bit, yes. CHUCK:  So how does writing something like Impact differ from the way that you think about regular web development? DOMINIC:  It differs a lot, I think. What you have to do to write games is you have to get this idea for run loop in your head. A game typically renders 60 frames per second. And all the simulation that’s going on is computed 60 times per second as well. So you have these updates and draw functions that are called 60 times per second for each game object and for each background layer. If you understand this and know how the game loop works, that it’s updated first and then drawn, you get an idea how to build all this. But it’s nothing like classic web development where you have buttons and a callback function when you press this button or something. In Impact, everything is continuously updated with these update and draw functions. So I think it’s closer to native game development than web development is to it. Again, if you’re a JavaScript developer and know the language already, I think you can pick up Impact really fast. The main barrier for writing games is mostly the language, not knowing how writing games in general works, I think. CHUCK:  Huh. The other question I have for you is, I know this is centered or focused around game development, but I’m assuming there are other things you can do with the canvas. Have you seen people use ImpactJS to write things that are not games? DOMINIC:  I think there are some people who wrote some interface stuff with Impact. But Impact is pretty closely tailored to action games. You have this update loop and you want to have stuff moving on the screen all the time. It’s really meant for games. You can write some interface stuff in it and even if you want to, you can make a website for it. I actually had one guy who made his wedding invitation, the background on his wedding invitation website, was an Impact game where you control the bridesmen. [Laughter] JAMISON:  That’s pretty sweet. JOE:  That’s awesome. DOMINIC:  So yeah, I think Impact is really tailored towards games and I wouldn’t recommend writing anything else in it actually. CHUCK:  That’s awesome. JAMISON:  So I’ve been looking at the code a little bit and it looks like you have your own module system where you’d call require and stuff. It looks AMD-ish but it doesn’t look like it is AMD. Is that true? DOMINIC:  Yes, it is. When I started Impact, actually I think RequireJS wasn’t released back then. I invented this module system to have everything loading asynchronously. But in the end, if you want to publish your game, there’s a small script file that you can call on your PC or Mac which combines all these scripts into one big JavaScript file for release on websites. So that’s one of the pain points right now and I want to address this with future versions of Impact to maybe support RequireJS or have the AMD style to make loading of different libraries easier. The module system in Impact works quite well but it’s only useful for Impact and Impact plugins. And if you want to include libraries like this you have to wrap it in this module system. JAMISON:  Sure. DOMINIC:  Of course you can just include JavaScript files on your HTML page as well. But if you want to have it in the module system, you have to wrap it up. JAMISON:  Sure. So is there any part of the engine that has some really interesting technical things to talk about? I have a couple more questions, but I want to see. Is there any cool technical stuff in the engine itself you’d like to talk about? DOMINIC:  Well I think the main, what I really wanted to do with Impact was to have a game engine where you can look behind the curtain, where the game engine is not a black box. I wanted to have something where you can look into it and understand what it does. For instance, if you’re wondering how the collision detection works in Impact, you can just open the entities file and see how entities collide with each other and how the collision is resolved. The source code for Impact is pretty small. There are not that many lines of code. And that’s a design choice. Of course there are quite a few clever tricks going on to work around browser bugs and to make canvas drawing really fast. One thing for instance is if you have a tile map. I don’t know, do you know what a tile map is? JAMISON:  Is it like a CSS spritesheet where you have all your images on one image and you map different parts of it? DOMINIC:  Yeah, exactly. For instance, for Biolab Disaster I had a tile map of a game world for Impact is made up of different tiles. Since you have a tile size of 16 by 16 pixels and you take 16 by 16 pixel tiles from a big tile image, from a big tile sheet and just draw your levels with these tiles. So you have this big map that tells the game where each tile goes in the game world. And what Impact does is to go through this map and draw each tile that is on the screen where it’s supposed to go. And at the beginning, still on mobile browsers, this can be quite slow to go through this map and draw each tile by tile. So if you have 16 by 16 tiles and a screen size of 640 by 480 or something, you’re drawing hundreds of tiles per frame. And to speed this up, I have something in Impact that pre-renders all these background maps into bigger images so that you have just one draw call instead of thousands. And this speeds up stuff for mobile phones tremendously. So that’s one of the clever hacks that are in Impact right now to make it work on slower hardware. JAMISON:  So you pre-compute all of the possible backgrounds and then cache them? I don’t understand how that works. DOMINIC:  Yeah. Basically, yes. So you have this level editor that comes with Impact and you’re just building your level with this by picking the tiles from your tile sheet and painting them on a background. JAMISON:  Oh, okay. That makes sense. DOMINIC:  You have this background map that consists of tiles and instead of drawing each tile by tile on the screen for the game, it is pre-rendered into big [ass] images and this makes it really easy for the browser to draw efficiently. JAMISON:  Okay. DOMINIC:  And this all works transparently in Impact, so you just have to set a flag for your background layer and say I want to have this layer pre-rendered in the game. Impact does all the heavy lifting for you. JAMISON:  I didn’t know there was a level editor with it so I was having a hard time imagining how it could know what to pre-render. But that makes sense. DOMINIC:  Okay. JAMISON:  Another question that came up. You’ve done a lot with mobile browser stuff, obviously. And games, specifically, seem like they push the browsers a little bit. You must have just an in-depth knowledge of all the crazy browser arcana, all the weird stuff that mobile browsers do. How do you figure out, how do you learn that stuff? Do you learn that Safari on iOS 6 does this weird thing with audio so you have to tweak it somehow? Does that make sense? DOMINIC:  Yeah. It’s difficult. I think you learn it by running into it. If you’re wondering why your game doesn’t work or why it doesn’t load audio files, you just have to dig into it and try different stuff and see what works and what doesn’t work. If you’re on the forefront of something, there’s not much documentation that you can rely on. For Impact, I wanted to abstract all the stuff away so you can care about writing the game instead of caring about browser bugs. I only partly succeeded because the audio API is still horrible and basically useless on mobile phones, which is really sad because I don’t see a reason why audio shouldn’t work. It seems so simple. But I guess browser vendors don’t care. [Chuckles] Sometimes it’s really difficult, but it’s getting better. For instance, the canvas drawing performance on iOS 4 was really, really bad. As soon as you resized the canvas element, it was dropped down to two frames per second or something. So you have to care to always draw in the actual screen resolution, which was complicated because of all the retina devices and you had to double the canvas size to still draw on the native resolution. But I fixed this. So now you can just rescale your canvas element with CSS and don’t have any performance issues with it. And mobile phones are getting fast as well, so performance is not that much of a problem anymore than it was two or three years ago. So I’m hopeful. [Chuckles] JAMISON:  Maybe someday you can take some of the browser hacks out. DOMINIC:  Yeah, I’m looking forward to that. For the next major version of Impact I actually want to rewrite the whole audio API stuff that I have in Impact. And there’s this web audio API, the new one, the audio elements which works in Chrome and I think it arrived in Firefox as well. And it’s way better-suited for real-time audio to have responsive sound effects. The audio API that I’m currently using was actually designed for streaming audio. For instance, if you want to listen to a podcast or something, then you would this audio element and it was never intended to do real-time sound effects for games. But the desktop browsers at least do a pretty good job with it right now. So you can have sound effects in desktop browsers that work pretty well. But on mobile phones, it’s still pretty horrible. [Chuckles] CHUCK:  So what’s the testing story with ImpactJS? DOMINIC:  What do you mean? CHUCK:  So if I write a game and I want to write tests for the different entities that I have in the game, is that hard? Does it play nice with things like QUnit or Jasmine? DOMINIC:  I actually have no idea about this. There are a couple of people on the Impact forums that have implemented tests for Impact. And you can read up a bit there. But I have to be honest, I don’t know if it plays well with any of the testing environments. I’m sorry. [Chuckles] CHUCK:  No, it’s okay. JAMISON:  It seems like game development doesn’t have as much of a culture of testing. I’m not into it, so maybe that’s just my outside perception. DOMINIC:  Right. I think you can write unit tests. But mostly for games, you want to test behaviors and how the game actually feels and implementing this in an automated manner is probably quite complicated. I think you really need to have something that can capture the screen contents and analyze it, something like that. Again, I’m not really into that that much. [Chuckles] CHUCK:  Yeah, that makes sense. So if somebody wanted to get started in game development, what recommendations or suggestions would you have for them? Just get started? Or is there more to it than that? DOMINIC:  I think the best way is to take one of the example games or one of the, there are a couple of HTML5 open source games. Pick something small and try to figure out how it works and to implement your own ideas on top of it. That’s one way to do it, to try something really simple like Pong and try to program Pong for a beginning. You will figure out all these basic stuff that you need for every game. So this continues update loop and stuff like that. JAMISON:  I think Pong is the only game I’ve ever written, actually. [Laughter] DOMINIC:  That’s pretty good. JAMISON:  I’m not a game developer. DOMINIC:  You are now. JAMISON:  Well yeah, I guess. I developed Pong. DOMINIC:  So I guess you just have to do it to figure out how it really works and how it all ties together. There are some, for Impact now, some screencasts that you can watch where some of this stuff is explained and how use the level editor. So that’s quite an easy start, I think. But yeah, have a look at example games and figure out how they work and try to change things, even if you just began. If you have a Pong game and you want to make the ball faster, try to do that. Or if you want to have two paddles for each player instead of one, try to implement this. Just little changes and see how this all ties together. JOE:  So what about multiplayer and networking and communication and all that sort of stuff? Does Impact have a lot of stuff built-in to support that or is that all things you’d have to add by hand? DOMINIC:  Again, Impact hasn’t anything built-in for multiplayer right now. That’s one of the things I want to have in the next major version. There are some people on the forums again that build plugins for networking stuff. For instance, for socket I/O, anything over web sockets, you can just load a plugin and to synchronize entities over two or three players. Or have game rooms and let players join and leave. So there are some community solutions right now, but nothing built into Impact. JOE:  Gotcha. DOMINIC:  And I have to say, it’s really hard to get right. If you want to have a game that is networked, and especially for action games, the kind of games you typically build with Impact, you have to have everything in sync with each other. So it’s no fun to, you notice from the old days when you played Counter-Strike or something and you shot at the enemy and you didn’t hit him but it looked like you hit him. So getting everything in sync and make it still fun to play, it’s quite hard to be honest. And web sockets add a bit of delay so you have about a 30 or 50 milliseconds delay to sync everything up. Yeah, it’s still a topic I have to have researched quite a bit for the next version to make this work easily. CHUCK:  Alright, well do you guys have any other questions or are there things about ImpactJS that we didn’t ask about, Dominic, that you want to cover before we wrap up the show? JOE:  How do I instantly change my job into game development and make twice as much money as I’m making right now? [Chuckles] DOMINIC:  That’s confidential. I can’t answer that. [Laughter] JAMISON:  It’s microtransactions. CHUCK:  That’s the thousand dollar ImpactJS package. [Chuckles] JOE:  I’m sure that’s what half the people listening to the podcast would be thinking. I want to go into game development but I want to make more money than I’m making now. CHUCK:  So I can address some of this just because on The Freelancers’ Show we’ve talked a bit about products. And I listen to a lot of people who sell products. The main thing that you have to know is that writing your app is only going to be about 20 to 30% of the work and marketing it, if you want to make a lot of money on it, is going to be 70 to 80% of the work. So if you want to know how to make a lot of money writing your own games, you’re going to have to figure out how to sell it. DOMINIC:  I think I was pretty lucky in that respect. The game I talked earlier about, the typing game, Z-Type, I didn’t do any marketing for it at all. Someone posted it on Reddit and it went to the front page. CHUCK:  Oh, there you go. DOMINIC:  And stayed there for a day and a half. And it has been all over the web since. So I actually don’t know much about marketing. I guess I’m just lucky. [Chuckles] CHUCK:  Yeah, it seems like for every one of those there are hundreds of others that don’t have that kind of exposure just come up. DOMINIC:  Right. But if you want to monetize your Impact games, the easiest thing is to just have an ad banner on the side, like Google AdSense or something. And this worked quite well for me. And if you bundle your game as a native app with Ejecta or CocoonJS, you can use the built-in APIs for the app store for in-app purchases. So if you want to monetize your games and have these in-app purchases, you certainly can, even with HTML5 games. I think that’s probably the best way right now to monetize your games. So because you didn’t have any questions previously, I can tell you something interesting that came up I think two months ago. Nintendo actually approached me and they have for their Wii U a web framework called Nintendo Web Framework which is basically like a WebKit browser that runs on the Wii. You can use this framework to build apps for the Wii U. And they approached me and asked me if I wanted to try using Impact with this. And I tinkered around a bit and gave them a bit of feedback and they updated the framework and made it really fast. So I actually presented a game of mine called X-Type. There are a lot of bullets on the screen and it’s graphically quite impressive I think for HTML5 games. And I have this running on the Wii U game console right now. I’m hoping to bundle everything up and release a plugin for Impact to make Wii U development easier with this. So you have controller support and stuff like that. AJ:  That would be awesome. DOMINIC:  Yeah, it’s quite cool to sit on your couch and play your browser games with a good controller and analog sticks and it’s pretty cool. AJ:  Yeah. I’ve got a Wii U, but I have no idea what to do with it. [Chuckles] JAMISON:  Actually, my company works with the Wii U so it holds a special place in my heart. [Chuckles] JAMISON:  We make the TV app on it. AJ:  Waiting for Mario Kart. [Chuckles] JAMISON:  Well Wind Waker’s out right now. That’s what I’m playing. CHUCK:  I was going to say, holds a special place in your paycheck. [Chuckles] JAMISON:  That too. CHUCK:  Alright, well I think we’re about at the place where we usually stop and do the picks. JOE:  Wait, one other question, one other question. Have you done anything with the Ouya? DOMINIC:  I tried to. Actually, I was one of the Kickstarter backers and I still waited quite a long time for the Ouya. But when it arrived, I was really disappointed with the controllers. They feel like cheap plastic. And it’s difficult to get controller support right now into your browser game. I think CocoonJS is implementing this. But they haven’t released it right now. So I guess it should be working in a month or so. JOE:  Okay. I’ll look forward to that if some web games get on there. DOMINIC:  I hope so. CHUCK:  Alright, well let’s do the picks. AJ, what are your picks? AJ:  I’m going to pick the, there’s this game recorder. It’s supposed to be for PlayStation and Wii U and that kind of stuff. But I tried it out at UtahJS for recording a presentation and it actually worked. I had to get an extra HDMI dongle to make it work with Mac, but it was really simple. Aside from Jamison thought the cabling was really complicated, but now I’ve put all the cables in a shoebox and just draw out the cables that are needed. But if you’re looking for presentation recorders, the ones that I found that are plug and play where you just set the thing down, power it then plug it into the computer and hit record and then it would output to the projector, they’re in the range of $1500 and up. Whereas you can hack this together with an HDMI splitter from EBay and wireless mic for under $300. So this AverMedia Live Gamer Portable is what it’s called. And then the little adapter pieces that go with it. Other than that, I’ll have a diss pick. I hate HDMI. It’s so terrible. Ugh, it requires so many dongles and adapters and things to split out the audio or do really simple stuff. JAMISON:  You’ve just got to get those $700 cables so your bits flow through unmolested. AJ:  Yeah. DOMINIC:  Yeah, they have to be gold-plated. JAMISON:  Exactly. That means your bits are gold-plated then. And everybody wants gold bits. AJ:  There is actually a box that does exactly what I want where you can plug in HDMI and component and composite and get out stereo or whatever it is that you want. Everything just goes into one box and it’s got 10 connections so you could actually hook up all your stuff and have it hooked up to a home theater projector. But it literally is 600 and some odd dollars. That’s all. CHUCK:  Alright. Jamison, what are your picks? JAMISON:  I have two picks. One is a Tumblr called Hot-Dog or Legs. And it’s pictures or either people or hot dogs in a leg-like position. And you can’t tell whether they’re hot dogs or legs. [Chuckles] JAMISON:  It’s pretty much what it says on the tin. CHUCK:  No. [Chuckles] JAMISON:  It’s amazing. I think Chuck just went to it. Yeah, it’s pretty good. And then my second pick is an upcoming game called SOMA Systems. It’s by Frictional Games which are the people that made Penumbra and Amnesia. It’s a horror game. And it’s not out yet, but it has a really SCP feel. If you don’t know what SCP is, it’s the serve, contain, protect wiki. It’s this wiki of all these really creepy sci-fi horror stories. There’s a theme to [them all] but I won’t explain it all here. But it just looks amazing. They’ve got some teaser videos. And it basically looks like SCP: The Game, which would be awesome. So those are my two picks. CHUCK:  Alright. Joe, what are your picks? JOE:  My first pick is going to be the movie Gravity. Went and saw it on Saturday in IMAX 3D. And it was amazing, just absolutely amazing. And if you go see it, you’ve got to go see it in IMAX 3D. It was just a beautiful, beautiful movie. I’m also going to pick the myCUBE. I actually got one as a prize or payment for speaking at a user group and it’s just a little inch and a half by inch and a half cube that’s a portable speaker, little charge battery in it. You can plug it into your iPad or phone to get decent sound. And I just absolutely love that thing. The battery lasts great. It’s really reasonably priced, very portable. I just really enjoy being able to actually hear my phone. If I want to turn on some music on my phone if I’m out somewhere or my iPad, be able to play my iPad and have other people hear it. And it really has a decent volume to it. And my last pick is going to be the new book by Brandon Sanderson called Steelheart. I picked that up a few days ago and I’ve been reading it. I’m about halfway through. It’s been really enjoyable, very great. Super, super, super enjoy that. Haven’t read anything yet of his that I don’t like. So really liked Steelheart. CHUCK:  Nice. Alright, I’ve got a couple of picks. The first one is I’ve been learning Chef and been using it to set up a Rails app and it’s really cool. So I’m going to pick Chef. I’m also going to pick hosted Chef by OpsCode. And there’s a tutorial out there that I followed that I’ve been using to learn it. That’s done by Nathan Harvey on the Food Fight Show. So I’m going to pick that too. And finally, my last pick. I actually when and I got a Pluralsight subscription so I could watch Joe’s AngularJS course on there and it’s really good. So I’m going to pick Joe’s course because it’s awesome. JOE:  Thanks, Chuck. CHUCK:  Yeah, no problem. It really has been helpful for picking up this Angular stuff and I’m really excited to start doing stuff with it. Dominic, what are your picks? DOMINIC:  You put me actually in quite an awkward position here because one of my picks was I mentioned it earlier because you asked clever questions. So first pick was OpenGameArt.org. So this is this website where you can find artwork that you can use in your games free of charge. There’s really good stuff on there. There’s some amateurish art on there as well. But even the stuff that doesn’t look as polished you can use as a basis for you game and work on it. One of Impact’s example games actually uses artwork from this website. The interesting thing is the artwork that I’m using for this demo game is high resolution vector-looking stuff and it’s quite polished. And someone on this website took all those artwork and made a tiny pixel version out of it and it looks really cute. So yeah, OpenGameArt. Pretty amazing website. The second pick I have is a game called Little Big Mansion. Of course, it’s written with Impact. And it’s a puzzle game and a platformer. It’s really a unique and a cool idea. I haven’t seen anything like it before and I think it’s one of the best game ideas since Portal. So go play this. CHUCK:  Cool. Alright, well we’ll go ahead and start wrapping up the show. I do want to mention our silver sponsor, Reg Braithwaite’s JavaScript Allongé. And thank Reg for supporting the show. And AJ has another pick. AJ:  Yeah. So there’s this band called Can’t Stop Won’t Stop and they haven’t gained a lot of popularity. I don’t know why. They’re like 80’s rap but more ska-like. So it’s like a clean, uplifting rap style of music. And then there’s Lindsey Stirling who is this amazing violinist or cellist. I think violinist. Anyway, they came together to put a song together called Come With Us and it’s amazing. I love them both. So if you haven’t checked out Lindsey Stirling or Can’t Stop Won’t Stop, do it. CHUCK:  Alright. Well thanks for coming, Dominic. DOMINIC:  Thanks for having me. CHUCK:  Really appreciate all the feedback and the work that you’ve put in on this. Definitely something I’m going to need to play with. DOMINIC:  Yeah, thank you. JOE:  Yeah, thanks. CHUCK:  Alright. We’ll wrap the show. We’ll catch you all next week.

x