{"id":271,"date":"2015-09-25T11:02:44","date_gmt":"2015-09-25T09:02:44","guid":{"rendered":"http:\/\/l-engel.de\/?p=271"},"modified":"2015-11-27T10:36:14","modified_gmt":"2015-11-27T08:36:14","slug":"multiplayer-racer","status":"publish","type":"post","link":"http:\/\/larsengel.eu\/?p=271","title":{"rendered":"Bomb ‘n Tune"},"content":{"rendered":"

\u00a0Motivation<\/h2>\n

Second\u00a0screen is conquering the video game scene. Big companies like Nintendo or Sony implemented such features in their latest consoles. Nintendo created the Wii U\u00a0GamePad<\/em><\/a>, which has an integrated display, while Sony uses the PS Vita<\/a><\/em> to enable\u00a0Remote Play.<\/em><\/p>\n

The problem with both of the described systems is that you need special hardware to be able to use the second screen features. Nowadays nearly everybody possesses a smartphone, which has a multi core processor. So why don’t we use the hardware, that we are carrying around with us all the time, as a second screen device?<\/p>\n

This project evaluates the use of a second screen game created with the HTML5 game engine Phaser<\/a><\/em>.<\/p>\n

\"inagme_player_smaller\"<\/p>\n

\"ingame_spectator_smaller\"<\/p>\n

Gameplay<\/h2>\n

In this game the smartphone acts as the controller (Player), while an other device with ideally a big screen acts as the spectator.
\nThe game proceeds in two\u00a0different phases.<\/p>\n

Game phase:<\/h4>\n

The car\"output_Vt0xNR\"<\/strong><\/p>\n

Every player controls a car. Each car has the abilities to\u00a0ignite a nitro and to fire a blast, that is blasting the other cars in the area away.<\/p>\n

The ball\u00a0\"output_Acm2e2\"<\/strong><\/p>\n

The ball as the key feature in the game needs to be hit\u00a0by the cars. Each hit gives the player a point and a coin\u00a0and increments the counter of the ball by one. The hundredth hit lets the ball explode and takes the cars nearby along. Exploded cars loose their points but keep their coins for the tuning phase.<\/p>\n

Trapdoors\u00a0\"output_DtcNKe\"<\/strong><\/p>\n

The level of chaos is increased by trapdoors, that are spread over the map. The trapdoor open in irregular intervals. Players, that are falling into open trapdoors, loose their points but keep their coins for the tuning phase.<\/p>\n

Bumpers\"output_xJdotD\"<\/strong><\/p>\n

The bumpers, that are located in the corners of the map, let the ball rebound and ensure, that the ball does not get stuck in the corners.<\/p>\n

Tuning Phase:<\/h4>\n

After the ball is exploded or if any player but one is fallen into a trapdoor, the second game phase, the\u00a0tuning phase<\/span> begins. In the tuning phase each player can\u00a0improve the following features of his car:<\/p>\n

Speed<\/span>: Tuning the speed \u00a0increases the top speed of the car.
\nHandling<\/span>: Handling determines the turn speed and the acceleration of the car.
\nArmor<\/span>: Increasing the\u00a0armor value improves the behavior of a car, when it is hit by a blast.
\nAmmunition<\/span>: Ammunition is the amount of blasts a player can shoot during one round.
\nBoost<\/span>: The boost value is the amount of \u00a0nitro boost a player can use during one round.<\/p>\n

After twenty seconds the next game phase starts automatically.<\/p>\n

Programming<\/h2>\n

\"racer_diagram\"The game was programmed using the JavaScript\u00a0framework Meteor<\/a>\u00a0and the HTML5 game engine Phaser<\/a>. On the server meteor enables the use of\u00a0Node.js<\/a>\u00a0and has integrated support for WebSocket\u00a0communication between the server and the clients.<\/p>\n

With HTML5 you have the possibility\u00a0to use the hardware sensors of devices like smartphones. It is possible to get information of, for example, the accelerometer. In this project the accelerometer was used to detect a shake of the device. Another HTML5 feature, that was used was the\u00a0Vibration API<\/em> to give the user feedback for specific events. Unfortunately HTML5 is not supported equally by all browsers. The Virbations API, for example, is not working on the Safari Browser for iOS devices. This leads to an inconsistent game behavior on different devices and can only be solved by finding exceptions for not supported\u00a0features. But it can be assumed that the support for HTML5 features will improve with every upcoming browser update.<\/p>\n

Phaser is an open source framework to create Canvas or WebGL powered HTML5 browser games. The focus on mobile browsers ensures that every available feature works good on a mobile device. Because it is open source and comes as one single JavaScript file it is easily expandable or can be easily integrated in other frameworks. The three build-in physics engines (Arcade<\/a>, Ninja<\/a>\u00a0or P2.JS<\/a>) give the developer the freedom to choose the best fitting physics behavior. In this project P2.JS\u00a0was used since it is the most complex of the three engines and gives the most freedom for the development.<\/p>\n

Art<\/h2>\n

The game is presented in a cartoon style and uses an isometric projection<\/a> as the perspective. The isometric projection enables a visual representation of three dimensions where technically only two dimensions are possible.<\/p>\n

The car was created with\u00a0the 3D graphics and animation software Blender<\/a>. A turnaround was animated and exported as single frames. Those frame where combined to a sprite sheet with the tool Texturepacker<\/a>.
\nSince the game is playable with up to 30 players it is necessary\u00a0to have 30 different colored cars. The car was exported in grayscale and later on tinted dynamically in the program code.<\/p>\n

\"car1_spritesheet\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

Other game elements like the traps or bumpers where animated using Adobe Flash<\/a>\u00a0and also packed to a sprite sheet with Texturepacker. To complete the cartoon look a font was created and could be used as\u00a0bitmap text<\/a>\u00a0in the game.<\/p>\n

Team:<\/h2>\n