Helicopter Rescue
Scott Ferguson
This game is inspired by the Hopscotch game 'Epic 3D Helicopter Rescue!' by Magna Pop and Snoopy (https://www.youtube.com/watch?v=429bgMZ9J3Q)
sf
VIDEO TRANSCRIPT: (copy this text then paste @ Google Translate > translate.google.com < to translate to your language.
Hello App Inventors
This is a walkthgrough of Helicopter Rescue FS.
The FS stands for Fixed size canvas.
A previous version was tried using ImageSprite swapping for scrolling horizontally and vertically which would in theory give the ability to have a virtual unlimited Canvas size, but that idea has been put on hold for now. If you can figure out a way to do it, please share your solution with other members of the App Inventor community. Thanks.
This game is based on the 'Epic 3D Helicopter Rescue!' game by Mag-na Pop and Snoopy for Hopscotch.
I have simplified it somewhat for this project.
The idea of the game is to rescue survivors of a boating accident that are in the water by touching areas of the canvas to guide a rescue helicopter to pick them up. You are given a hint by the red arrow that points in the direction of a survivor to know where to touch.
I will play it a minute or two for you to get an idea how it works.
(pause to play game)
Screen Designer:
Let's look at the layout and Media assets in the Designer tab:
The Screen AlignHorizontal an AlignVertical are set to Center.
This is important when you will have a Canvas that is larger than the device screen width and height.
ScreenOrientation is set to Landscape to keep things simple and I find a wider screen easier to work with than a tall narrow screen.
Screen Sizing is set to Responsive which will give crisper graphics and a larger play area on tablets.
The GameCanvas is nested inside a set of horizontal and Vertical Arrangements which - by adjusting their widths and heights - allows GameCanvas to be moved in any direction and amount, giving the appearance that the ocean is moving under the device screen.
This layout was determined by experimentation and there may be a simpler one, but I know this works.
If you can make one simpler, please post an example for others to benefit from.
Thanks.
The VerticalArrangement that is a container for the other Arrangements and GameCanvas is called the Boundary.
It is set to fill parent in width and height here but will be set to a larger size in the blocks viewer.
Within Boundary is another VerticalArrangement, Yspacer that will expand and contract in Height during game play to push and pull the Arrangements below it, which includes the GameCanvas, up and down.
Below Yspacer and also inside Boundary is a HorizontalArrangement named '_' which is a container for another HorizontalArrangment and the GameCanvas.
Inside the '_' HorizontalArrangment is the Xspacer HorizontalArrangement and GameCanvas.
Xspacer pushes and pulls GameCanvas left and right.
Inside the Game Canvas is the Swimmer ImageSprite that represents the survivors and is respawned at random positions on the canvas.
The Helicopter ImageSprite moves across GameCanvas and turns in the direction touched by the player to pick up survivors.direction.
An Arrow ImageSprite moves along with and above the Helicopter.
It Rotates to point in the direction of a Swimmer giving the player a hint where to touch on the canvas in order to guide the Helicopter to the Swimmer, so it's Rotates property should be enabled.
The UpdateHelicopter Clock moves the Canvas, point the arrow at the swimmer and display the animation frames for the helicopter.
Therre are 11 sets of 3 pictures in the Media folder to give Helicopter the appearance of pointing in one of 11 directions and for rotating the rotors.
The RadioComm Notifier gets input from and displays messages to the player.
The Engine Player component plays the helicopter engine sound effect.
The UpdateScoreboard clock keeps the display of the number of survivors centered at the top of the screen as the Canvas moves and changes position.
The UpdateSwimmer clock tests if the swimmer is under the helicopter and if so, respawns the swimmer at a new location and does a treading water animation.
Blocks tab:
Now lets switch to the blocks viewer.
The ABOUT procedure's comment bubble contains a link to a video of the original Hopscotch game that inspired this App Inventor variation.
(open and close it)
Let's look at the global variables.
(open each global variable comment and read it)
The 'when Screen1.Initialize' event block sets component sizes and locations and displays a welcome message.
(read the comments)
Xspacer Width values ranges from 0 to 1.5 x Screen1.Width.
Yspacer Height values range from 0 to 1.5 x Screen1.Height.
Setting the Xspacer.Width and Yspacer.Height values to 1.5 pushes GameCanvas down and right so that the upper left corner of GameCanvas is lined up with the upper left corner of the device screen.
GameCanvas size is set to 2.5 x the screen width and height which is the maximum size possible to be able to fit inside the Boundary VerticalArrangement and still be able to move a distance of 1.5 x Screen1.Width and 1.5 x Screen1.Height.
Helicopter.Width and Height are set to 0.6 x screen height which is a good size for both tablet screens and the emulator screen.
Arrow.Width and height are set to 0.04 and 0.06 to be easily viewable above the helicopter.
Swimmer.Width and height are 0.15 x screen height to scale the Swimmer smaller than the helicopter but still be easily visible.
The RadioComm.ShowChooseDialog displays the welcome message and two button options: play and Quit.
After the player has tapped a button the RadioComm.AfterChoosing event block is triggered.
(read the 'when RadioComm.AfterChoosing' comment block)
Let's look at the 'when UpdateHelicopter.Timer' event block.
(read the comment blocks)
The NextFrame procedure is used to animate the Helicopter and Swimmer.
(read the comment)
Now, let's look at the 'when UpdateSwimmers.Timer' event block.
- tests for a swimmer under the helicopter and respawns the swimmer in a different location if so
- animates the swimmer
(read the comments)
when GameCanvas.TouchDown is triggered when the player touches the screen
(read comment)
GetHelicopterFramesIndex
(read comment)
Well, that concludes the description of the blocks used for this project.
I hope you have found this to be useful.
Until next time --- Happy Inventing!
----
girish vinjam
This game is inspired by the Hopscotch game 'Epic 3D Helicopter Rescue!' by Magna Pop and Snoopy (https://www.youtube.com/watch?v=429bgMZ9J3Q)Tap the screen to guide the helicopter to rescue survivors of a boating accident.Demonstrates how to scroll a Canvas larger than the device screen in two directions.Add scoring and timed game play, etc.
--
---
sf
(you have received this message from the App Inventor Developers Library)
---
You received this message because you are subscribed to the Google Groups "App Inventor Developers Library" group.
To unsubscribe from this group and stop receiving emails from it, send an email to app-inventor-develope...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Scott Ferguson
To unsubscribe from this group and stop receiving emails from it, send an email to app-inventor-developers-library+unsubscribe@googlegroups.com.