Build a Multi-player Game Ap­pli­ca­tion in App In­ven­tor 2

If you are ea­ger to build a mo­bile app, there is no bet­ter ap­pli­ca­tion than App In­ven­tor 2 to start you up. We have been car­ry­ing this se­ries for quite a few months now. We have built the sim­plest apps, and are slowly build­ing more and more com­plex ones.

OpenSource For You - - Developers - By: Meghraj Singh Beni­wal The au­thor has a B. Tech in elec­tron­ics and com­mu­ni­ca­tion, is a free­lance writer and an An­droid app de­vel­oper. He is cur­rently work­ing as an au­to­ma­tion en­gi­neer at In­fosys, Pune. He can be con­tacted at or

Ihope read­ers are play­ing around with their ideas and cre­ativ­ity while de­vel­op­ing An­droid apps. I would like to see the ap­pli­ca­tion down­load links if you have up­loaded any of your apps on to the Google Play Store. Since we started this jour­ney, we have ex­plored the var­i­ous ‘in­tel­li­gent’ com­po­nents and fea­tures of our smart­phones.

Now, when we talk about App In­ven­tor specif­i­cally, we can proudly say that we have mas­tered the com­po­nents avail­able in the pal­ette. Play­ing around with the de­signer and block edi­tor is so much fun.

Multi-player games are the trend now be­cause of the fun in­volved in play­ing with your friends or com­pet­ing with strangers across the world. The tech­nol­ogy that makes this pos­si­ble is the real-time in­te­gra­tion and com­mu­ni­ca­tion be­tween all con­nected de­vices. We have ex­plored Fire­base in two of my pre­vi­ous tu­to­ri­als, and I hope you are now com­pletely fa­mil­iar with its ca­pa­bil­i­ties that en­able even be­gin­ners to build smart­phone apps.

In this An­droid app de­vel­op­ment jour­ney we have cov­ered all those ba­sic-to-com­plex ap­pli­ca­tions that are es­sen­tial for our daily use. Now, let’s de­velop a sim­ple, yet fun-filled An­droid game ap­pli­ca­tion. Hope you all have played the very pop­u­lar XOXO (noughts and crosses) game in your child­hood.

The theme of the ap­pli­ca­tion

The theme is pretty sim­ple and you may have al­ready played the game hun­dreds of times on pa­per. But the cool part here is, you don’t need a pen or pa­per. We will be play­ing it with the help of our smart­phone.

GUI re­quire­ment

For ev­ery ap­pli­ca­tion, there is a graph­i­cal user in­ter­face or GUI that helps the user to in­ter­act with the on-screen com­po­nents. How each com­po­nent re­sponds to user ac­tions is de­fined in the block edi­tor sec­tion.

The GUI re­quire­ments for Screen1 are listed be­low.

1. La­bel: La­bels are the static text com­po­nents that are used to dis­play some head­ings or text on the screen. 2. But­ton: But­ton will let you trig­ger the event and is a very es­sen­tial com­po­nent.

3. Hor­i­zon­tal ar­range­ment: These

are spe­cial com­po­nents that keep all child com­po­nents hor­i­zon­tally aligned.

4. No­ti­fier: This is used to dis­play some in­struc­tions or give con­trols over your ex­ist­ing com­po­nents. You will see its func­tion­al­ity in more de­tail as we im­ple­ment it in our game. 5. Can­vas: This is the com­po­nent for draw­ing and for an­i­ma­tion. You can place var­i­ous an­i­ma­tion ob­jects over the can­vas to con­trol them via user ac­tions. We will see more de­tails as we go along.

6. Fire­base DB: As you al­ready know, this is the cloud based data­base util­ity from Google. We will be us­ing it to store the user’s data, over the cloud.

The com­po­nents that we will re­quire for this ap­pli­ca­tion are given in Ta­ble

1. We will drag them from the left hand side pal­ette on to the de­signer.

1. Drag and drop the com­po­nents men­tioned in Ta­ble 1 to the viewer.

2. Vis­i­ble com­po­nents can be seen by you, while the non-vis­i­ble com­po­nents will be lo­cated be­neath the viewer un­der the tag ‘Non­vis­i­ble’.

3. We have placed a la­bel to put the name of the ap­pli­ca­tion.

4. All but­tons need to be put within the hor­i­zon­tal ar­range­ment to keep them aligned hor­i­zon­tally.

5. If you have dragged and placed ev­ery­thing, the lay­out will look some­thing like what’s shown in Fig­ure 1.

6. Make the nec­es­sary prop­erty changes like we did when chang­ing the text prop­erty for the la­bel and but­ton com­po­nents. Ta­ble 2 de­picts this more clearly.

Re­nam­ing the com­po­nents helps to iden­tify them in the block edi­tor.

Your graph­i­cal user in­ter­face is now ready. The ap­pli­ca­tion will look ex­actly like what’s shown in Fig­ure 2, af­ter the in­stal­la­tion.

Fig­ure 3 shows the hi­er­ar­chy of the com­po­nents that we have dragged to the de­signer.

If you are con­fused see­ing the de­signer and the com­po­nents’ viewer, let me ex­plain things a bit. Here is the hi­er­ar­chy that we have placed for our ap­pli­ca­tion.

1. At the top we have the ti­tle of our ap­pli­ca­tion. It’s al­ways a good prac­tice to name your ap­pli­ca­tion and show it on the screen as well. We have put a la­bel for it and have set its text prop­erty to the name of the ap­pli­ca­tion.

2. Be­low that we have a name la­bel and textbox for the users to type in their names. We will store the same name in the Fire­base data­base. 3. Next, we have a can­vas which will be our main play­ing area. We will draw over that area.

4. When two play­ers are in­volved, it is bet­ter to keep track of who has made the last move to avoid con­fu­sion. So we have added a la­bel be­low the can­vas, which will show the name of the player who has fin­ished draw­ing on the can­vas, most re­cently.

5. The hor­i­zon­tal ar­range­ment holds all the ac­tion but­tons. As we have ex­plained ear­lier, keep­ing these but­tons within an ar­range­ment will make the hor­i­zon­tal ar­range­ment their par­ent, and all the com­po­nents within will be the chil­dren.

6. We have named all the but­tons with their re­spec­tive colours. So it is clear by their names what each of them will cor­re­spond to.

7. Last, we have the Fire­base com­po­nent, which is what will make our ap­pli­ca­tion multi-player. I hope you have read the pre­vi­ous two ar­ti­cles of this se­ries which dealt with Fire­base’s func­tion­al­ity. If you are al­ready fa­mil­iar with it, then you prob­a­bly may have cre­ated a project in Fire­base and have set the Fire­base URL into the prop­er­ties.

Now, to work on the block edi­tor to de­fine the be­hav­iour, let’s dis­cuss the ac­tual func­tion­al­ity we ex­pect from our ap­pli­ca­tion.

1. First, the user will draw a game board of the XOXO game, which is four crossed lines.

2. Each player will take her/his turn and draw (an X or O) on the game board.

3. Each player should draw with a dif­fer­ent colour to iden­tify the win­ner. 4. The name of the player who has made the last move is dis­played. 5. Upon win­ning, the win­ner is no­ti­fied.

6. The game board should be cleared us­ing the Wipe but­ton.

So let’s move on and add these be­hav­iours us­ing the block edi­tor. I hope you re­mem­ber how to switch from de­signer to block edi­tor. There is a but­ton avail­able right above the Prop­er­ties pane to switch be­tween the de­signer and block edi­tor.

Block edi­tor blocks

I have al­ready pre­pared the blocks for you. All you have to do is drag the rel­e­vant blocks from the left side pal­ette and drop them on to the viewer. Ar­range the blocks in the same way you see them in Fig­ure 5. I will ex­plain each one — what it does and how it is called. Ini­tialise three vari­ables as fol­lows: • KEY_LINE: This will be used for stor­ing data points about the lines, which will be fur­ther used to draw coloured lines. • KEY_USER: This vari­able will be used to keep track of the last user, so it will be stor­ing each user­name at ev­ery turn. • KEY_COMMAND: This vari­able will be used to de­ter­mine the colour of the pen the user has picked for draw­ing. Now, be­fore the user draws any­thing on the can­vas or chooses any colour for the pen, we should check whether he/she has pro­vided a name. If there is a name in the textbox at the top, we will save it to the Fire­base cloud data­base. The pro­ce­dure (Fig­ure 6) checks for the name and, if present, saves it to the data­base.

We want each user to draw with a dif­fer­ent coloured pen so that it will be easy to iden­tify the moves. So we have in­cluded but­tons to set the colour of the pen. Now we want to dis­play this colour set­ting on each de­vice; hence, it should be stored in Fire­base. Fig­ure 7 shows the code for one but­ton, and I hope you can make it for the other two as well.

Once the game is fin­ished, whether some­one has won it or the game is a draw, the can­vas should be cleared and the play board should be drawn again.

Fig­ure 9 shows the can­vas draw event han­dler. It will be trig­gered when the user starts drag­ging on the can­vas, and that’s when we will draw the user in­put on to the can­vas.

A FireBaseDB.DataChanged event han­dler sends two pa­ram­e­ters, as fol­lows:

Tag: This is the name of the tag or the key for which data has been up­dated.

Value: This is the value for the tag.

When this event is trig­gered, we check to see which piece of data has been changed. If you re­call, when draw­ing on the can­vas, we stored prevX, prevY, cur­rentX and cur­rentY in CSV for­mat with a key from KEY_LINE.

The block in Fig­ure 10 checks to see if the re­ported tag (key) is KEY_LINE. If yes, this means an­other user is draw­ing on the can­vas. We get the CSV value, con­vert the CSV into a list us­ing list from csv row and store it into our global csvList vari­able. Next, we sim­ply take each piece of data and use it to draw lines on the can­vas.

If the tag (key) is KEY_ USER, it means data has been up­dated in the cloud. We get the as­so­ci­ated value and up­date our lblNowDraw­ing text to show its re­lated value (the last user’s name).

If the tag (key) is KEY_COMMAND, we call a stored pro­ce­dure, the parseCom­mand, to in­spect the com­mand. We are us­ing a pro­ce­dure to re­duce the num­ber of blocks in our DataChanged event han­dler. The pro­ce­dure parseCom­mandBelow is called from the above blocks. It ba­si­cally checks to see what com­mand was sent to FirebaseDB. If the com­mand was ERASE, we use Can­vas.Clear to clear the can­vas. If the com­mand was COLOR_RED, we change the paint colour. We do the same for COLOR_ BLUE and COLOR_BLACK

Now you are done with the block edi­tor too. Next, we will down­load and in­stall the app on your phone to check how it works.

Pack­ag­ing and test­ing

To test the app, you need to get it on your phone. First, you have to down­load the ap­pli­ca­tion to your com­puter and then move it to your phone via Blue­tooth or a USB ca­ble. I’ll tell you how to down­load it.

1. On the top row, click on the ‘Build’ but­ton.

It will show you the op­tion to down­load the

apk to your com­puter.

2. In the course of down­load­ing, you can view how it pro­gresses and once suc­cess­ful, the ap­pli­ca­tion will be placed in the Down­load folder of your di­rec­tory or the lo­ca­tion you have se­lected for your down­load­ing.

3. Now you need to get this apk file to your mo­bile phone ei­ther via Blue­tooth or via a USB ca­ble. Once you have placed the apk file in your SD card, you need to in­stall it. Fol­low the on-screen in­struc­tions to in­stall it. You might get some no­ti­fi­ca­tion or warn­ing say­ing In­stall from un-trusted source. Al­low this from the set­tings and af­ter suc­cess­ful in­stal­la­tion, you will see the icon of your ap­pli­ca­tion in the menu of your smart­phone. Here, you will see the de­fault icon, which can be changed; we will tell you how to do this as we move ahead. I hope your ap­pli­ca­tion is work­ing ex­actly as per the re­quire­ments you have set. Now, de­pend­ing upon your usability and cus­tomi­sa­tion, you can change var­i­ous things like the im­age, sound and be­hav­iour as well.

De­bug­ging the ap­pli­ca­tion

We have just cre­ated the pro­to­type of the ap­pli­ca­tion with very ba­sic func­tion­al­ity. What else could the user be in­ter­ested in? Let’s look at the var­i­ous use cases in which your app should be able to per­form well. Con­sider the fol­low­ing use cases: ƒ Wouldn’t it be nice to add some data val­i­da­tion upon en­ter­ing the data in lower or up­per case?

ƒ Can you ex­tend the app to draw cir­cles on the can­vas, as soon as it is touched?

These are some sce­nar­ios that might oc­cur and users will be pretty happy see­ing them im­ple­mented.

Think about all these sce­nar­ios and how to in­te­grate them into the ap­pli­ca­tion. Do ask me if you fail to ad­dress any of the above cases.

You have suc­cess­fully built an­other use­ful An­droid app for your­self. Happy in­vent­ing!

Ta­ble 1: Com­po­nents re­quired to build the XOXO game app

Fig­ure 3: Com­po­nents view

Fig­ure 1: De­signer screen

Fig­ure 2: Ap­pli­ca­tion out­look

Ta­ble 2

Fig­ure 4: Fire­base prop­er­ties

Fig­ure 9: Block edi­tor im­age 5

Fig­ure 5: Block edi­tor Im­age 1

Fig­ure 8: Block edi­tor im­age 4

Fig­ure 7: Block edi­tor im­age 3

Fig­ure 6: Block edi­tor im­age 2

Fig­ure 10: Block edi­tor im­age 6

Fig­ure 11: Block edi­tor im­age 7

Newspapers in English

Newspapers from India

© PressReader. All rights reserved.