Game Prototyping with JavaScript and CSS3
I would like to share a prototype game created in just a few hours. Hope he will inspire a few of you! In the industry of single-player browser games, it seems, there is a great lack of imagination and ability to tell stories, although perhaps I just did not notice such games;), but I lack such games like Grim Fandango .
Below is a screenshot of a demonstration consisting of several DOM nodes representing the main character, the birds and the stage. Most animations are implemented with CSS transitions / animations, some of which are dynamic and use the library move.js.
')
I haven't done any profiling yet, but this demonstration workswithout a single discontinuity quite smoothly, and there are many aspects that can be optimized, starting with just throwing out jQuery.
Returning to the original game creation plan — about a couple of years before the iPad came out, I wrote an Objective-C game for the iPhone using Cocos2d and the Chipmunk physics engine , a pair of really evil libraries. The iPhone seemed too small, and at that time the resolution was not large enough, not to mention the size limits for images dictated by Apple, so I gave up after several prototypes, including one prototype on a full-screen PC.
With the advent of modern browsers, the game in the browser has already become much less crappy than a year or two ago, and is going to become even better due to the constant work of the browser creators to speed up the work of canvas and other APIs to the limit.
The first prototype I wrote was created exclusively using Canvas. One of the main advantages that you have is a certain level of control, which makes it very easy to implement features such as pausing, post-processing, or special operations that are difficult to accomplish using DOM.
At first I was very pleased with the result, until I wrote a prototype using CSS3 and HTML; The impact on performance was quite significant (although I did not use dirty rectangles and other techniques). Some aspects of the game are much easier to implement using DOM, for example, using the Z-index and CSS transitions, although, unfortunately, pausing the scene and post-processing have become serious problems. At least with the current state of browser technologies, a good idea is to mix and match them. You can build most of your game using DOM, and for details like particle emitters, use Canvas or even WebGL shaders, as in this amazing demo .
Part of the interactive features, as well as a tiny tool for constructing the scene, you can see in this video: http://www.screenr.com/ZfMs .
The demonstration consists of about 200 lines of JavaScript code and about 200 lines of CSS, uses CSS for transformations, animations and, obviously, for decoration, while JavaScript is responsible for basic user interaction, such as tracking the pupils of the eyes and the random movement of the cat . The demonstration also includes a tiny toolkit for creating scenes, but it is completely ineffective.
You can pick up the source from github . Let me know if you make some cool prototypes!
Slightly more concept art:
Below is a screenshot of a demonstration consisting of several DOM nodes representing the main character, the birds and the stage. Most animations are implemented with CSS transitions / animations, some of which are dynamic and use the library move.js.
')
I haven't done any profiling yet, but this demonstration works
IPhone game
Returning to the original game creation plan — about a couple of years before the iPad came out, I wrote an Objective-C game for the iPhone using Cocos2d and the Chipmunk physics engine , a pair of really evil libraries. The iPhone seemed too small, and at that time the resolution was not large enough, not to mention the size limits for images dictated by Apple, so I gave up after several prototypes, including one prototype on a full-screen PC.
Browser game
With the advent of modern browsers, the game in the browser has already become much less crappy than a year or two ago, and is going to become even better due to the constant work of the browser creators to speed up the work of canvas and other APIs to the limit.
The first prototype I wrote was created exclusively using Canvas. One of the main advantages that you have is a certain level of control, which makes it very easy to implement features such as pausing, post-processing, or special operations that are difficult to accomplish using DOM.
At first I was very pleased with the result, until I wrote a prototype using CSS3 and HTML; The impact on performance was quite significant (although I did not use dirty rectangles and other techniques). Some aspects of the game are much easier to implement using DOM, for example, using the Z-index and CSS transitions, although, unfortunately, pausing the scene and post-processing have become serious problems. At least with the current state of browser technologies, a good idea is to mix and match them. You can build most of your game using DOM, and for details like particle emitters, use Canvas or even WebGL shaders, as in this amazing demo .
Demonstration
Part of the interactive features, as well as a tiny tool for constructing the scene, you can see in this video: http://www.screenr.com/ZfMs .
The demonstration consists of about 200 lines of JavaScript code and about 200 lines of CSS, uses CSS for transformations, animations and, obviously, for decoration, while JavaScript is responsible for basic user interaction, such as tracking the pupils of the eyes and the random movement of the cat . The demonstration also includes a tiny toolkit for creating scenes, but it is completely ineffective.
Source texts
You can pick up the source from github . Let me know if you make some cool prototypes!
Concepts
Slightly more concept art:
Source: https://habr.com/ru/post/127641/
All Articles