background preloader

HTML5 Games

Facebook Twitter

Austin Hallock's Blog - HTML5 Games: Learning from Mobile and Flash Games. The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.

Austin Hallock's Blog - HTML5 Games: Learning from Mobile and Flash Games

The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company. I just got off the phone with a friend and advisor of mine, Tim Campbell – VP of Third Party Development at GameForge. We spoke a bit on why HTML5 hasn’t completely taken off yet for games, and what needs to happen for that to take place… this got me thinking, so I decided to flesh that out some, and write a blog post about what areas HTML5 games are lacking in.

Given my role at, I see a lot of HTML5 games. In fact, I’d argue I’ve played the majority of HTML5 games – good and bad. The technology for HTML5 games is ready without a question on desktops — I would argue it’s also ready on modern mobile devices (see Strandead), it’s just more difficult to develop for (since good performance is hard to achieve). Easy to Pick Up and Start Playing. Category: Design. Diversity, communication, and Animal Crossing: New Leaf by Christian Nutt [04.02.14] Aya Kyogoku, co-director, and Katsuya Eguchi, producer, sit down and discuss the development of Animal Crossing: New Leaf, and how fostering a diverse, communicative team leads to the best results.

Category: Design

Design, Production, Console/PC, Social/Online What's next for Puzzle & Dragons and GungHo? By Christian Nutt [03.28.14] The president and CEO of GungHo, the studio behind the massive success Puzzle & Dragons, explains his philosophy toward game development, his studio's relationship with Supercell, free-to-play, and more. Business/Marketing, Design, Console/PC, Social/Online, Smartphone/Tablet, Mobile Games Giant Sparrow — Santa Monica, California, United States [04.22.14] Game Designer Blizzard Entertainment — Irvine, California, United States [04.22.14] World of Warcraft - VFX Artist The World of Warcraft team is looking for an animation centric FX artist. Fewer Mechanics, Better Game. I've heard from many people that the ideal game is the one that has everything.

Fewer Mechanics, Better Game

It's a game where players are constrained by nothing. These people believe in a sandbox where their very imagination is the only boundary. They believe in game with no limits. On the surface, this game sounds great. No Tears Guide to HTML5 Games. Introduction So you want to make a game using Canvas and HTML5? Follow along with this tutorial and you'll be on your way in no time. The tutorial assumes at least an intermediate level of knowledge of JavaScript.

You can first play the game or jump directly to the article and view the source code for the game. Creating the canvas In order to draw things, we'll need to create a canvas. Var CANVAS_WIDTH = 480;var CANVAS_HEIGHT = 320; var canvasElement = $("<canvas width='" + CANVAS_WIDTH + "' height='" + CANVAS_HEIGHT + "'></canvas>");var canvas = canvasElement.get(0).getContext("2d"); canvasElement.appendTo('body'); Game loop In order to simulate the appearance of smooth and continuous gameplay, we want to update the game and redraw the screen just faster than the human mind and eye can perceive. var FPS = 30; setInterval(function() { update(); draw();}, 1000/FPS); For now we can leave the update and draw methods blank.

Function update() { ... }function draw() { ... } Hello world Player movement. How To Design A Mobile Game With HTML5. Advertisement Care to make a cross-platform mobile game with HTML5?

How To Design A Mobile Game With HTML5

No need to dabble in Java or Objective-C? Bypass the app stores? Sounds like an instant win! A handful of game developers are pushing the envelope of mobile HTML5 games at the moment. Getting Started Before you start sketching the next Temple Run or Angry Birds, you should be aware of a few things that could dampen your excitement: Performance Mobile browsers are not traditionally known for their blazing JavaScript engines. Now, as a Web developer you’re used to dealing with the quirks of certain browsers and degrading gracefully and dealing with fragmented platforms. In this tutorial, we’ll make a relatively simple game that takes you through the basics and steers you away from pitfalls.

It’s a fairly simple game, in which the user bursts floating bubbles before they reach the top of the screen. We’ll develop this in a number of distinct stages: 1. Enough of the background story. Let’s kick off with a basic HTML shim: 2. Games Articles. Starter for the new HTML5 game developers. DaRaFF/jsgamewiki. HTML5 Game Engines - Find Which is Right For You. Getting Started With HTML5 Game Development. There are plenty of valid ways to create an HTML5 game, and quite a bit of material on the technical aspect of each, so for this article I’ll be giving more of a broad overview of HTML5 game development.

Getting Started With HTML5 Game Development

How “HTML5” can be better than native, where to start with the development process, where to go when you’re stuck, and how to monetize and distribute games. Most of the audience here already sees the value in HTML5, but I want to re-iterate why you should be building an HTML5 game. If you are just targeting iOS for your game, write the game in Objective-C, the cons outweigh the benefits in that scenario… but if you want to build a game that works on a multitude of platforms, HTML5 is the way to go.

Cross-Platform One of the more obvious advantages of HTML5 for games is that the games will work on any modern device. Unique Distribution Most HTML5 games that have been developed to this point are built in the same manner as Flash and native mobile games. Quicker Development Process js13kGames.