Index

Found 73 pages:

#	Page	Tags and summary
1	Game development	Apps, Game Development, Gamedev, Games, HTML5 Games, JavaScript Games, Web
		Gaming is one of the most popular computer activities. New technologies are constantly arriving to make it possible to develop better and more powerful games that can be run in any standards-compliant web browser.
2	Anatomy of a video game	Games, JavaScript, Loop, requestAnimationFrame
		I want to be clear that any of the above, or none of them, could be best for your game. The correct decision entirely depends on the trade-offs that you are willing (and unwilling) to make. The concern is mostly with switching to another option. Fortunately, I do not have any experience with this but I have heard it is an excruciating game of Whack-a-Mole.
3	Examples	Demos, Examples, Games, Web
		This page lists a number of impressive web technology demos for you to get inspiration from, and generally have fun with. A testament to what can be done with JavaScript, WebGL, and related technologies. The first two sections list playable games, while the second is a catch-all area to list demos that aren't necessarily interactive/games.
4	Index	Meta
		Found 73 pages:
5	Introduction to HTML5 Game Development (summary)	Firefox OS, Games, HTML5, Mobile
		Games built with HTML5 work on smartphones, tablets, PCs and Smart TVs.
6	Introduction to game development for the Web	Firefox OS, Games, Guide, Mobile
		The modern Web has quickly become a viable platform not only for creating stunning, high quality games, but more importantly for distributing those games.
7	Publishing games	Games, HTML5, JavaScript, Monetization, Promotion, distribution, publishing
		This series of articles looks at the options you have when you want to publish and distribute your game, and earn something out of it while you wait for it to become famous.
8	Game distribution	Games, HTML5, JavaScript, Tools, distribution
		Distribution is the way to give the world access to your game. There are many options available and there's no single good answer as to which is the best. When you've published the game it's time to focus on promotion — letting people know your game exists. Without promotion they wouldn't even be able to learn about it and play it.
9	Game monetization	Games, HTML5, JavaScript, Monetization, advertisements, branding, iap, licensing
		There are many ways to earn money — everything that applies to the "normal" AAA gaming world can be, more or less, applied to casual HTML5 games. You might however also focus on selling licenses, doing branding, or earning on a revenue share basis from the advertisements. It's totally up to you which path you're going to follow.
10	Game promotion	Community, Games, JavaScript, Promotion, blog, competitions, promotion, youtube
		Any way of promoting your game is good. You have a whole lot of options to chose from with most of them being free, so it's only about your enthusiasm and available time. Sometimes you have to spend more time promoting a game than actually developing it. Remember that it's no use to have the best game in the world if no one knows it exists.
11	Techniques for game development	Games, Guide
		This page lists essential core techniques for anyone wanting to develop games using open web technologies.
12	2D collision detection	2D, Games, JavaScript, collision detection
		One of the simpler forms of collision detection is between two rectangles that are axis aligned — meaning no rotation. The algorithm works by ensuring there is no gap between any of the 4 sides of the rectangles. Any gap means a collision does not exist.
13	3D collision detection	3D, Games, JavaScript, bounding boxes, collision detection
		This article provides an introduction to the different bounding volume techniques used to implement collision detection in 3D environments. Followup articles will cover implementations in specific 3D libraries.
14	Bounding volume collision detection with THREE.js	3D, Games, JavaScript, WebGL, bounding boxes, collision detection, three.js
		This article shows how to implement collision detection between bounding boxes and spheres using the Three.js library. It is assumed that before reading this you have read our 3D collision detection introductory article first, and have basic knowledge about Three.js.
15	3D games on the Web	Games, Graphics, NeedsContent, NeedsExample, WebGL, WebVR, three.js
		For rich gaming experiences on the Web the weapon of choice is WebGL, which is rendered on HTML <canvas>. WebGL is basically an OpenGL ES 2.0 for the Web — it's a JavaScript API providing tools to build rich interactive animations and of course also games. You can generate and render dynamic 3D graphics with JavaScript that is hardware accelerated.
16	Building up a basic demo with A-Frame	3D, A-Frame, VR, Virtual Reality, Web, WebGL
		The WebVR and WebGL APIs already enable us to start creating virtual reality (VR) experiences inside web browsers, but the community is still waiting for tools and libraries to appear, to make this easier. Mozilla's A-Frame framework provides a markup language allowing us to build 3D VR landscapes using a system familiar to web developers, which follows game development coding principles: this is useful for quickly and successfully building prototypes and demos, without having to write a lot of JavaScript or GLSL. This article explains how to get up and running with A-Frame, and how to use it to build up a simple demo.
17	Building up a basic demo with Babylon.js	3D game engines, Babylon.js, Beginner, WebGL, babylon.js, beginner
		Babylon.js is one of the most popular 3D game engines used by developers. As with any other 3D library it provides built-in functions to help you implement common 3D functionality more quickly. In this article we'll take you through the real basics of using Babylon.js, including setting up a development environment, structuring the necessary HTML, and writing the JavaScript code.
18	Building up a basic demo with PlayCanvas	3D, Animation, Beginner, Camera, Canvas, Games, PlayCanvas, Tutorial, WebGL, camera, lighting, rendering
		Of course it depends on your approach — designers may favor the online editor while programmers will prefer having the full control over the coding environment and will probably use the engine's source files. The good thing is that you have a choice and can pick whatever tools suits you best.
19	Building up a basic demo with PlayCanvas editor	3D, Animation, Beginner, Canvas, Games, Lightning, Online, PlayCanvas, Tutorial, WebGL, camera, editor, rendering
		Now you can check the PlayCanvas engine article if you haven't seen it yet, go back to the Building up a basic demo with PlayCanvas page, or go back a level higher to the main 3D Games on the Web page.
20	Building up a basic demo with the PlayCanvas engine	3D, Animation, Beginner, Canvas, Games, PlayCanvas, Tutorial, WebGL, camera, engine, lighting, rendering
		Now you can continue reading the PlayCanvas editor article, go back to the Building up a basic demo with PlayCanvas page, or go back a level higher to the main 3D Games on the Web page.
21	Building up a basic demo with Three.js	3D, Animation, Beginner, Camera, Canvas, Games, Tutorial, WebGL, beginner, camera, lighting, rendering, three.js
		In this article we'll take you through the real basics of using Three, including setting up a development environment, structuring the necessary HTML, the fundamental objects of Three, and how to build up a basic demo.
22	Building up a basic demo with Whitestorm.js	3D, Advanced, Animation, Beginner, Canvas, Games, Graphic, JavaScript, Tutori, WebGL, beginner, physics, three.js, whitestorm.js
		Whitestorm.js is a framework built on the top of Three.js technology, enhanced by features such as a built-in Physics engine — a modified Physi.js that acts as a wrapper around Ammo.js (Bullet Physics ported to JavaScript) with usage of web-workers technology — and a  plugin system providing useful modularity. In this article we show how you can get started with Whitestorm.js.
23	Explaining basic 3D theory	3D, Coordinates, Textures, basics, fragment, lighting, primitives, rendering, theory, vertex, vertices
		This article explains all of the basic theory that's useful to know when you are getting started working with 3D.
24	GLSL Shaders	Beginner, GLSL, OpenGL, Shader, WebGL, beginner, texture shader, three.js, vertex shader
		Shaders use GLSL, a special OpenGL shading language with syntax similar to C, which is executed directly by the graphics pipeline. There are two types — Vertex Shaders and Fragment Shaders (or Pixel Shaders) — the former transforms shape positions to real 3D drawing coordinates while the latter computes rendering colors and other attributes.
25	WebVR — Virtual Reality for the Web	3D, Games, WebGL, WebVR
		The concept of virtual reality in itself isn't new, but now we have the technology to have it working as it should be, and a JavaScript API to make use of it in web applications. This article introduced WebVR from the perspective of its use in games.
26	Async scripts for asm.js	Games, JavaScript, asm.js, async
		Editorial review completed.
27	Audio for Web games	Audio, Games, Web Audio API, audio sprites
		By far the most difficult platforms to provide web audio support for are mobile platforms. Unfortunately these are also the platforms that people often use to play games. There are a couple of differences between desktop and mobile browsers that may have caused browser vendors to make choices that can make web audio difficult for game developers to work with. Let's look at these now.
28	Crisp pixel art look with image-rendering	2D, 3D, CSS, Canvas, Games, JavaScript, WebGL, canvas, image-rendering, pixel
		This article discusses a useful technique for giving your canvas/WebGL games a crisp pixel art look, even on high definition monitors.
29	Efficient animation for web games	Animation, Games, JavaScript
		This article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. We touch on CSS transitions and CSS animations, and JavaScript loops involving window.requestAnimationFrame.
30	Implementing controls using the Gamepad API	Controls, Gamepad API, Gamepads, Games, JavaScript, controllers
		The Gamepad API is very easy to develop with. Now it's easier than ever to deliver console-like experience to the browser without the need of any plugins. You can play the full version of the Hungry Fridge game directly in your browser, install it from the Firefox Marketplace or check the source code of the demo along with all the other resources on the Gamepad API Content Kit.
31	Implementing game control mechanisms	Controls, Desktop, Gamepad, Games, JavaScript, Laptop, Mobile, keyboard, mouse, touch
		One of HTML5's main advantages as a game development platform is the ability to run on various platforms and devices. Streamlining cross device differences creates multiple challenges, not least when providing appropriate controls for different contexts. In this series of articles we will show you how you can approach building a game that can be played using touchscreen smartphones, mouse and keyboard, and also less common mechanisms such as gamepads.
32	Desktop gamepad controls	Controls, Desktop, Gamepad API, Gamepads, Games, JavaScript, controllers
		That's it! We have successfully implemented gamepad controls in our game — try connecting any popular controller like the XBox 360 one and see for yourself how fun it is to avoid the asteroids and shoot the aliens with a gamepad.
33	Desktop mouse and keyboard controls	Controls, Desktop, Games, JavaScript, keyboard, mouse
		Ok, we've dealt with touch, keyboard and mouse controls. Now let's move on to look at how to set up the game to  be controlled using a console gamepad, using the Gamepad API.
34	Mobile touch controls	Controls, Games, JavaScript, Mobile, pointer, touch
		That covers adding touch controls for mobile; in the next article we'll see how to add keyboard and mouse support.
35	Unconventional controls	Controls, Doppler, Games, JavaScript, Makey Makey, Proximity, TV Leap Motion, Voice
		I hope you liked the experiments — if you have any others that you think might interest other people, feel free to add details of them here.
36	Tiles and tilemaps overview	2D, Canvas, Games, JavaScript, Static, WebGL, canvas, tilemap, tiles
		Tilemaps are a very popular technique in 2D game development, consisting of building the game world or level map out of small, regular-shaped images called tiles. This results in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times. This set of articles covers the basics of creating tile maps using JavaScript and Canvas (although the same high level techniques could be used in any programming language.)
37	Square tilemaps implementation: Scrolling maps	Canvas, Games, JavaScript, atlas, scrolling, spritesheet, tilemap, tiles
		This article covers how to implement scrolling square tilemaps using the Canvas API.
38	Square tilemaps implementation: Static maps	Canvas, Games, JavaScript, Static, atlas, spritesheet, tilemap, tilemaps, tiles
		This article covers how to implement static square tilemaps using the Canvas API.
39	WebRTC data channels	API, Games, NeedsContent, Network, P2P, WebRTC, data channels
		The WebRTC (Web Real-Time Communications) API is primarily known for its support for audio and video communications; however, it also offers peer-to-peer data channels. This article explains more about this, and shows you how to use libraries to implement data channels in your game.
40	Tools for game development	Games, Gecko, Guide, JavaScript
		On this page you can find links to our game development tools articles, which eventually aims to cover frameworks, compilers, and debugging tools.
41	Game engines and tools	Apps, Engines, Games, HTML5, JavaScript, Tools
		The following are game engines implemented with HTML5 and JavaScript:
42	asm.js	JavaScript, asm.js
		Asm.js is a specification defining a subset of JavaScript that is highly optimizable. This article looks at exactly what is permitted in the asm.js subset, what improvements it confers, where and how you can make use of it, and further resources and examples.
43	Tutorials	Canvas, Games, JavaScript, Web, Workflows, canvas
		This page contains multiple tutorial series that highlight different workflows for effectively creating different types of web games.
44	2D breakout game using Phaser	2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas
		In this step-by-step tutorial we create a simple mobile MDN Breakout game written in JavaScript, using the Phaser framework.
45	Animations and tweens	2D, Animation, Beginner, Canvas, Games, JavaScript, Javascript, Phaser, Tutorial, animation, beginner, canvas, javascript, tween
		To make the game look more juicy and alive we can use animations and tweens. This will result in a better, more entertaining experience. Let's explore how to implement Phaser animations and tweens in our game.
46	Bounce off the walls	2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, bouncing, canvas
		Now that physics have been introduced, we can start implementing collision detection into the game — first we'll look at the walls.
47	Build the brick field	2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas
		Building the brick field is a little bit more complicated than adding a single object to the screen, although It's still easier with Phaser than in pure JavaScript. Let's explore how to create a group of bricks and print them on screen using a loop.
48	Buttons	2D, Beginner, Buttons, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, buttons, canvas
		Instead of starting the game right away we can leave that decision to the player by adding a Start button they can press. Let's investigate how to do that.
49	Collision detection	2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas, collision detection
		Now onto the next challenge — the collision detection between the ball and the bricks. Luckily enough we can use the physics engine to check collisions not only between single objects (like the ball and the paddle), but also between an object and the group.
50	Extra lives	2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas, lives
		We can make the game enjoyable for longer by adding lives. In this article we'll implement a lives system, so that the player can continue playing until they have lost three lives, not just one.
51	Game over	2D, Beginner, Canvas, Game Over, Games, JavaScript, Phaser, Tutorial, beginner, canvas, game over
		To make the game more interesting we can introduce the ability to lose — if you don't hit the ball before it reaches the bottom edge of the screen it will be game over.
52	Initialize the framework	2D, Beginner, Canvas, Games, HTML, JavaScript, Phaser, Tutorial, beginner, canvas
		Before we can start writing the game's functionality, we need to create a basic structure to render the game inside. This can be done using HTML — the Phaser framework will generate the required <canvas> element.
53	Load the assets and print them on screen	2D, Beginner, Canvas, Games, JavaScript, Phaser, Sprites, Tutorial, beginner, canvas
		Our game will feature a ball rolling around the screen, bouncing off a paddle, and destroying bricks to earn points — familiar huh? In this article we'll look at how to add sprites into our gameworld.
54	Move the ball	2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas, moving
		We have our blue ball printed on screen, but it's doing nothing — It would be cool to make it move somehow. This article covers how to do just that.
55	Physics	2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas, physics
		For proper collision detection between objects in our game we will need to have physics; this article introduces you to what's available in Phaser, as well as demonstrating a typical simple setup.
56	Player paddle and controls	2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas
		We have the ball moving and bouncing off the walls, but it quickly gets boring — there's no interactivity! We need a way to introduce gameplay, so in this article we'll create a paddle to move around and hit the ball with.
57	Randomizing gameplay	2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas
		You've finished all the lessons — congratulations! By this point you would have learnt the basics of Phaser and the logic behind simple 2D games.
58	Scaling	2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas
		Scaling refers to have the game canvas will scale on different screen sizes. We can make the game scale to fit on any screen size automatically during the preload stage, so we don't have to worry about it later.
59	The score	2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas, scoring
		Having a score can also make the game more interesting — you can try to beat your own highscore, or your friend's. In this article we'll add a scoring system to our game.
60	Win the game	2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas, winning
		Implementing winning in our game is quite easy: if you happen to destroy all the bricks, then you win.
61	2D breakout game using pure JavaScript	2D, Beginner, Canvas, Games, JavaScript, Tutorial, beginner, canvas
		In this step-by-step tutorial we create a simple MDN Breakout game written entirely in pure JavaScript and rendered on HTML5 <canvas>.
62	Bounce off the walls	Animation, Beginner, Canvas, Example, Games, Graphics, Tutorial, collision, detection
		Technical review completed. Editorial review completed.
63	Build the brick field	Beginner, Canvas, Games, Graphics, JavaScript, Tutorial, beginner, canvas
		After modifying the gameplay mechanics, we are now able to lose — this is great as it means the game is finally feeling more like a game. However, it will quickly get boring if all you do is bounce the ball off the walls and the paddle. What a breakout game really needs is some bricks to destroy with the ball, and this is what we'll create now!
64	Collision detection	Beginner, Canvas, Games, JavaScript, Tutorial, beginner, canvas, collision, detection
		We have the bricks appearing on the screen already, but the game still isn't that interesting as the ball goes through them. We need to think about adding collision detection so it can bounce off the bricks and break them.
65	Create the Canvas and draw on it	2D, Beginner, Canvas, Games, HTML, JavaScript, Tutorial
		Before we can start writing the game's functionality, we need to create a basic structure to render the game inside. This can be done using HTML and the <canvas> element.
66	Finishing up	Beginner, Canvas, Games, JavaScript, Tutorial, beginner, canvas, lives, requestAnimationFrame
		There's always a room for improvements in any game we write. For example, we can offer more than one life to the player. They could make a mistake or two and still be able to finish the game. We could also improve our code rendering.
67	Game over	Beginner, Canvas, Games, Graphics, JavaScript, Tutorial, beginner, canvas, game over
		It's fun to watch the ball bouncing off the walls and be able to move the paddle around, but other than that the game does nothing and doesn't have any progression or end goal. It would be good from the gameplay point of view to be able to lose. The logic behind losing in breakout is simple. If you miss the ball with the paddle and let it reach the bottom edge of the screen, then it's game over.
68	Mouse controls	Beginner, Canvas, Controls, Games, JavaScript, Tutorial, beginner, canvas, mouse
		The game itself is actually finished, so let's work on polishing it up. We have already added keyboard controls, but we could easily add mouse controls too.
69	Move the ball	2D, Beginner, Canvas, Games, JavaScript, Loop, Tutorial, beginner, canvas, movement
		You already know how to draw a ball from working through the previous article, so now let's make it move. Technically, we will be painting the ball on the screen, clearing it and then painting it again in a slightly different position every frame to make the impression of movement — just like how movement works with the movies.
70	Paddle and keyboard controls	Beginner, Canvas, Controls, Games, Graphics, JavaScript, Tutorial, beginner, canvas, keyboard
		Technical review completed.
71	Track the score and win	Beginner, Canvas, Games, JavaScript, Tutorial, beginner, canvas, scoring, winning
		Destroying the bricks is really cool, but to be even more awesome the game could award points for every brick a user hits, and keep count of the total score.
72	2D maze game with device orientation	Canvas, Device Orientation API, Game Development, HTML5, Phaser, Vibration API
		I hope this tutorial will help you dive into 2D game development and inspire you to create awesome games on your own. You can play the demo game Cyber Orb and check out its source code on GitHub.
73	Touch Event Horizon	NeedsContent, NeedsExample
		Editorial review completed.