Tony Card Game
Professional projects | | Links:
Overview
Type : Professional
Technology : HTML 5, Javascript, Phaser
Platform : Web
Introduciton
Cashless.ch originated from a promotional campaign led by Saatchi & Saatchi Zurich on behalf of the Swiss Community of Bank Card Providers. The primary goal was to advocate for card payments, featuring the character Tony in multiple scenarios showcasing the expediency of using bank cards. In tandem with this campaign, Saatchi & Saatchi aimed to construct a browser-based game for a competition offering cash prizes.
Gameplay
The game, an endless runner in 2D, was accessible on any web browser. Its objective was to attain the highest score by advancing the farthest and purchasing various items along the way. Within the game, the character could jump and dash to shatter specific icy objects.
Mechanics were centered on two collectibles: cash points and purchasable items. To elevate your score and acquire objects, you needed to first collect cash points, which were expended with each purchase. However, caution was necessary, as buying an item without sufficient cash points signaled the end of the game. Additionally, letters spelling CASHLESS, when collected, offered a significant score bonus upon completing the word. Thus, the strategy was not merely to gather all objects but to choose a path ensuring a continual accumulation of cash points.
The game encompassed three levels: city, countryside, and nightclub. Players had to reach the level’s end to progress, followed by a score summary before advancing to the next level. Each level had a unique set of purchasable items.
At the end of the game, a contact form appeared, facilitating participation in the competition and entry onto the leaderboard.
Developement
To craft this game, we departed from our usual usage of Unity because we needed broader compatibility across web browsers. The issue with Unity WebGL builds being resource-heavy and not fully functional on mobile browsers led me to explore alternatives. After thorough research, I opted for Phaser.
Phaser is a comprehensive 2D game framework tailored for creating HTML5 games for both desktop and mobile platforms. Its versatility lies in rendering capabilities in WebGL or Canvas, ensuring compatibility with most browsers. Moreover, it offers an extensive set of features including physics, animation engines, sound systems, particle effects, and multi-device input support.
I took on the sole development of this game, except for pixel art, character animations, and music, which I outsourced. All aspects of programming, level design, and sound design were personally executed.
To help me get started, I used two resources: a book called “Create procedural endless runner in Phaser with TypeScript”, which helped me understand how the engine works, and a complete project made with Phaser. Even if the book proposes to create an endless runner, few things were kept because our level desing was different and required other functionality.
To kickstart my efforts, I utilized two key resources: a book titled “Create procedural endless runner in Phaser with TypeScript”, providing insight into the engine’s functionality, and a complete Phaser project. While the book mainly centered on developing an endless runner, I adapted specific functionalities to align with our different level design requirements.
Another crucial tool in this project was Phaser Editor 2D. While the basic engine can be utilized with a text editor, the complexity of creating intricate level designs and handling numerous assets necessitated the use of Phaser Editor 2D. This tool, not officially part of Phaser, enables the creation of prefabs akin to Unity and assists in optimizing asset packaging.
The game works in the same way as Sketchman Run, with level design broken down into chunks containing the various level design elements such as platforms, objects and cash devices. These chunks are put together in a pseudo-random way to generate a level. A pool contains all the chunks, these chunks are removed from the pool to be displayed, then hidden when they leave the screen. This system avoids instantiation during the game, and makes it possible to control the memory cost of the game.
The game’s mechanics parallel those of Sketchman Run, employing a modular approach to level design. The level elements such as platforms, objects, and cash devices were divided into chunks and pieced together in a semi-random manner to generate levels. A chunk pool managed the display and removal of chunks, eliminating the need for real-time instantiation during gameplay and effectively controlling memory usage.
The game was previously accessible on the cashless.ch website, although it’s no longer available post the conclusion of the advertising campaign. Game files were served using a web server coupled with a Django backend. The backend facilitated the storage of scores and player data, and also displayed the final leaderboard. Additionally, the website featured a private admin page to moderate registrations, filtering out inappropriate usernames or troll accounts and managing winner information.
The competition was a triumphant endeavor, attracting the participation of hundreds of individuals.