Technologies for emulating video games inside web browsers
November 15, 2014 9:01 AM Subscribe
What are the current technologies for embedding interactive video games that accept mouse clicks and keystrokes as input for event-driven loops, inside a web browser page? I DON'T mean embedding Flash.
Clearly from the "Google Doodle" games, there is a way to write small videogames that run inside a web browser itself. It must be JavaScript or HTML5 tricks. I'm not interested in writing a Flash game and embedding the flash into a web page, I wonder what's the right technology for writing games that run in relatively modern (Chrome, Firefox) web browsers, WITHOUT any extra plugins.
Alternatively, can you point me towards a link where people have already answered this question?
Clearly from the "Google Doodle" games, there is a way to write small videogames that run inside a web browser itself. It must be JavaScript or HTML5 tricks. I'm not interested in writing a Flash game and embedding the flash into a web page, I wonder what's the right technology for writing games that run in relatively modern (Chrome, Firefox) web browsers, WITHOUT any extra plugins.
Alternatively, can you point me towards a link where people have already answered this question?
Phaser .
If you want something a little more low-level, Processing.js.
posted by scruss at 9:59 AM on November 15, 2014
If you want something a little more low-level, Processing.js.
posted by scruss at 9:59 AM on November 15, 2014
There are no "tricks" – the standard technology stack used in web browsers has simply evolved to the point that third-party plugins such as Flash are no longer necessary.
Are you asking for the basic, low-level technologies that make this possible, or are you looking for ready-to-use game development frameworks/libraries? As for low-level technologies:
Yes, JavaScript will be key.
HTML5's <canvas> element is a rectangular bitmap, which your JavaScript code can draw in. This approach is best suited to 2D (and possibly sprite-based) graphics.
WebGL is also a thing; it allows you to embed hardware-accelerated 3D viewports in a web page, and then control them from JavaScript. three.js is a popular tool for WebGL graphics. voxel.js builds on three.js to allow for Minecraft-style, block-based game worlds.
SVG (Scalable Vector Graphics) also enjoys widespread browser support these days, and it's possible to use it for games.
The Web Audio API is another new HTML5 feature that you should know about. It can play pre-existing sound files, or synthesize audio on the fly.
This is not a complete list. Especially with the advent of HTML5, modern browsers support a shit-ton of different ways to put visual elements on the screen. Pretty much any of these features could conceivably be used in a game. It just depends on what you're trying to accomplish.
posted by escape from the potato planet at 7:20 PM on November 15, 2014 [3 favorites]
Are you asking for the basic, low-level technologies that make this possible, or are you looking for ready-to-use game development frameworks/libraries? As for low-level technologies:
Yes, JavaScript will be key.
HTML5's <canvas> element is a rectangular bitmap, which your JavaScript code can draw in. This approach is best suited to 2D (and possibly sprite-based) graphics.
WebGL is also a thing; it allows you to embed hardware-accelerated 3D viewports in a web page, and then control them from JavaScript. three.js is a popular tool for WebGL graphics. voxel.js builds on three.js to allow for Minecraft-style, block-based game worlds.
SVG (Scalable Vector Graphics) also enjoys widespread browser support these days, and it's possible to use it for games.
The Web Audio API is another new HTML5 feature that you should know about. It can play pre-existing sound files, or synthesize audio on the fly.
This is not a complete list. Especially with the advent of HTML5, modern browsers support a shit-ton of different ways to put visual elements on the screen. Pretty much any of these features could conceivably be used in a game. It just depends on what you're trying to accomplish.
posted by escape from the potato planet at 7:20 PM on November 15, 2014 [3 favorites]
As an alternate path, consider writing in a game engine of your choice, and compiling down to js using asm.js.
Example: Unreal Engine running in the browser
posted by gregglind at 1:15 PM on February 23, 2015
Example: Unreal Engine running in the browser
posted by gregglind at 1:15 PM on February 23, 2015
« Older What is UPS package handler training like? | The most important question ever asked on AskMe Newer »
This thread is closed to new comments.
posted by gwint at 9:17 AM on November 15, 2014 [1 favorite]