Get $500+ of the best After Effects files, video templates and music for only $20!

Browsing Tag

HTML5

Workshop Coding Challenge: Fix This Breakout Game
tuts workshop

Workshop Coding Challenge: Fix This Breakout Game

It can be tricky to sit down and practise new coding techniques, so here’s a fun exercise to encourage you to play with collision detection and reaction, as covered by Kah Shiu.

Update: I’ve added an HTML5 version to go alongside the existing Flash version – enjoy!

An ImpactJS Overview: Optimization
videos

An ImpactJS Overview: Optimization

In this video I will discus some tips and tricks for optimizing your Impact games and how to get the best performance possible across desktop to mobile. I will cover ways to reduce draw calls, how to set up setting properties for your levels and other important things I have learned through trial and error while building games with Impact.

An ImpactJS Overview: Deployment
videos

An ImpactJS Overview: Deployment

This entry is part 3 of 3 in the series An ImpactJS Overview

Impact is an incredibly powerful HTML5 game framework and one of it’s key advantages is its ability to run on many different platforms such as desktop browsers, mobile browser, as a native iOS or Win 8 Metro app, and on Chrome Market. In this video I will go over how I use Ant to automate building out versions of my game to each of these platforms and some things to keep in mind when you are looking into distributing your own game.

An ImpactJS Overview: Resident Raver
videos

An ImpactJS Overview: Resident Raver

This entry is part 2 of 3 in the series An ImpactJS Overview

In this video I will briefly go over one of my Impact games, how I set up some of the core logic and discuss how Impact’s level editor works. Creating games with Impact is incredibly straight forward but with the tips from this video you will get a sense of what a final game looks like, how it’s organized as well as some helpful tricks when it comes to working with the level editor.

An ImpactJS Overview: Introduction
videos

An ImpactJS Overview: Introduction

This entry is part 1 of 3 in the series An ImpactJS Overview

Impact is an incredibly powerful HTML5 game framework which takes advantage of modern browser’s canvas element and can also run on mobile or be compile into a native iOS app. In this video I will go over the framework, how to set up a project, some background into how to create classes in it and finally go over the core classes that make up the framework. This is a high level overview which will give you a general sense for how things work.

Accessing the Same Saved Data With Separate Flash and JavaScript Apps

Accessing the Same Saved Data With Separate Flash and JavaScript Apps

In this tutorial I will show you how to access the same saved data in separate Flash and JavaScript apps, by storing it in HTML5 LocalStorage and using ExternalInterface to reach it with AS3. We will create the same app in both JavaScript and Flash to demonstrate that it is platform agnostic.

Animating Game Menus and Screen Transitions in HTML5: A Guide for Flash Developers

Animating Game Menus and Screen Transitions in HTML5: A Guide for Flash Developers

HTML5 and Flash development may have a lot in common, but as a Flash developer I’ve still found it to be a monumental task to re-learn my old skills in HTML5. In this tutorial, I’ll show you how I created an animated menu and screen transition for an HTML5 shoot-’em-up game.


This entry is part 10 of 14 in the Shoot-’Em-Up Session
Build an Image Editor With EaselJS, jQuery, and the HTML5 File API – Tuts+ Premium
plus

Build an Image Editor With EaselJS, jQuery, and the HTML5 File API – Tuts+ Premium

In this Premium tutorial, using the HTML5 Canvas and File APIs, we’ll create a full-blown picture editor, with features on par with some desktop applications – including simple transformations like skewing and rotating, and more complicated filters like Gaussian blurring, embossing, and edge detection. For this, we will use the EaselJS library and jQuery.

How to Create an HTML5 Hangman Game With Canvas: Tuts+ Premium
plus

How to Create an HTML5 Hangman Game With Canvas: Tuts+ Premium

This week, we’ve got a two-part Premium tutorial, detailing how to create an HTML5 Hangman game using the HTML5 canvas. You’ll learn how to draw directly to the canvas (both simple shapes and animations using a stylesheet), how to play audio in a way that works on all modern browsers, how to use Local Storage to keep scores that persist even when the browser is closed, and how to implement both keyboard and mouse controls.

oCanvas: A jQuery- and Flash-Style Library for HTML5 Canvas

oCanvas: A jQuery- and Flash-Style Library for HTML5 Canvas

With the advent of tools like Adobe Edge and libraries like EaselJS, more resources are becoming available for developers looking to create interactive HTML5 content. Many of these tools are being geared specifically for Flash developers to make the transition from ActionScript to HTML5 canvas a smooth one. This article will overview oCanvas, an HTML5 library that developers might not only find invaluable but also very easy to use.

Page 1 of 3123