1N AD56 Slide L2S1

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

With Squad
© Camp K12 Project 1 | Welcome

Greetings
Activities
Today’s Agenda
Application Design
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

Concepts We Will Cover Today!
Learning Objectives - Concepts: Learning Objectives - Components:

• Gaming in Thunkable 1. Buttons
• Using Canvas for gaming 2. Labels
• Understand sprite type and 3. Canvas
sprite
© Camp K12 Project 1 | Agenda

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
• Working with various UI components like
Button, Label, Image, Slider, Camera, etc.
• Using layouts to make our app look better.
• Application of invisible components such an
Sound.
• Used Canvas, Sprite, control blocks, variables,
etc.
• Event handling with different components.
© Camp K12 Project 1 | Recap

Task 2: Activity
Task 1: Introduce Yourself
Trex Runner
1. Whoever scores the points
most wins the game.

Activity: Trex Runner
• Let’s play a fun Trex Runner

game.
• The one who scores the
highest points
wins the game.
• Let’s see who wins the game.
• Click here to play the game.
© Camp K12 Project 1 | Activity

Task 2: Activity
Task 1: Introduce Yourself
Unlock the Concepts

1. Gaming in Thunkable
2. Using Canvas for gaming
3. Understand sprite type and
sprite
Concepts We Will Cover!

4. Designing Stage,
Sprites, etc and
3. Integrating the Canvas uploading the sounds.
component in the app
2. Adding layouts in the app
1. Gaming in
Thunkable and
Canvas
Online Editor: x.thunkable.com

Project: Super Mario

App Requirement - Design
• 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

Concept: Gaming In Thunkable
• We can build amazing games and screen touch interface

experiences with Thunkable's gaming components.
Canvas
• Contains the Stage where our Sprites are displayed.
Sprites
• Elements on our stage that represent characters,
obstacles, and more.
Canvas Label
• Displays text on our Canvas.
Gaming Blocks
• Used blocks to change the appearance and
behavior of your Stage and Sprites.
© Camp K12 Project 1 | Concept
Canvas
Recap Question
Describe any one use of Canvas.
20 coins!
© Camp K12 Project 1 | Revision

Revision: Canvas
What?
• A touch-sensitive panel that enables the
movement of items.
Why?
• To create a variety of games and experiences that
involve different methods of touching a screen.
How?
• Properties can be changed using properties
panel or code blocks.
Where to find?
• User interface in app components
Concept: Canvas For Gaming

Gaming Blocks
• The Canvas component can be used to create a
variety of games and experiences that involve
different methods of touching a screen.
Gaming Blocks
• When we add a canvas to your project, we get 7
additional categories of blocks.
Why?
• Allows us to programmatically control what
happens with our sprites and sprites types, on
the canvas and the stage.

Stage
Recap Question
What is Stage and name any two properties
of Stage?
20 coins!

Revision: Stage
Important properties
What?
• Background of our Canvas.
Why?
• Control the Sprites on the stage in the Canvas tab.
How?
• Can set a background color or background picture, a
border color, and the stage's Height and Width.
Where to find?
• Automatically created under the Canvas when we add
Canvas to the screen.

Sprite
Recap Question
Can we move the Sprite anywhere on the
screen?
20 coins!

Revision: Sprite
What?
• Images that can be placed on the Stage in the Canvas.
Why?
Important properties
• They can react to being touched or dragged across the
screen, or colliding with other sprites or the edge of the
screen.
How?
• Properties can be changed using properties panel or code
blocks.
Where to find?
• Initially, it is automatically created under the Sprite_Type1.
We can create another Sprite_Type add drag the image to
© Camp K12 the screen to add a Sprite under it. Project 1 | Revision
Revision: Sprite Type
What?
• A category of Sprites that we can add to our app.
Why?
• Used to group the Sprites of similar types. Important properties
How?
• Allows us to handle events such as click event, collision
event, pointer event, etc.
• Properties can be changed using properties panel or
code blocks.
Where to find?
• Automatically created under the Canvas when we add
Canvas to the screen.
Concept: Sprite Type Vs. Sprite
• A Sprite Type is a category of Sprites that we can add to

our app.
• A Sprite is a single instance of a Sprite Type.
• Example:
Sprite Type - Animal
Sprite - Cat, Dog, Elephant, Hen, etc.

Student Design: Main Screen Background & Layout
Step 1: Open Thunkable on your web browser.
Step 2: Log in and open the project Super Mario.
Step 3: Set the Background Color of Screen1 to Blue.
Step 4: At first, drag the Column component from

the Layout section and drop it under Screen1.
Set its properties as follows:
• Vertical Alignment: Top
• Background Color: Blue
And keep other properties as default.

Student Design: Adding The Name Image
Step 1: Now, add a Row layout under the column

layout.
• Height: Fit contents
• Width: Fill container
• Background Picture: URL
• Background Picture Resize Mode: Stretch
• Bottom Margin: 10 pixels
Step 2: Insert an image component under the above

Row component.
• Picture: URL
• Picture Resize Mode: Stretch
© Camp K12 • Width: Fill container Project 1 | Concept
Student Design: Score Display
Step 1: After that, add new Row layout below the first row
layout
• Picture Resize Mode: Cover
Step 2: Add a label in the Row layout. Set its properties as

follows:
• Text: Score:
• Height and Width: Fit contents

Student Design: Score Display
Step 3: Add another label to display the score value in the

Row layout.
• Text: 0
• Height and Width: Fit contents
• Font Weight: 900

Student Design: Canvas, Stage And Sprites
Step 1: Now, add the Canvas component under the

Column layout.
• Height: Fill container
• Background Color: Blue
Step 2: Set the properties of Stage as follows:

• Height: 300
• Width: 289
• Gravity Y: 100
• Stage Scaling Mode: Stretch
Step 3: Remove the default SpriteType1 Image and

upload two Sprite Images, one for standing mario and
© Camp K12 other for jumping mario. Project 1 | Concept
Step 4: Now add another SpriteType2 and add the

images of all the obstacles to it.
Step 5: Next, add one more SpriteType3 and add the

images of base for the mario to stand and obstacles to
come.

Step 6: Insert the last SpriteType4 to display the game

over image to the player and add the game over
image to Sprite4.
Set the properties of all the Sprites in step 4 and 5 as

given in the table below.
Property Sprite1 Sprite3 Sprite4
X 70 147 160
Y 250 286 132
Height 50 20 117
Width 40 315 117

Student Design: Adding Jump Button
Step 1: At last, add a button inside the Column

layout for making the mario jump.
• Text: Jump
• Font Size: 30
• Background Color: Green
• Bottom Margin: 2%
• Left and Right Margin: 1%
• Border Radius: 5
• Font Bold: True
• Raised: True

Student Design: Uploading The Sounds
Step 1: Select the invisible component Sound from

Voice section of UI Components. Add two Sound
components to the Invisible Components of the App Tree.
Step 2: Now, upload two sound file in .wav or .mp3

format, one for mario jump sound and other for
game over sound in the files section of the Design
tab.
Step 3: Add the appropriate sound file as Source

file for Sound1.
Step 4: Add the appropriate sound file as Source

file for Sound2 as well.

Project: Super Mario
You finished designing the

interface of your application
today!
Let’s code it in the next session!

Summary
• Recap from last session
• Gaming in Thunkable
• Canvas for Gaming
• Stage, Sprite and Sprite Type
• Sprite Type Vs. Sprite
• Design the application using Row, Column, Canvas, Label,
Buttons, etc.
© 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
Avoid The Enemies

• We are going to create a game in which there are
enemies flying down from the sky. There will be
player moving left and right. Player will have chance
to fire bullets.
• Write down all the components that you would
require to create the game and do the rough
design.
© Camp K12 Project 1 | Homework

Next Session: Code
• In the next session, we will start with the

coding part of this app.
• We will learn how to make the mario jump
with a click of a button and many more
exciting things.

1N AD56 Slide L2S1

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

1N AD56 Slide L2S1

Uploaded by

Copyright:

Available Formats

Mobile App Development | Level 2 | Squad Session 1

Mobile App Development

© Camp K12 Project 1 | Welcome

© 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 | Welcome

Take initiative Share screen & Do Help in solving

© Camp K12 Project 1 | Welcome

Concepts We Will Cover Today!

Learning Objectives - Concepts: Learning Objectives - Components:

© 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

Activity: Trex Runner

• Let’s play a fun Trex Runner

© Camp K12 Project 1 | Activity

Unlock the Concepts !

Task 1: Introduce Yourself

Unlock the Concepts

Concepts We Will Cover!

2. Adding layouts in the app

Online Editor: x.thunkable.com

Project: Super Mario

© Camp K12 Project 1 | Agenda

App Requirement - Design

• Well structured UI for the game

© Camp K12 Project 1 | Agenda

Concept: Gaming In Thunkable

• We can build amazing games and screen touch interface

© Camp K12 Project 1 | Revision

Concept: Canvas For Gaming

© Camp K12 Project 1 | Concept

© Camp K12 Project 1 | Revision

© Camp K12 Project 1 | Revision

© Camp K12 Project 1 | Revision

Revision: Sprite Type

Concept: Sprite Type Vs. Sprite

• A Sprite Type is a category of Sprites that we can add to

© Camp K12 Project 1 | Concept

Student Design: Main Screen Background & Layout

Step 1: Open Thunkable on your web browser.

Step 2: Log in and open the project Super Mario.

Step 3: Set the Background Color of Screen1 to Blue.

Step 4: At first, drag the Column component from

© Camp K12 Project 1 | Concept

Student Design: Adding The Name Image

Step 1: Now, add a Row layout under the column

Step 2: Insert an image component under the above