Mobile App Development With Squad

Mobile App Development | Level 2 | Squad Session 3
Mobile App Development

With Squad
© Camp K12 Project 1 | Welcome

Greetings
Activities
Today’s Agenda
Code The Application
Summary/HW

Welcome
Greet each other and share homework!
Let’s see today’s Project!

Super Mario

Rules Of The Class
1. Participate 2. One person at a time 3. Try your best

Unlock the Concepts !
Task 2: Activity
Task 1: Captain & Recap
© Camp K12 Project 1 | Journey

Task 2: Activity
Task 1: Captain & Recap
Recap
Squad recap each concept
discussed in last class.

Captain Of The Day

Elect your captain of the day!
We can go in alphabetical order.
Discuss responsibilities of a
captain.

Responsibilities Of A Captain
Take initiative Share screen & Do Help in solving

doubts
© Camp K12 Project 1 | Agenda

Concepts We Will Cover Today!
Learning Objectives - Concepts: Learning Objectives - Components:
1. Collision detection 1. Remove block
2. Some properties of variables 2. Stop block
3. Stopping all sprites using 3. Variable blocks
motion blocks 4. Collision blocks
4. Canvas events blocks

Quick Recap
• Let’s recap all the concepts covered in last class!
• Captain Goes first & tag the next person.
© Camp K12 Project 1 | Recap

Quick Recap
• Introduction to Motion blocks
• Introduction to Looks blocks
• Using the set image number block
• Creating sprites for obstacles through code
• Integration of If-else logic
© Camp K12 Project 1 | Recap

Task 2: Activity
Task 1: Introduce Yourself
Tell me 5
1. Teacher asks question to
students one by one.

Activity: Tell Me 5
• Teacher asks questions to

students one by one.
• Questions:
• Tell me 5 vegetables.
• Tell me 5 countries.
• Tell me 5 categories of blocks.
• Tell me 5 deserts.
• Let’s see who wins the game.
© Camp K12 Project 1 | Activity
Task 2: Activity
Task 1: Introduce Yourself

Unlock the Concepts
1. Collision detection
2. Some properties of variables
3. Stopping all sprites using
motion blocks
4. Canvas events blocks
Concepts We Will Cover!

4. Canvas events
blocks
3. Stopping all sprites using
motion blocks
2. Some properties of
variables.
1. Collision
detection.
Online Editor: x.thunkable.com

Project: Super Mario

App Requirements - Code
• Well structured UI for the game

• Using canvas for gaming
• Mario walking and base changing
continuously
• Mario jump with button click
• Generating sprites as obstacles in the
game
• Scoring of the obstacles crossed
• Jump sound and game over sound in the
game

Removing Sprite Through Code
• The remove block removes the selected sprite

from the canvas.
• We can also remove all the sprites in a sprite
type using ‘get all sprites in sprite type’ block
which returns list of all of the sprites of the
selected sprite type.
© Camp K12 Project 1 | Concept

Variables
Recap Question
Can you define the term “Variable” ?
20 coins!
© Camp K12 Project 1 | Revision

Revision: Variables
• In app creation, variables work like containers

to hold numbers, phrases, the results of a
calculation, a database call, or other important
values in the app, in the mobile device itself or
in the cloud.
• Instead of repeating same values again and
again in multiple places, a variable can be used
wherever it is needed in your Blocks code.
Variable Value
• It can also handle events such as when the
value of a variable is changed we can perform Variable Name
our operations.
a
Blocks: Variables
• Variables work like containers to hold values in

the app, in the mobile device itself or in the
cloud.
Initialize a Variable When App Starts

• Create a variable when the app starts.
Set a Variable Value

• Used to set a variable’s value within a block
like event or function.
Changing a Variable Value

• Used to set a variable’s value within a block
like event or function.
Retrieving a Variable Value

© Camp K12 • Used retrieve at any time. Project 1 | Concept
Blocks: Motion
Recap Question
Name any three Motion blocks.
20 coins!

Revision: Motion Blocks
• The Motion blocks allow us to program a sprite's

speed and location.
Set Speed To
• Set the X or Y value for the sprite's speed to a
particular value.
• If negative value is passed to X then the Sprites
starts from the left edge of the screen and vice
versa.
• If negative value is passed to Y then the Sprites
moves to the top edge of the screen and vice
versa.
Move Sprite To
• Move the sprite to the X and Y location
specified in the block.
Blocks: Motion
Stop All Sprites

• Stop all sprites that are moving on the given
canvas.

Blocks: Looks
Recap Question
Can we change the size of a sprite using the
Looks blocks ?
20 coins!

Revision: Looks
• The Looks blocks facilitates programming a

sprite's image, size, and visibility.
Set Image Number

• Set the sprite's image to an image in the sprite
type's picture list.
Set Visibility
• Show the selected sprite or hide the selected
sprite on the canvas.

Revision: Sound Blocks
• The Sound block is an invisible component

which plays a designated sound.
• The sound file needs to be in the “.wav”
(Waveform Audio File Format) or in the “.mp3”
(MPEG Audio Layer 3) format to be played.
• We can perform many operation with sound
block such as play, pause, resume, stop, record,
etc.
• We can also perform event handling with this
block.
• It is available in the Voice menu of
Components section on the Design tab.

Blocks: Canvas Event
• Canvas Event blocks are the special type of

blocks which provides us the ability to program
the canvas to respond based on certain events.
When Canvas Loads
• It allows us to program an action after the
canvas loads.
Sprite Type or Sprite Clicked

• This event triggers when the sprite is clicked.
Collision with Edge

• This event triggers when the sprite collides
with the edge.
Collision with Sprite

• This event triggers when the two sprites
© Camp K12 collide. Project 1 | Concept
Creating Sprite Through Code

Recap Question
What values do we need to pass while creating
a sprite through code?
20 coins!

Revision:
Revision:Creating
CreatingSprite
SpriteThrough
ThroughCode
Code
• The create sprite type block adds an instance of the sprite type at
the x and y location specified.
• We can perform any operation with this instance created in the
do block of this component.

Random Number Generator

Recap Question
Where do you find the Random Number
Generator block?
20 coins!

Revision: Random Number Generator
• The random number generator block generates a random

number from the range of values specified.
• It can generate integer as well as fractional random numbers.

Student Code : Removing The Obstacle From The Screen
Step 1: Open Thunkable on your web browser.
Step 2: Log in and open the project Super Mario.
Step 3: Open “Blocks” tab and navigate to Events section of Canvas

and select ‘when Sprite_Type2 collides with any edge’ block. Set the
edge value as ‘left’ edge.

Student Code : Removing The Obstacle From The Screen
Step 4: Inside it, add the ‘remove sprite’ block from the Add &
Remove section and pass the sprite value to the block.
Step 5: Now, add the create Sprite_Type2 block below the remove
block in the event block to create next obstacle when the previous
obstacle is removed. You can copy this block form the click event of
jump button.

Student Code : Collision Detection With Obstacles
Step 1: From the Evets section, select the ‘when Sprite_Type1 collides
with SpriteType2’ block to detect the collision with the obstacle.
Step 2: Inside it, add the ‘stop all sprites on canvas1’ block from the
motion section.

Student Code : Collision Detection With Obstacles
Step 3: To display the game over image, select the ‘show sprite’ block
from the Looks section and set Sprite5 as its value.
Step 4: Now, set the jump button disabled using the ‘set Button1
disabled to true’ block to avoid next obstacles to appear.

Student Code : Restarting The Game
Step 1: Select the click event of Sprite_Type from the Events section
and set Sprite_Type5 in it.
Step 2: Insert the ‘move sprite to x and y’ block inside it to move the
Sprite1 mario to its default location i.e. X= 70 and Y= 250.
Step 3: Set the jump button disabled property to false to enable the
jump button.

Step 4: Select two ‘remove sprite’ blocks from the Add & Remove
section and set Sprite_Type1 and Sprite_Type2 in them respectively to
remove all the sprites on the screen.
Step 5: Add the ‘hide sprite5’ block and add it below the remove
block.

Step 6: Now, add the wait block from the Control

section and set its value to 3 second.
Step 7: At last, add the create Sprite_Type2 block

to create obstacles after 3 seconds and start the
game again.
Step 8: To keep the game over image i.e. Sprite5

invisible when the game starts, select the
Canvas1 loads event block and add the hide
sprite5 block inside it.

Student Code : Scoring For The Game
Step 1: From the Variables section, select the

‘initialize app variable name to’ block and set the
name of variable as ‘score’ and initialize it with
value zero block from Math section.
Step 2: In the Canvas1 loads block, insert the ‘set

Label1 Text to’ block and pass ‘app variable score’
block as its value to display the initial score value
i.e. 0 on the screen.

Step 3: Now, in the click event of jump button,

add the same block to change the value of score
below the ‘move sprite1 to x=70 y=250’ block of
do part of the if block.
Also, add it at last in the else part of the if block.

Step 4: When the obstacle collides with the left edge

the score should be increased by one. So, in the
‘when Sprite_Type2 collides with left edge’ block add
‘change app variable score by’ block and set its value
as 1 as first block.
Step 5: To display the changed value in above step,

add the block to set the text of score label and pass
the ‘app variable score’ block to it. Insert this block as
last block in collision event block.

Step 6: At last, to reset the value of score we have to

add ‘set app variable score to’ block below the
remove sprite blocks in the click event of
Sprite_Type5 i.e. game over image and set its value
to zero. Also add the block to change the label’s text
below it.

Student Code : Adding The Sounds
Step 1: From the Sound1 section, select the ‘call

Sound1’s Play’ block and inside the ‘then do’ part of
the block add the ‘call Sound1’s Stop’ block from
the same section.
Add the above block as second block in the do part
of If block of jump button click event block.
Step 2: Also, add the same block in above step as

first block in the else part of if block in of the jump
button click event block.

Student Code : Adding The Sounds
Step 3: To play the game over sound, select the ‘call

Sound2’s Play’ block from Sound2 section and inside
the ‘then do’ part of the block add the ‘call Sound2’s
Stop’ block from the same section. Add the above
block as first block in ‘when Sprite_Type1 collides
with Sprite_Type2’ event block.
Step 4: Now, add ‘call Sound2’s Stop’ block below

jump button enable block in the ‘Sprite_Type5
clicked’ event block to stop the game over sound
when we restart the game.

Project: Super Mario
You just finished the second

part of coding of your
application today!
Let’s code more it in the next session!

Summary
• Collision detection
• Some properties of variables
• Stopping all sprites using motion blocks
• Canvas events blocks
• Adding the scoring functionality
• Adding the jump and game over sounds
© Camp K12 Project 1 | Summary

Summary
• Let’s summarize all the concepts covered today!
• Take a quiz with your classmates!
• Win the quiz to earn points!
Quiz Link
© Camp K12 Project 1 | Summary

Home Work
Design:
• Add left-right control buttons.
• Game over and game start button.
• Add enemies and add player object.
• Add fighting component.
© Camp K12 Project 1 | Homework

Next Session: Code

• In the next session we will be learning the code
optimization and apply it in our code.
• We will learn the what are functions, use of
functions, defining functions and we will use it in
our code.

Mobile App Development With Squad

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mobile App Development With Squad

Uploaded by

Copyright:

Available Formats

Mobile App Development | Level 2 | Squad Session 3

Mobile App Development

© Camp K12 Project 1 | Welcome

Code The Application

© Camp K12 Project 1 | Welcome

Let’s see today’s Project!

© Camp K12 Project 1 | Welcome

Rules Of The Class

1. Participate 2. One person at a time 3. Try your best

© Camp K12 Project 1 | Welcome

Unlock the Concepts !

Task 1: Captain & Recap

© Camp K12 Project 1 | Journey

Unlock the Concepts !

Task 1: Captain & Recap

© Camp K12 Project 1 | Journey

Captain Of The Day

We can go in alphabetical order.

© Camp K12 Project 1 | Journey

Take initiative Share screen & Do Help in solving

© Camp K12 Project 1 | Agenda

Concepts We Will Cover Today!

Learning Objectives - Concepts: Learning Objectives - Components:

1. Collision detection 1. Remove block

2. Some properties of variables 2. Stop block

3. Stopping all sprites using 3. Variable blocks

motion blocks 4. Collision blocks

4. Canvas events blocks

© Camp K12 Project 1 | Agenda

© Camp K12 Project 1 | Recap

© Camp K12 Project 1 | Recap

Unlock the Concepts !

Task 1: Introduce Yourself

© Camp K12 Project 1 | Journey

• Teacher asks questions to

Unlock the Concepts !

Task 1: Introduce Yourself

Concepts We Will Cover!

Online Editor: x.thunkable.com

Project: Super Mario

© Camp K12 Project 1 | Agenda

App Requirements - Code

• Well structured UI for the game

© Camp K12 Project 1 | Agenda

Removing Sprite Through Code

• The remove block removes the selected sprite

© Camp K12 Project 1 | Concept

© Camp K12 Project 1 | Revision

• In app creation, variables work like containers

• Variables work like containers to hold values in

Initialize a Variable When App Starts

Set a Variable Value

Changing a Variable Value

Retrieving a Variable Value

© Camp K12 Project 1 | Revision

Revision: Motion Blocks

• The Motion blocks allow us to program a sprite's

Stop All Sprites

© Camp K12 Project 1 | Concept

© Camp K12 Project 1 | Revision

• The Looks blocks facilitates programming a

Set Image Number

© Camp K12 Project 1 | Revision