Articles - Build New Games

<!DOCTYPE html> <html lang="en" class="page"> <head> <meta charset="utf-8"> <title>Articles - Build New Games</title> <meta name="author" content="Bocoup"> <meta name="description" content="Creating a 3D game with Three.js and WebGL Jul 24th, 2013 | Nikhil Suresh In order to learn the basics of Three.js and its use in 3D games, we will …">  <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="canonical" href="http://buildnewgames.com/articles"> <link href="/favicon.png" rel="icon"> <link href="/assets/css/reset.css" media="screen, projection" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="assets/css/factory.css">  <link href="/assets/css/fonts.css" media="screen, projection" rel="stylesheet" type="text/css">  <link href="/assets/css/base.css" media="screen, projection" rel="stylesheet" type="text/css">  <link href="/assets/css/screen-medium.css" rel="stylesheet" type="text/css"> <link href="/atom.xml" rel="alternate" title="Build New Games" type="application/atom+xml">  </head> <body class="clearfix "> <banner> <header id="header"> <a href="/" class="bng-logo"> <img src="/images/bng-logo.png" alt="BNG"> </a> <nav class="large-nav"> <ul> <li><a href="/articles/">Articles</a></li> <li><a href="/authors/">Authors</a></li> <li><a href="/about/">About</a></li> </ul> </nav> <div class="home-page-info"> <h1><a href="/">Build New Games</a></h1> Open Web techniques for cutting-edge game development </div> </header> <h2 class="page-title medium">Articles</h2> </banner> <aside class="category-list medium"> <h2>Topics</h2> <ul> <li><a class='category' href='/blog/categories/design/'>Design</a></li> <li><a class='category' href='/blog/categories/engines/'>Engines</a></li> <li><a class='category' href='/blog/categories/graphics/'>Graphics</a></li> <li><a class='category' href='/blog/categories/javascript/'>JavaScript</a></li> <li><a class='category' href='/blog/categories/mobile/'>Mobile</a></li> <li><a class='category' href='/blog/categories/multiplayer/'>Multiplayer</a></li> <li><a class='category' href='/blog/categories/platform/'>Platform</a></li> </ul> <div class="advertisement"> <script type='text/javascript'></script><noscript><a href='http://revive.bocoup.com/www/delivery/ck.php?n=a23a1951&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://revive.bocoup.com/www/delivery/avw.php?zoneid=6&cb=INSERT_RANDOM_NUMBER_HERE&n=a23a1951' border='0' alt='' /></a></noscript> Ads by <a href="http://bocoup.com">Bocoup</a> </div> </aside> <section id="main" class="page"> <ul class="article-list"> <li> <a href="/webgl-threejs/">Creating a 3D game with Three.js and WebGL</a> Jul 24th, 2013 | Nikhil Suresh <a href="/webgl-threejs/"> <img class="article-preview-image" src="/images/article-previews/threejs-webgl-pong.png" alt=""> </a> In order to learn the basics of Three.js and its use in 3D games, we will be creating a simple Pong clone with basic materials, lights and shadows. This will also cover some of the basic logic code required for a functional Pong game. </li> <li> <a href="/simulating-natural-systems/">Simulating Natural Systems in a Web Browser</a> Jul 16th, 2013 | Vince Allen <a href="/simulating-natural-systems/"> <img class="article-preview-image" src="/images/article-previews/simulating-natural-systems.jpg" alt=""> </a> My feline QA team was hard at work batting down digital fireflies while I thought about the threshold of belief. What were the compelling qualities of the system I created that convinced her these targets were real enough to attack? </li> <li> <a href="/making-games-fun/">Making Games Fun</a> Jun 5th, 2013 | Burak Kanber <a href="/making-games-fun/"> <img class="article-preview-image" src="/images/article-previews/making-games-fun.jpg" alt=""> </a> There are surprisingly few people studying the fun of video games, considering the market size and broad applications of the ability to make things fun. But the (growing) few who have studied this have certainly come up with interesting observations. </li> <li> <a href="/vector-field-collision-avoidance/">Vector Field Obstacle Avoidance</a> May 31st, 2013 | Alexander Sutherland <a href="/vector-field-collision-avoidance/"> <img class="article-preview-image" src="/images/article-previews/vector-field-obstacle-avoidance.png" alt=""> </a> This technique provides realistic, seemingly “intelligent” behaviors in a wide class of games with very simple and highly reusable code. </li> <li> <a href="/introduction-to-crafty/">An introduction to the Crafty game engine</a> Feb 1st, 2013 | Darren Torpey <a href="/introduction-to-crafty/"> <img class="article-preview-image" src="/images/article-previews/introduction-to-crafty.png" alt=""> </a> This tutorial introduces the core components of the Crafty game engine and walks you through the process of creating a simple adventure game. </li> <li> <a href="/astar/">A-STAR Pathfinding AI for HTML5 Canvas Games</a> Jan 31st, 2013 | Christer Kaitila <a href="/astar/"> <img class="article-preview-image" src="/images/article-previews/astar.png" alt=""> </a> Knowing how to get from point A to point B is something many games require. Whether you’re designing a deep turn-based strategy tactics RPG or a simple puzzle game, navigating your game world often requires more intelligence from your game characters than merely pointing towards a goal and moving in a straight line. </li> <li> <a href="/game-engine-comparison/">JavaScript Game Engine Comparison</a> Jan 30th, 2013 | Matt Greer <a href="/game-engine-comparison/"> <img class="article-preview-image" src="/images/article-previews/game-engine-comparison.png" alt=""> </a> Deciding on which game engine to go with can be tough these days. This article explores three popular JavaScript game engines, their pros and cons, and discusses some things to consider when shopping around </li> <li> <a href="/lighting/">Introduction to Lighting in Games</a> Dec 4th, 2012 | Chandler Prall <a href="/lighting/"> <img class="article-preview-image" src="/images/article-previews/lighting.png" alt=""> </a> Lighting is a topic which merits an in-depth study all on its own; most artists spend years mastering the subtleties of light and color. This article will introduce you to the key concepts of light in computer graphics and how to use it effectively. </li> <li> <a href="/box2dweb/">Making Games with Box2dWeb</a> Nov 28th, 2012 | Pascal Rettig <a href="/box2dweb/"> <img class="article-preview-image" src="/images/article-previews/box2dweb.png" alt=""> </a> If all you need is to calculate when a couple of rectangles overlap, it’s not a big deal, but for games that involve lots of irregularly shaped sprites moving and reacting to each other realistically, you’ll want to use an industrial strength tool to get the job done. </li> <li> <a href="/particle-systems/">Particle Systems From the Ground Up</a> Nov 21st, 2012 | Matt Greer <a href="/particle-systems/"> <img class="article-preview-image" src="/images/article-previews/particle-systems.png" alt=""> </a> Particle systems are a simple way to accomplish many great visual effects in your game. We’ll create a very naive particle system to show the basic concepts behind them, then dive deep into features commonly found in more advanced particle systems </li> <li> <a href="/dom-sprites/">DOM Sprites: a Viable Alternative to Canvas</a> Nov 16th, 2012 | Christer Kaitila <a href="/dom-sprites/"> <img class="article-preview-image" src="/images/article-previews/dom-sprites.jpg" alt=""> </a> Today we’re going to look at an alternative to the CANVAS tag which works great for HTML5 games. The best part? It is easy to implement, and works everywhere! It even runs well on mobile devices - sometimes faster than canvas by a long shot. </li> <li> <a href="/compiling-to-javascript/">Compiling to JavaScript: What, Why, and How?</a> Nov 13th, 2012 | André Rieussec <a href="/compiling-to-javascript/"> <img class="article-preview-image" src="/images/article-previews/compiling-to-javascript.png" alt=""> </a> As more and more companies jump onto the HTML5 bandwagon, the JavaScript part of their applications gains in complexity and developers have started feeling some growing pains. So some people have started to bridge the gap. </li> <li> <a href="/team-snake/">Team Snake: A Post Mortem</a> Nov 12th, 2012 | Darius Kazemi <a href="/team-snake/"> <img class="article-preview-image" src="/images/article-previews/teamsnake.png" alt=""> </a> This article looks at the development of Team Snake, a rapidly developed multiplayer game designed to be played in a large lecture hall using mobile devices as game controllers. </li> <li> <a href="/gamephysics/">How Physics Engines Work</a> Nov 8th, 2012 | Burak Kanber <a href="/gamephysics/"> <img class="article-preview-image" src="/images/article-previews/gamephysics.png" alt=""> </a> This article will guide you through the essential physics of game engines. My goal is to point you in the right direction and teach the concepts that you’ll need to build upon later. The next step is up to you. I hope you’ll use this article as a springboard and go write your own game engine, researching advanced concepts in the process. </li> <li> <a href="/2d-platformer-character-movement/">Deft and intuitive player character movement in a 2D platformer</a> Oct 18th, 2012 | Mary Rose Cook <a href="/2d-platformer-character-movement/"> <img class="article-preview-image" src="/images/article-previews/2d-platformer-character-movement.png" alt=""> </a> 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. My general approach was to change something, then try it out. I took the ideas for adjustments from several sources. </li> <li> <a href="/broad-phase-collision-detection/">Broad Phase Collision Detection Using Spatial Partitioning</a> Oct 8th, 2012 | Andrew Petersen <a href="/broad-phase-collision-detection/"> <img class="article-preview-image" src="/images/article-previews/broad-phase-collision-detection.png" alt=""> </a> This article focuses on two approaches to broad phase detection of collisions. The first is a brute force method that, while simple, quickly becomes wildly inefficient at typical game entity counts. The second is a form of spatial partitioning called a spatial grid. It is relatively simple, yet handles large numbers of game entities efficiently. </li> <li> <a href="/a-study-in-adaptive-game-design/">A Study in Adaptive Game Design</a> Oct 2nd, 2012 | Jack Lawson You can take 50% of the market with desktops, you can take 50% of the smartphone market with iOS and Android apps, or you can provide an experience that is engaging to consumers with top-end and low-end equipment alike. </li> <li> <a href="/game-asset-management/">Asset Management for Web Games</a> Oct 1st, 2012 | Chandler Prall <a href="/game-asset-management/"> <img class="article-preview-image" src="/images/article-previews/cache.png" alt=""> </a> How to package and compress all of the data necessary for web sites has been addressed countless times, but the sheer volume of content in games emphasizes the lag we see between opening a game and being able to play it. </li> <li> <a href="/optimizing-websockets-bandwidth/">Optimizing WebSockets Bandwidth</a> Sep 20th, 2012 | Eric Li Like a snake in tall grass, bandwidth costs can seemingly come from nowhere. This article discusses the oft overlooked cost of network bandwidth and techniques for minimizing it. </li> <li> <a href="/physics-engines-comparison/">JavaScript Physics Engines Comparison</a> Aug 10th, 2012 | Chandler Prall <a href="/physics-engines-comparison/"> <img class="article-preview-image" src="/images/article-previews/physics-comparison.png" alt=""> </a> In this article we will take a look at three popular Javascript physics libraries and one that is currently in development: box2dweb, Ammo.js, JigLibJS, and Cannon.js. For each one, a quick introduction will be given and then the library will be rated based on ease of use, performance, and feature set. </li> <li> <a href="/console-experience-on-the-web/">Getting a Console Experience on the Web</a> Aug 8th, 2012 | Nikhil Suresh In this article I will be discussing 3 main features of traditional gaming systems, and compare them with the offerings of the open web, and discussing how you can leverage these offerings to bring in new audiences for your games. </li> <li> <a href="/garbage-collector-friendly-code/">High-Performance, Garbage-Collector-Friendly Code</a> Aug 6th, 2012 | Martin Wells <a href="/garbage-collector-friendly-code/"> <img class="article-preview-image" src="/images/article-previews/gc.png" alt=""> </a> If you’re developing a game that has many things happening at the same time, say a weapon that fires missiles 5 times per second – not an unreasonable weapon fire rate for a high-speed shooter – you’ll quickly discover that one area of substantial impact to performance is object construction and subsequent garbage collection. </li> <li> <a href="/real-time-multiplayer/">Real Time Multiplayer in HTML5</a> Jul 18th, 2012 | Sven Bergström <a href="/real-time-multiplayer/"> <img class="article-preview-image" src="/images/article-previews/rt-multiplayer.png" alt=""> </a> We will look at input prediction, lag compensation, client interpolation and more importantly - how to do this in your normal browser using websockets. The article will present a playable demo with parameters to play with, showcasing the concepts discussed. </li> <li> <a href="/progressive-enhancement/">Progressive Enhancement in Browser-Based Games</a> Jul 12th, 2012 | Justin Rounds <a href="/progressive-enhancement/"> <img class="article-preview-image" src="/images/article-previews/prog.png" alt=""> </a> One fundamental challenge of web development is providing access to the diversity of devices accessing the web, allowing users to interact with content regardless of platform or connectivity. One strategy for working with such diversity — *progressive enhancement* — is of significant benefit to browser-based game developers, and can help realize the full potential of games on the web. </li> <li> <a href="/js-game-code-org/">JavaScript Game Code Organization</a> Jul 11th, 2012 | Greg Smith First I’ll discuss organizing JavaScript code into files and modules. Then I’ll talk about code sharing approaches such as component systems. Lastly I’ll share some ideas for writing data-driven code in games. </li> <li> <a href="/websockets/">WebSockets: A Guide</a> Apr 2nd, 2012 | Jack Lawson It is useful to first look at the history of WebSockets and gain an understanding of how WebSockets work at a technical level before we examine how we may use WebSockets most effectively. Armed with this knowledge, we can simplify the network layer and build amazingly responsive games that provide a high level of multiplayer interactions. </li> <li> <a href="/taming-the-svg-beast/">Taming the SVG Beast</a> Apr 2nd, 2012 | Andrew J. Baker <a href="/taming-the-svg-beast/"> <img class="article-preview-image" src="/images/article-previews/svg-beast.png" alt=""> </a> With the large number of varying screen resolutions available on today’s HTML5 gaming devices, it is now advisable to give some consideration to incorporating vector graphics into your games. </li> <li> <a href="/sprite-animation/">Sprite Animation</a> Apr 2nd, 2012 | Martin Wells <a href="/sprite-animation/"> <img class="article-preview-image" src="/images/article-previews/sprite-animation.png" alt=""> </a> 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. </li> <li> <a href="/mobile-game-primer/">Mobile Game Primer</a> Apr 2nd, 2012 | Pascal Rettig <a href="/mobile-game-primer/"> <img class="article-preview-image" src="/images/article-previews/mobile-game-primer.png" alt=""> </a> Developing HTML5 games that work in the mobile browser comes with its own special set of requirements. </li> <li> <a href="/global-composit-operations/">Global Composite Operations - Your Canvas Utility Belt</a> Apr 2nd, 2012 | Glenn Barnett <a href="/global-composit-operations/"> <img class="article-preview-image" src="/images/article-previews/composite.png" alt=""> </a> This article will explore two of the lesser known GCOs - <code>source-atop</code> and <code>destination-out</code> - and show how they can help you solve some common problems in game graphics programming. </li> </ul> </section> <footer class="medium"> Edited and operated by <a href="http://bocoup.com">Bocoup</a>. </footer> <footer class="small"> Edited and operated by <a href="http://bocoup.com">Bocoup</a> </footer> <script type="text/javascript"> // GA stuffs var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1464992-54']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html>

CINXE.COM

Articles - Build New Games