Corona SDK: Build a Shell Game - Interaction
This is the second installment in our Corona SDK Three Shell Game tutorial. In today's tutorial, we'll add to our interface and start coding the game interaction. Read on!
Where We Left Off. . .
Please be sure to check part 1 of the series to fully understand and prepare for this tutorial.
Step 1: Variables
These are the variables we'll use, read the comments in the code to know more about them. Some of their names are self explanatory, so there will be no comment there.
1 |
|
2 |
local moveSpeed = 600 |
3 |
local totalMoves = 5 |
Step 2: Declare Functions
Declare all functions as local at the start.
1 |
|
2 |
local Main = {} |
3 |
local startButtonListeners = {} |
4 |
local showCredits = {} |
5 |
local hideCredits = {} |
6 |
local showGameView = {} |
7 |
local placeBet = {} |
8 |
local randomShellMove = {} |
9 |
local checkMovesLeft = {} |
10 |
local revealBall = {} |
11 |
local alert = {} |
Step 3: Constructor
Next, we'll create the function that will initialize all the game logic:
1 |
|
2 |
function Main() |
3 |
--code |
4 |
end |
Step 4: Add Title View
Now we place the TitleView in the stage and call a function that will add the tap listeners to the buttons.
1 |
|
2 |
function Main() |
3 |
title = display.newImage('title.png', display.contentCenterX - 123, 40) |
4 |
playBtn = display.newImage('playBtn.png', display.contentCenterX - 25.5, display.contentCenterY - 10) |
5 |
creditsBtn = display.newImage('creditsBtn.png', display.contentCenterX - 40.5, display.contentCenterY + 45) |
6 |
titleView = display.newGroup(title, playBtn, creditsBtn) |
7 |
|
8 |
startButtonListeners('add') |
9 |
end |
Step 5: Start Button Listeners
This function adds the necesary listeners to the TitleView buttons:
1 |
|
2 |
function startButtonListeners(action) |
3 |
if(action == 'add') then |
4 |
playBtn:addEventListener('tap', showGameView) |
5 |
creditsBtn:addEventListener('tap', showCredits) |
6 |
else |
7 |
playBtn:removeEventListener('tap', showGameView) |
8 |
creditsBtn:removeEventListener('tap', showCredits) |
9 |
end |
10 |
end |
Step 6: Show Credits
The credits screen is shown when the user taps the credits button, a tap listener is added to the credits view to remove it.
1 |
|
2 |
function showCredits:tap(e) |
3 |
playBtn.isVisible = false |
4 |
creditsBtn.isVisible = false |
5 |
creditsView = display.newImage('credits.png') |
6 |
transition.from(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:addEventListener('tap', hideCredits) creditsView.x = creditsView.x - 0.5 end}) |
7 |
end |
Step 7: Hide Credits
When the credits screen is tapped, it'll be tweened out of the stage and removed.
1 |
|
2 |
function hideCredits:tap(e) |
3 |
playBtn.isVisible = true |
4 |
creditsBtn.isVisible = true |
5 |
transition.to(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:removeEventListener('tap', hideCredits) display.remove(creditsView) creditsView = nil end}) |
6 |
end |
Step 8: Remove Title View
When the Play button is tapped, the title view is tweened and removed, revealing the game view. All the game graphics are added by this function, check each component in the following functions.
1 |
|
2 |
function showGameView:tap(e) |
3 |
transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners('rmv') display.remove(titleView) titleView = nil end}) |
4 |
end |
Step 9: Bank Credits
This code adds the bank credits text as well as the bank image.
1 |
|
2 |
bank = display.newText('5', 18, 5, native.systemFontBold, 14) |
3 |
bank:setTextColor(234, 170, 12) |
4 |
bankText = display.newImage('bankText.png', 7.5, 25) |
Step 10: Ball
The ball is instantiated by the next line, a center position is given to it:
1 |
|
2 |
ball = display.newImage('ball.png', 228, 142) |
Step 11: Shells
Next are the Shells wich are positioned in the left, center and right parts of the stage, we use also a group to index them and use them later.
1 |
|
2 |
s1 = display.newImage('shell.png', 50, 114) |
3 |
s2 = display.newImage('shell.png', 195, 84) |
4 |
s2.name = 's2' |
5 |
s3 = display.newImage('shell.png', 340, 114) |
6 |
shells = display.newGroup(s1, s2, s3) |
Step 12: Button Bar
Lastly, the button bar is added, this is the dark background, message text, and bet button.
1 |
|
2 |
buttonBar = display.newImage('buttonBar.png', 0, 270) |
3 |
msg = display.newText('Click Bet to start', 1, 307, native.systemFont, 9) |
4 |
betBtn = display.newImage('betBtn.png', 223, 275) |
5 |
|
6 |
betBtn:addEventListener('tap', placeBet) |
7 |
|
8 |
gameView = display.newGroup(bank, bankText, ball, shells, buttonBar, msg, betBtn) |
Step 13: Code Review
Here is the full code written in this tutorial alongside with comments to help you identify each part:
1 |
|
2 |
-- Three Shell Game |
3 |
-- Developed by Carlos Yanez |
4 |
|
5 |
-- Hide Status Bar |
6 |
|
7 |
display.setStatusBar(display.HiddenStatusBar) |
8 |
|
9 |
-- Graphics |
10 |
|
11 |
-- [Background] |
12 |
|
13 |
local bg = display.newImage('bg.png') |
14 |
|
15 |
-- [Title View] |
16 |
|
17 |
local title |
18 |
local playBtn |
19 |
local creditsBtn |
20 |
local titleView |
21 |
|
22 |
-- [Credits] |
23 |
|
24 |
local creditsView |
25 |
|
26 |
-- [Bank Credits] |
27 |
|
28 |
local bank |
29 |
local bankText |
30 |
|
31 |
-- [Shells] |
32 |
|
33 |
local s1 |
34 |
local s2 |
35 |
local s3 |
36 |
local shells |
37 |
|
38 |
-- [Ball] |
39 |
|
40 |
local ball |
41 |
|
42 |
-- [Button Bar] |
43 |
|
44 |
local buttonBar |
45 |
|
46 |
-- [Bet Button] |
47 |
|
48 |
local betBtn |
49 |
|
50 |
-- [Message Text] |
51 |
|
52 |
local msg |
53 |
|
54 |
-- [GameView] |
55 |
|
56 |
local gameView |
57 |
|
58 |
-- [Alert] |
59 |
|
60 |
local alert |
61 |
|
62 |
-- Variables |
63 |
|
64 |
local moveSpeed = 600 |
65 |
local totalMoves = 5 |
66 |
|
67 |
-- Functions |
68 |
|
69 |
local Main = {} |
70 |
local startButtonListeners = {} |
71 |
local showCredits = {} |
72 |
local hideCredits = {} |
73 |
local showGameView = {} |
74 |
local placeBet = {} |
75 |
local randomShellMove = {} |
76 |
local checkMovesLeft = {} |
77 |
local revealBall = {} |
78 |
local alert = {} |
79 |
|
80 |
-- Main Function |
81 |
|
82 |
function Main() |
83 |
title = display.newImage('title.png', display.contentCenterX - 123, 40) |
84 |
playBtn = display.newImage('playBtn.png', display.contentCenterX - 25.5, display.contentCenterY - 10) |
85 |
creditsBtn = display.newImage('creditsBtn.png', display.contentCenterX - 40.5, display.contentCenterY + 45) |
86 |
titleView = display.newGroup(title, playBtn, creditsBtn) |
87 |
|
88 |
startButtonListeners('add') |
89 |
end |
90 |
|
91 |
function startButtonListeners(action) |
92 |
if(action == 'add') then |
93 |
playBtn:addEventListener('tap', showGameView) |
94 |
creditsBtn:addEventListener('tap', showCredits) |
95 |
else |
96 |
playBtn:removeEventListener('tap', showGameView) |
97 |
creditsBtn:removeEventListener('tap', showCredits) |
98 |
end |
99 |
end |
100 |
|
101 |
function showCredits:tap(e) |
102 |
playBtn.isVisible = false |
103 |
creditsBtn.isVisible = false |
104 |
creditsView = display.newImage('credits.png') |
105 |
transition.from(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:addEventListener('tap', hideCredits) creditsView.x = creditsView.x - 0.5 end}) |
106 |
end |
107 |
|
108 |
function hideCredits:tap(e) |
109 |
playBtn.isVisible = true |
110 |
creditsBtn.isVisible = true |
111 |
transition.to(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:removeEventListener('tap', hideCredits) display.remove(creditsView) creditsView = nil end}) |
112 |
end |
113 |
|
114 |
function showGameView:tap(e) |
115 |
transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners('rmv') display.remove(titleView) titleView = nil end}) |
116 |
|
117 |
-- [Bank Credits] |
118 |
|
119 |
bank = display.newText('5', 18, 5, native.systemFontBold, 14) |
120 |
bank:setTextColor(234, 170, 12) |
121 |
bankText = display.newImage('bankText.png', 7.5, 25) |
122 |
|
123 |
-- [Ball] |
124 |
|
125 |
ball = display.newImage('ball.png', 228, 142) |
126 |
|
127 |
-- [Shells] |
128 |
|
129 |
s1 = display.newImage('shell.png', 50, 114) |
130 |
s2 = display.newImage('shell.png', 195, 84) |
131 |
s2.name = 's2' |
132 |
s3 = display.newImage('shell.png', 340, 114) |
133 |
shells = display.newGroup(s1, s2, s3) |
134 |
|
135 |
-- [Button Bar] |
136 |
|
137 |
buttonBar = display.newImage('buttonBar.png', 0, 270) |
138 |
msg = display.newText('Click Bet to start', 1, 307, native.systemFont, 9) |
139 |
betBtn = display.newImage('betBtn.png', 223, 275) |
140 |
|
141 |
betBtn:addEventListener('tap', placeBet) |
142 |
|
143 |
gameView = display.newGroup(bank, bankText, ball, shells, buttonBar, msg, betBtn) |
144 |
end |
Next Time...
In the next and final part of the series, we'll handle the shells animation, tap events to select the shells, and the final steps to take prior to release like app testing, creating a start screen, adding an icon and, finally, building the app. Stay tuned for the final part!