It is quite common in mobile games to provide a shop where players can purchase items and upgrades for the game. It might sometimes be called a store, upgrade center, barracks or something else but the general idea is the same: a screen where users can purchase things that affect their experience in the game some way.

A lot of the time this is integrated with In App Purchases, which allows you to charge real money for items that are purchased in the shop. It is also quite common to offer items in shops that use in game currency that the player can earn without spending real money too.

A combination of both of these is usually a good approach. You may allow the user to redeem experience points earned in battles for items and upgrades, but certain items will require using real money for example.

This allows people to enjoy the game for free – people who can not afford to pay or who do not think it is worth paying for will help drive the growth of a game. People who are willing to spend real money then help the game become profitable.

To summarise the benefits of including a shop in a mobile game:

It adds replayability and encourages grinding for more in game currency (which could potentially lead to an increase in advertisement revenue in a mobile game)

and encourages grinding for more in game currency (which could potentially lead to an increase in advertisement revenue in a mobile game) It allows the creators of the game to create a source of revenue

Creating a Shop in Phaser

A shop is typically implemented as its own screen or popup. A modal overlay with a scrolling list of all the available items is quite often used.

I found this a little difficult to achieve with Phaser for a few reasons:

Phaser does not support a scrolling view

Images have to be added as sprites; you can’t use HTML templates within Phaser

you can’t use HTML templates within Phaser If you include In App Purchases then the prices will be different depending on the region the user is from, so you can’t use static images (e.g. a graphic that says $1.99 since it won’t be $1.99 everywhere)

I initially tried coding a solution within Phaser that would pop up a modal screen (which was generated with canvas) and placed sprites within this screen that would auto scale images within it. Each sprite was a button that represented one of the items in the shop. It kind of worked, but I was going about it completely the wrong way (it was so much more complicated than it needed to be).

In the end a Phaser game is just a web page, a pretty fancy one but still just a web page. Typically you might see a Phaser game instantiated like this:

BONUS CONTENT: Grab the complete example index.html file including all the code from this tutorial. Thanks! Now check your email.

< ! doctype html > < html lang = "en" > < head > < meta charset = "UTF-8" / > < title > My Game < / title > < script type = "text/javascript" src = "js/phaser.min.js" > < / script > < script type = "text/javascript" src = "js/boot.js" > < / script > < script type = "text/javascript" src = "js/preload.js" > < / script > < script type = "text/javascript" src = "js/gametitle.js" > < / script > < script type = "text/javascript" src = "js/main.js" > < / script > < script type = "text/javascript" src = "js/gameover.js" > < / script > < style type = "text/css" > body { margin : 0 ; font - family : 'Verdana' , Helvetica , Arial , sans - serif ! important ; } < / style > < script type = "text/javascript" > var game = new Phaser . Game ( 500 , 500 , Phaser . CANVAS , 'gameDiv' ) ; game . state . add ( "Boot" , boot ) ; game . state . add ( "Preload" , preload ) ; game . state . add ( "GameTitle" , gameTitle ) ; game . state . add ( "Main" , mainState ) ; game . state . add ( "GameOver" , gameOver ) ; game . state . start ( "Boot" ) ; < / script > < / head > < body > < ! -- Game Area -- > < div id = "gameDiv" > < / div > < / body > < / html >