Open Source Resources for Web Application Developers

I’m currently spending most of my time explaining to students, hobbyists, professional developers and teachers how to build games using HTML5. I then recently thought: rather than keeping all these details for small audiences, wouldn’t it be smarter to share it with you?

This article is then based on my own experience. I will probably omit some crucial things some of you may know. But it will try to update this blog post along with my own new discovers and of course based on the feedbacks you will kindly provide in the comments or via Twitter.

But why are so many people currently interested in HTML5 Gaming?

Well, simply because today, we can really use HTML5 to target multi-platforms using the same code: for desktop machines of course (with IE9/IE10, Firefox, Chrome, Opera & Safari), for iOS & Android tablets & phones and Windows 8, and its future associated millions of tablets & PC, is also warmly welcoming HTML5 Games! I then frequently see some HTML5 gaming projects ported to each of these platforms with almost no effort.

What’s more, the modern JavaScript engines performance coupled with the GPU hardware-accelerated graphics layers enable us to build great games in HTML5 with confidence.

Note: we will only talk about the <canvas> tag of HTML5 and about SVG in this article.

Canvas & SVG: 2 ways to draw on the screen

The first thing you need to understand before building your first HTML5 game is how to draw nice objects on the screen. There are 2 ways to do that and to better understand their differences, you should start by reading this article from Patrick Dengler (member of the SVG W3C Working Group): Thoughts on when to use Canvas and SVG

On my side, I’ve re-used parts of Patrick’s materials to build a 45min internal session for my Microsoft’s colleagues last year. You can watch it via this video I’ve made (using HTML5 <video> of course!): (more…)

One of the neatest parts about programming is that there’s always something new to learn. And with so much knowledge to absorb you’d literally need a computer chip in your head to remember it all. That’s why it’s a great idea to build up a library of informational programming books.

Whether you’re a complete beginner or just looking to polish off some of the rust, this collection of 8 informational eBooks covers the most important aspects of coding for Web Design. These high-quality bundle from Smashing Magazine will give you the lowdown on HTML and CSS, as well as the most-recent applications for Responsive Web Design and improving your JavaScript and jQuery skills.

This fabulous collection of 8 Smashing eBooks all about Coding for Web Design normally sells for $39.92, but for a limited time only you can get the entire collection for just $24! That’s a 40% discount!

Every app needs controls, such as buttons, check boxes, and drop-down lists. Windows Store apps built for Windows using JavaScript can use two types of controls: intrinsic HTML controls and Windows Library for JavaScript controls. Intrinsic HTML controls are those controls, such as buttons and check boxes, that are a part of the HTML standard.

Here we focus on how to create and use HTML controls. The next topic, Quickstart: Adding WinJS controls and styles, describes how to create and use Windows Library for JavaScript controls.

Prerequisites

We assume that you can create a basic Windows Store app using JavaScript that uses the Windows Library for JavaScript template. For help creating your first app, see Create your first Windows Store app using JavaScript.

What is a control?

In many application programming models, you need a control to display or interact with content. Because most HTML elements are capable of displaying content and responding to a variety of events, the distinction between a control and an element isn’t always clear for Windows Store apps using JavaScript. We refer to elements and objects whose primary purpose is to provide interactivity as controls. For a list of elements and objects that fall into this category, see Controls by function.

Adding an HTML control

You can use any HTML control in your Windows Store app using JavaScript. (more…)

This article recently appeared on BuildNewGames.com, a collaboration by the teams at Bocoup and Internet Explorer. Recently, I released Empty Black, my 2D shooter/puzzler/platformer. In this article, I’ll describe how I made the player movement deft and intuitive. Play the game before you read on, so you’ll know what I’m talking about.

My general approach was to change something, then try it out. I took the ideas for adjustments from several sources.

One. I examined the parameters affecting the movement of the player characters in other 2D platformers. Is the floor slippy? What is the ratio of sideways movement to jump height? Does the character accelerate as it moves? Is the character’s jump height affected by the length of time the player holds the jump button? Is the character slowed when it bumps into a moveable object?

Two. I examined the unusual behaviours of the player characters in other 2D platformers. Super Meat Boy makes the character leap away from the wall automatically when wall-jumping. Spelunky lets the character pull himself up and over ledges. In Castlevania, the character can do an extra jump while in mid-air. Three. I got people to play test. Kemal told me that the character movement should be effortless. Specifically, if the character hits a wall near the top, it should slip up and over. Ricky told me it was weird that the player had no control over the height of the character’s jump. He showed me how, when hopping over an obstacle in a room with a low ceiling, he bumped his head. Ricky also pointed out the jarring effect of the initial slow down of the character when it lands after a jump. Everyone told me that airborne movement was too sensitive. Everyone told me that wall-jumping was too finicky.

Four. I read pieces written by programmers about their character movement algorithms. These pieces were mostly confined to short comments, rather than in-depth analyses. Hence, this article.   (more…)

This article recently appeared on BuildNewGames.com, a collaboration by the teams at Bocoup and Internet Explorer. It has been authorized to be published on WebAppers.

Sprite Fundamentals

I’ve always loved web games; they’re just fun to make, easy to code (mostly), and there’s something really nice about how accessible a game is when the user just has to click a link to start playing.

Ajax and moving dom elements around made for some fun, but limited in what kind of experience you could create. For game developers, things are changing, and quickly. HTML5 is introducing a bunch of new options for game development purely in the browser, and the browser vendors are competing hard to be the best platform for the new standards.

So from a game developer’s perspective everything is going in the right direction: 2D  and 3D hardware-acceleration, high-performance javascript engines, integrated debuggers and profilers, and, probably most importantly, browser vendors who are actively racing to be the best for serious game development.

So the tools are becoming usable, the browsers capable, and the vendors are listening, we can just go make awesome games right? Well, mostly.

HTML5/Javascript game development is still early, and there’s pitfalls to avoid, as well as choices to make on which technology to deploy.

In this article I’ll run through some of the choices to be made developing 2D games, and hopefully give you some ideas for developing your own games using HTML5.

(more…)

Photoshop can do some magical things. By combining all sorts of tools, you can literally make thousands of variations to a single photo. And with Photoshop action sets, you can do it all with pretty much just a click.

If you’re looking for a ton of new creativity to add to your Photoshop toolbox, then have we got the Mighty Deal for you! From PhotographyPla.net comes a massive Photoshop Action Set Bundle!

You’ll get 14 premium Photoshop action sets for a total of 205 individual actions. This bundle includes the following actions: Fashion, Autumn, Vintage, Sunset & Sunrise, Black & White, Faded & Hazy, Light Leaks, Monochromatic, and more. The actions in this bundle require Photoshop CS4, CS5, or CS6.

These high-quality action sets normally cost $238 when purchased individually, but for a limited time only, you can get the entire bundle of 205 actions for just $17!

The Windows Library for JavaScript provides a set of new controls designed for Windows Store apps using JavaScript, such as the WinJS.UI.DatePicker, WinJS.UI.FlipView, WinjS.UI.ListView, and WinJS.UI.Rating controls. It also includes two style sheets (one with a dark color scheme and one with a light) that give your app the look and feel of Windows 8.

Prerequisites

• We assume that you can create a basic Windows Store app built for Windows using JavaScript that uses the Windows Library for JavaScript template. For help creating your first app, see Create your first Windows Store app using JavaScript.
• We assume that you know how to handle events in a Windows Store app using JavaScript. To learn the recommended way to handle events, see Quickstart: adding HTML controls and handling events.

What is the Windows Library for JavaScript?

The Windows Library for JavaScript is a library of CSS and JavaScript files. It contains JavaScript objects, organized into namespaces, designed to make developing Windows Store app using JavaScript easier. Windows Library for JavaScript includes objects that help you handle activation, access storage, and define your own classes and namespaces. It also includes a set of controls: (more…)

Jongmin Kim worked as a senior interactive designer / developer for over six years in South Korea. He has received multiple awards, including the Red Dot award, the IF award, the FWA award and the Webby award.

He always tries to “pursue a minus design rather than plus designs” and keeps in mind that “form follows function.” His style is minimal and clean, using the golden ratio and interesting typography. Form Follows Function is a collection of interactive experiences. Each experience has its own unqiue design and functionality. All the experiences are created in HTML5, the site works beautifully on both desktop and tablet.

Source: http://fff.cmiscm.com/

HTML5 features in modern browsers like Internet Explorer 10 make possible a whole new class of Web applications and gaming scenarios. This two-part article demonstrates how I’ve used some of these new features to modernize my last HTML5 game, HTML5 Platformer. In Part 1 of this article, I covered how to use CSS3 3D Transform, Transitions, and Grid Layout. In this article, I’ll show you how to use the offline, drag-and-drop and file APIs to implement some interesting new ideas.

Playing a Game in Offline Mode

The original version of my game worked only if your device was currently connected to the Internet. If you wanted to play to my fabulous game while you were on the train, in a taxi, or somewhere else without an Internet connection, you were out of luck—stuck without access to the awesomeness. And that’s too bad, because there really isn’t anything in my game that needs a live connection to the Web server once all the resources have been downloaded. Fortunately, offline APIs provide a solution for this in HTML5.

(more…)