ACS-1805 Introduction to Programming (with App Inventor)

Transcription

1 ACS-1805 Introduction to Programming (with App Inventor) Chapter 8 Creating Animated Apps 10/25/2018 1

2 What We Will Learn The methods for creating apps with simple animations objects that move Including the basics of creating two-dimensional games To become comfortable with image sprites handling events such as two objects colliding What is animation a quick succession of images with the object in a slightly different place each time An illusion not much different from flipbooks 10/25/2018 2

3 What Is Animation With App Inventor, you'll program animation by placing Ball and ImageSprite components within a Canvas component then moving and transforming those objects every successive fraction of a second In this chapter you ll learn how the Canvas coordinate system works how you can use the Clock.Timer event to trigger movement how to control the speed of objects how to respond to events such as two objects crashing into each other 10/25/2018 3

4 The Canvas For animation you always need to place a canvas Define its width and height Often you want the Canvas to span the width of the device screen To do this choose Fill parent when specifying the Width A drawing on a Canvas is really a grid of pixels A pixel is the tiniest possible dot of color that can appear on the screen Each pixel s location is defined by x-y coordinates on a grid system as illustrated in next slide 10/25/2018 4

5 The Canvas 10/25/2018 5

6 The Canvas A position is represented as (x=n, y=m) The top-left cell in a Canvas starts with 0 for both coordinates If move right, the x coordinate increases If move down, the y coordinate increases The upper-right corner has an x coordinate equal to the width of the Canvas minus 1 You can change the appearance of the canvas in two ways By painting on it By placing and moving objects within it 10/25/2018 6

7 Working on the Canvas Painting on the canvas Each cell of the Canvas holds a pixel defining the color that should appear there The Canvas component provides following methods blocks for painting pixels Canvas.DrawLine Canvas.DrawCircle To paint the color First set the Canvas.PaintColor property to the color you want Then call one of the Draw blocks to draw in that color With DrawCircle, you can paint circles of any radius If set the radius to 1 It ll paint an individual pixel 10/25/2018 7

8 Working on the Canvas App Inventor provides a palette of basic colors You can use to paint pixels or other user interface components You can access a wider range of colors by using the color numbering scheme You can also use even more colors from this color chart 10/25/2018 8

9 Colors in App Inventor There are three main types of color blocks Basic color blocks It has a small square shape and has a color in the middle This color represents the color stored internally in this block If you click on the color in the middle a pop-up appears on the screen with a table of 70 colors that you can choose from Clicking on a new color will change the current color of your basic color block 9

10 Colors in App Inventor Make color This block takes in a list of 3 or 4 numbers 10

11 Colors in App Inventor How to make colors These numbers in this Make.List block represent values in an RGB code RGB codes are used to make colors on the Internet This first number in this list represents the R value of the code Red The second represents the G Green The third represents the B Blue The fourth value is optional and represents the alpha value how saturated the color is, or say, transparency The default alpha value is

12 Colors in App Inventor Split color It does the opposite of make color It returns a list of the RGB values in that color's RGB code After takes in a color a color block variable holding a color property from one of the components representing a color 12

13 Animating Objects Placing and moving objects A sprite is a graphical object placed within a larger scene canvas Both the Ball and ImageSprite components are sprites They are different only in appearance A Ball is a circle that has an appearance that can only be modified by changing its color or radius An ImageSprite can take on any appearance defined by an image file Balls and ImageSprites can only be added within a Canvas 13

14 Animating Objects Animation made from Timer event One way to specify animation is to change an object in response to a timer event Most commonly, you ll move sprites to different locations on the canvas at set time intervals It works without involving any action from the user 14

15 Animating Objects How to set up the timer event First drag a Clock component into your app in the Component Designer The Clock component has a TimerInterval property The interval is defined in milliseconds (1/1,000 of a second) Set the TimerInterval to some value If set it to 500 then a timer event will be triggered every half second The smaller the TimerInterval the faster the frame-rate of the animation After adding a Clock and setting a TimerInterval in the Designer Drag out a Clock.Timer event in the Blocks Editor Put any blocks you like in this event the blocks be performed every interval 15

16 Animating Objects Creating Movement To show a sprite moving over time Use the MoveTo function in the ImageSprite and Ball components MoveTo moves an object to an absolute location on the canvas but not a relative amount Example To move a ball diagonally across the screen 16

17 Animating Objects Speed The speed depends on the settings for the TimerInterval property of Clock1 the parameters you specify in the MoveTo function You may need to fine tune the speed To achieve smoother movement, you need a shorter interval High-level blocks App Inventor provides some high-level blocks for dealing with animation events An object reaches the screen s edge Two objects collide 17

18 Animating Objects EdgeReached Consider again the animation in previous example The object stops when it reaches the right or bottom edge of the canvas If you wanted the object to reappear at the other side each time it reaches the right or bottom edge You could define a response to the Ball.EdgeReached event 18

19 Animating Objects The EdgeReached event has a parameter Edge it specifies the particular direction by using the following code: North = 1 Northeast = 2 East = 3 Southeast = 4 South = 1 Southwest = 2 West = 3 Northwest = 4 19

20 Animating Objects CollidingWith Games and other animated apps often rely on activity occurring when two or more objects collide Consider in such a game An object changes colors and plays an explosion sound when it hits another object 20

21 Animating Objects NoLongerCollidingWith It provides the opposite event of CollidedWith It is triggered only when two objects have come together and then separated Example: 21

22 Animating Objects Both CollidedWith and NoLongerCollidingWith have an argument Other It specifies the particular object with which you collided This allows you to perform operations only when the object interacts with a particular other object The ImageSprite1 block refers to the component as a whole not a particular property of the component 22

23 Interactive Animation Games are interactive The end user playing a central role It is often the case that the end user controls the speed and/or direction of an object with buttons or other user interface components You can do this by programming a Button.Click event handler to disable and re-enable the timer event of the clock component By default the Clock component s timerenabled property is checked You can disable it dynamically by setting it to false in an event handler 23

24 Interactive Animation After the Clock1.TimerEnabled property is set to false The Clock1.Timer event will no longer trigger and the ball will stop moving Always stopping the movement on the first click isn t too interesting Instead, you could toggle the movement of the ball by adding an if else in the event handler it either enables or disables the timer 24

25 Animation Without a Clock Timer If only want to move objects App Inventor provides an alternative It doesn t require the use of a Clock component The ImageSprite and Ball components have following properties Heading Speed Interval Set these properties in the Component Designer or Blocks Editor to control how a sprite moves 25

26 Animation Without a Clock Timer Consider this example Moving a ball The Heading property of a sprite or ball has a range of 360 degrees 26

27 Animation Without a Clock Timer If you set the Heading to the ball will move left to right it will move bottom to top it will move right to left it will move top to bottom the ball will move from upper left to lower right 27

28 Animation Without a Clock Timer To cause an object to move You also need to set the Speed property to a value other than 0 The speed the object moves is actually determined by following properties together Speed The Speed property is the distance in pixels Interval The object will move each Interval 28