I am assuming you have some experience using App Inventor. If not, you should definitely do the very basic tutorial.
This is what we want to achieve-
1. You control a bird by tapping anywhere in the screen. When you tap, bird ascends; if you don’t, bird starts to descend/fall.
2. Your objective is to lead the bird to left or right without bumping on any spikes. If you successfully take the bird to the left or to the right edge, you make a score. When that happens, bird goes to opposite direction. This continues until you hit a spike. Let’s first design the interface. Download the barebone project that already has the UI layout but no blocks. Import it and take a look at the different components in place. You can change the look and feel however you want later. This is how mine looks like-
We have the following components in Screen1:
1. A Canvas component which we renamed to GameCanvas with Height and Width both set to Fill parent.
2. We have an ImageSprite component to represent our main game object which is a tiny bird. We named it BirdSprite. The speed property of this sprite is set to 5 meaning 5 pixels.
3. Another image sprite named PlaySprite to represent our play/retry button.
4. SpikesBottom and SpikesUp are also image sprites for spikes on the top and bottom as the names implied.
5. Spike1, Spike2, Spike3, and Spike4 are image sprites that will be placed in random locations during the game.
6. A Label component named ScoreLabel to display the score.
7. Four Sound components for playing sound effects. ScoreSound is used when the player makes a score. FlapSound is when the player taps on the canvas for bird to flap and ascend. DeathSound is used when the bird bumps on any of the spikes and dies. Finally the ClickSound is for Play/Retry button click.
8. We do have a TinyDB component named ScoreDB to store the best score.
9. There are four Clock components. MoveClock is used to control how long the bird can fly up when the player taps the screen. When MoveClock is fired, we stop flying up. MoveClock’s TimerInterval is set to 300 milliseconds in design view. yClock is to control bird’s location on y-axis which has an interval set to 0. ContinuousFlapClock is for making the bird flap nonstop. FlapClock is for making the bird flap once when it jumps. We could actually use one flap clock but for simplicity sake and avoiding too many blocks by resetting their properties, we used two. Now, let’s define some variables that we’ll need throughout the game. I will explain what they are for in a bit.
DB_SCORE_TAG : For saving and reading best score.
STATE_MENU, STATE_READY, STATE_GAME – A game has states. When you are on the menu screen, ready to start the game, and actually playing the game. These variables are constant meaning we will not change their values. That is why we used all capital letters to define them.
state – This holds the current state, either of the three states above.
isFalling – When player is not tapping, the bird starts to descend.
score – Current score in the game.
bestScore – Best score of the player.
headingLeft – Bird’s direction on x-axis, either left or right.
temp – To use within a smaller scope. You can use local variables if you prefer.
isOnLeft – If the obstacles/spikes are currently at the left side on the canvas.
SPIKES_Y_POS – This variable holds a list of lists. We have 4 image sprites (obstacle spikes) that are placed on either side depending on the direction of the bird. If we want to place the spikes at left, we can use 0 as the x, if we want to the right, we can use canvas’ width minus spike’s width for x. Since our obstacles’ x position is either to the left or to the right, all we need are values on y-axis. We created 10 locations for those sprites by placing them in various positions in design view with proper gaps in between, we then checked in the device if they look good enough. Then we copied Y values from design view to SPIKES_Y_POS variable. Since we have 4 obstacle sprites, we chose 4 values on y-axis, one for each sprite. This is why each list contains 4 items. First one is for Sprite 1, 2nd one is for Sprite 2, and so on. You can try and add more or even randomize. Rather than having a list of lists predefined, you can create an empty list and then later add items to that list instead. If you are wondering why some of them have -100, it’s because we don’t always want to show all 4 obstacle sprites. So we placed them off the screen. You can use -30 as each spike is 30 pixels in height. I chose -100 because for some reason it was more visible to my eyes to spot on Blocks window when I was testing. If you have never worked on lists, now is the time you go through the in-depth list tutorial.
Let’s initialize/setup different components. Go to Blocks window. Drag the Screen1.Initialize block on the Viewer window and do as I did in Screen1.Initialize. You will also have to create some procedures as shown below:
Let’s break these down. Screen gets initialized when the app is loaded and we to do the followings when it does-
1. We want our score label to be visible. So we set its visibility to true. You can do that in design view too.
2. When we first show the app, we do not show the bird. So it should not be enabled either. You can also do that in design view. I might have already done that in design view; but I don’t like going back and forth to check, so redid it.
3. We do not want our clocks to do anything yet so we disabled them which you can also do in design view.
4. We want our canvas height to be the same as the device height minus the score label’s height which is 30. We show the best score on the menu screen or how to play the game if the player haven’t played our game yet.
5. We read the best score form TinyDB using the tag we defined before. If no best score, we get an empty text because we put nothing on the block “valueIfTagNotThere“. Obviously tag won’t be there if we haven’t saved any score yet.
6. If we find a best score, we show it. If not, we inform the player how to play this game. You can create a screen with detailed instructions if you prefer and show that instead.
7. Finally we call three procedures. SetupHeader procedure sets the location of the header in center in respect to x-axis and a little below from the top of the screen by using its height. If you are not sure about this simple math formula on getting the center of two points, google ‘midpoint formula‘. Header holds nothing but the name of the game which is an image sprite and doesn’t move or interact. This is why in design view, we disabled that. After we setup its position, we made sure it’s visible. SetupPlayButton procedure places the play button at the center of the screen. SetupGameVisibility procedure takes a boolean variable as a parameter. We named the variable visibility. If it is true, we show game components, otherwise we hide it. The reason we used not block from Logic drawer for setting the visibility of play button is because when game starts, we do not want to show the play button but the game items/components. When the game ends, we want to hide all game components except the play/retry button which is also the same when our game launches. That is why we call this procedure with a false argument from Screen1.Initialize, because we want to only show the menu screen’s items, not the game screen’s items. By the way I am always using “screen” even though there’s only one screen (Screen1). I am doing that to differentiate when only menu items (Play button, score label) are visible from game items. Now we have to define what happens when the player presses the play button.
When user/player taps on the play button, we first play a click sound. Then we setup the game which I will explain in a bit. We also start our ContinuousFlapClock as we want the bird to flap continuously. We’ll get back to that too. Here’s the SetupGame procedure-
We will discuss 4 procedure calls in SetupGame later. Let’s first explain what happens at the beginning. So game is about to start. We want to reset the value of score to 0. Then, we show the score which we just set to 0. We do that because previously the menu screen might have showed best score or a tutorial. We change the state to ready state meaning the game is waiting for player’s first tap to start. We make sure our score label is visible and header is invisible. We want to place the obstacles randomly. We do not want to start the game with spikes at the left or right all the time, nor do we want to just alternate. So we pick a number between 1 and 2 inclusive. If system gives us 1, we set the isOnLeft to true, otherwise false. Now let’s look at the 4 procedures.
In SetupTopBottomSpikes, we set the X values of both top and bottom sprites to the center on x-axis using simple midpoint formula. Since the SpikesUp should be at the top, we set its Y to 0; and for the other one, we set it to the height of the screen so it appears at the bottom. Remember in canvas, point (0, 0) is on top left of the canvas.
In SetupPlacements, we make sure that bird’s speed is 5. You will know why we had to in a bit. Then we determine where we should put all those 4 obstacle spikes in terms of y-axis. As we do have a list of predefined positions contained by SPIKES_Y_POS variable, we just need to pick one from the list. So we generate a number between 1 which is the index of the first item in the list and the size of the list which is 10 as we have 10 items/lists meaning we get a number between 1 and 10 inclusive. After that we get the list at index we just randomly got. The reason we choose a random number between 20 and half of the canvas height, so that we do not place the spikes always on top of the screen. This will make sure we do not have bottom of the screen always available in bigger screens. We do not want to use the same set of blocks multiple times to get a list item, we instead created a procedure called GetListItem which we can easily use instead of using the same set of blocks and make it look too busy-
Since SPIKES_Y_POS is a list of lists, the value of the list is also a list. Now if we want the list that contains [-100, 140, 210, 365] which is at index 1 of the parent list, we should give GetListItem 1 as the parentIndex, and then if we want to get the number 210 which is at index 3 of the child list, we should give 3 as the childIndex. Then we check if we should place the obstacles at left using isOnLeft variable’s value which we determined in SetupGame procedure.
Now you might be wondering why are we changing the value of isOnLeft again to opposite. It’s because SetupGame is called only once when user starts a game but this SetupPlacements will be used each time when the player bounces off an edge. If player bounces off the left edge, we need to put the obstacles at right and vice versa. After that we also change the heading to the opposite of bird’s current direction at x-axis. Heading set to 0 makes the bird move rightward. Also we set the image that matches the bird’s direction. Since we set isOnLeft to false meaning bird should be moving rightward, we set their X to right edge (canvas width) minus their width. We put an extra pixel (+1) because I kind of find the appearance better that way. You do not have to add that 1.
The name of the image “SpikeLeft.png” may confuse you but tiny spikes on that image is pointing to the left so it should be used when obstacles are placed on the right side. On the else portion, we do exactly the opposite.
Heading 180 makes the bird move leftward. We set obstacles’ X to -1 but you can set it to 0. I like it that way. The very same reason why I added 1 when placing them at right.
After calling SetupPlacements, we call SetUpBirdPosition in SetupGame procedure. In SetupBirdPosition, depending on the heading we set in the SetupPlacements, we change where the bird should be initially placed when game is in ready state which is actually the opposite side of where we placed the obstacle spikes. You can use the heading property of the bird if you prefer rather than using another variable (headingLeft) as I did. But you have to do a comparison and see if it’s 0 (rightward) or 180 (leftward).
Y value is not dependent on the heading. We just need to make sure we don’t put it too up or too below where it touches the bottom spike and dies right away. At the end of SetupGame, we call SetupGameVisibility and pass true as an argument, the opposite of what we did when we called this procedure from Screen1.Initialize. It’s because this time we want the game entities/components to be visible and play button to be invisible.
We are in ready state. The bird is supposed to flap continuously, but what exactly makes it flap? If you recall, in PlaySprite.Touched event, we enabled the ContinuousFlapClock. In design view, we set this clock’s timer interval to 300 milliseconds. So, once it’s enabled, after every 300 milliseconds, App Inventor will invoke this clock’s Timer event automatically. And this is what we do when it’s triggered-
We simply call another procedure that we defined named ChangeImage. This procedure needs to know the direction of the bird. This is why we enable ContinuousFlapClock after we call SetupGame. If ChangeImage procedure sees headingLeft is set to true, it then checks if current image is BirdLeftOne.png, if so it changes it to BirdLeftTwo.png to make the bird appear to be flapping. If it’s the second image, it changes it to the first one. It does the opposite if the headingLeft is false. Now, we are waiting for player to tap to start playing. How do we start the game and control after it starts? Well, we do it whenever there’s a touch on the canvas. App Inventor calls Screen1.Initialize at the beginning of an app launch, the same way it listens to any touch on a canvas through GameCanvas.Touched event whenever player touches the canvas.
We only care about a user touch when our game is in either ready or game state. When in ready state and user taps for the first time, we change the state to game state. We stop continuous flapping of the bird by disabling that clock. We enable yClock. We will see in a bit what it does. We also enable the bird so it can now move to a direction depending on its current heading. Whenever there’s a touch, we make the bird jump meaning we change its Y value. For moving along x-axis, we did set bird’s heading; and in design view we also set the speed to be 5. In JumpBird procedure, we play the flap sound. We set isFalling to false since we are jumping, not falling. We change the image like we explained for continuous flapping. We enable both MoveClock and FlapClock.
If you recall what I mentioned about the clocks we have at the beginning of this tutorial, you know MoveClock controls how long the bird can fly up when the player taps the screen. When MoveClock is fired, we stop flying up and set isFalling to true so the bird will descend. In FlapClock’s Timer event, we change the current bird’s image and disable the timer as we do not want it to flap continuously. What makes the bird actually move up or down? Answer is yClock. Again, yClock is to control bird’s location on y-axis which has an interval set to 0. So, when it’s enabled, it fires continuously and does this-
If our bird should fall, we increase its Y value since a Canvas’ (0, 0) position is at top left. If the Y is equal to the height of the canvas, the bird will be at the bottom. We do the opposite if we are going up. You might be wondering why didn’t we enable/disable yClock in JumpBird procedure instead. It’s because when we are in game state, we do not intend to disable yClock. The bird is constantly moving either up or down. Also JumpBird procedure as its name implies should not make the bird fall too. We are close. The bird jumps when player taps and falls if player doesn’t tap. Now we need to handle what happens when our bird reaches the left or right edge.
Whenever the bird reaches left or right edge, player makes a score. So we play score sound. We call SetupPlacements to place 4 spike obstacles on the other side. We explained what this procedure does a while ago. We add 1 to the score and update score label to display the new score. Unfortunately we have to make its cuteness die if it bumps on any of the 6 spikes (top, bottom, and 4 obstacles spikes). In order to do that we need to check if it’s colliding with any of them-
We will see EndGameState procedure in a bit. For now just think, it’s the end of the game. If bird collides with either top or bottom spike, we make the bird die right away. For the obstacle spikes, we give a little leverage. We call isDead procedure. If bird collides with any of the four obstacles, we check first if it is moving left and not too far (less than middle of the screen), and then we see if it crossed the obstacle half way through, if it did, we let it live. After it is half way through and then collides with any other above or below, we don’t kill it either. We increased its speed to hit edge faster so it doesn’t keep colliding. This is why we had to reset the speed to 5 in SetupPlacements procedure. We do the similar thing for the right edge. IsDead returns true if we need to end the game, otherwise returns false.
Unfortunately bird died. Let the world know. Play the death sound. We need to show the menu screen. This time we will change the PlaySprite’s image to retry image (RetryButton.png). If current score is higher than the best score if any, we set bestScore to current score. Then we save it to the database. We hide all game components. We disable what’s not visible. We change the state. If we didn’t play before or didn’t score even 1, we do not have a best score. In that case, we just show the current score. Otherwise we show both side by side.
If you are still with me and didn’t skip any part of this tutorial, I bet you really are going to make something awesome someday. Did you realize we just made a game? I applaud your efforts getting this far. Remember, this is a tutorial to get you started. No one can stop you from enhancing the game or start something completely new. All the best!
If you want me to make more tutorials like this, support me by downloading and rating our Games.
Download the project OhMySpikes.aia, import, and try on a device.
How do you get Call “setup” block.
IM SO CONFUSSED PLEASE HELP!
I don’t think I understood your question. You call any defined procedures like SetupGame by dragging the procedure (e.g. call SetupGame as I showed above) from the procedure drawer of blocks window.
Hey it won’t let me download the barebone project please help, also very nice app very nice work!
You have to create a, “Procedure.” before you can do a, “Call.”
with the setupGameVisibility its coming up with an error it says thate there are too few arguments
Ok so to make the set up header you have to go to procedure and grab the first block and rename it to “Setup Header” then you go back to procedures and there it is! P.S. don’t delete the block you had to rename. your welcome
Thanks for the help
I don’t understood all of your question can you repete please?
How do you get the setupgamevisibility lock and to the side of it you have a visibility next to it
I still dont get it. How can I get these “Setup” Blocks? Please help.
It has the purple blocks if procedure do…
Also where do you get the pictures for this project
I have figured out my problem. But when i try to test the game it says ” The operation select list iteam cannot accept the arguments: ((-100 140 210 365) ” And alo all the other numbers why is this?
PLEASE HELP AGAIN! THANKS
Your select list block seems to be wrong. Compare with mine or read on the list tutorial I mentioned in the article.
I’ve got the same problem as @Taylor. My list block looks like this: http://scienceful.com/appinv.png
Do you know what I did wrong? :/
Joel, your declaration is fine. Error comes from your select blocks. Please check and try to understand this part on the tutorial-
Thanks for your quick answer!
However my select box looks exactly the same and it still doesn’t work :/
it’s the same thing with me,everything written their in your list blocks are exactly the same,
why is this happening??
how did you do it?
I believe I can answer that for him, to develop games like this you don’t need an understanding in HTML code, or C++ language. You just need a basic understanding of how to read common computer physics, which is easier than me saying it.
You go inside the app inventor known as : MIT App Inventor 2 and follow the tutorial this man’s tutorial step by step.
Also i have downloaded you app ” Rebel Chick ” Nice App!
Thank you. 🙂
On your 4 spikeprites do you have them on the main screen but just invisable? Also the ” SetupBirdPosition ” block has a blue – block that has two plug in spots one on top and one on bottom, i do not have that block. Only – blue block thats in the math is the one that subtracts two things from one another. I do not see one that has a – block that has two spots thats able for you to plug into!!!
If you dont understand what I am talking about go up to the ” SetupBirdPosition ” block and look after ” set. Birdsprite. Y.” to
You cannot dynamically create sprites. Yes, they are on the screen in design time and simply set to invisible. Each operator like +, -, etc can be plugged with another operator on each side. If you wanted to do (12 – 10 + 2), you would first get a + from math drawer and do 10 + 2, then get a minus and on left side you would put 12 and on the right side you would put your 10 + 2. You can do that.
how do i make more number next to each other in make a list in initialize global spikes y pos?
There’s a blue rectangle at left of “make a list” block. Click there. You will see “item” at left. Bring as many “item” you want under the list at right.
For external input, right click on “make a list” block and choose “external inputs” so the items are displayed vertically.
Why wont it allow me to make multiple items in one list?
List is for storing/manipulating multiple items. Perhaps you are doing something wrong? If you click the little blue rectangle at left of the list, you should be able to see items to add.
I just spent an hour of my time on this and it doesn’t work. I’m not blaming you it’s just that I’m really frustrated. Do you have any troubleshooting ideas for me?
Can you run the completed project .aia file that is given below the tutorial? If not, visit http://appinventor.mit.edu/explore/ai2/support/troubleshooting.html
how do you d9ownload and import the barebone project to app inventor?
“barebone project” text above has a link to barebone project file. Right click and save. You can import it in “My Projects” section when you go to http://ai2.appinventor.mit.edu/
Nice! 🙂 I’m trying to make a game and I have an idea of a game but it’s hard to get to a good standard. In your rebel chick game how did you get the screen to scroll right with different obstacles? How did you get an intro etc.. Rebel Chick is so well made compared to mine so far. Could you please help, Thanks! 🙂
Thanks! RebelChick was developed using libGDX. App Inventor is not quite ready for games like that.
Great game, great tutorial! Thank you.
I do have a question though. While testing the game, after completing it, the bird only flaps once then falls and won’t flap again. Do you have any suggestions as to how to fix it? Thanks.
I think you have missed something along the way. Try comparing the completed project I provided at the end of the tutorial with your version.
Most probably you stop the timer to flap somewhere.
Nice game! I have the same problem as Nick after the first tap the bird is falling down and wont flap again. How can I fix it?
sorry for my bad english im a student in hungary 🙂
pls answer thanks ! 🙂
Place the bird a little up on y-axis. Try placing the bird in center to experiment. It may die because you have placed the bird where it touches one of the spikes.
touch the bird and it dies and game ends.. please help!
Place the bird a little up on y-axis. Try placing the bird in center to experiment. It may die because you have placed the bird where it touches one of the spikes.
Where can I find the “get visibility block”
Choose the component in Blocks window whose visibility you want to modify (set true/false). Then drag the “Set
Visible To” and set it either True to be visible or false to hide.
How do I get the images
Bare bone project has the images.
From where Do you get the visibility block and “get visibility”
Choose the component in Blocks window whose visibility you want to modify (set true/false). Then drag the “Set Visible To” and set it either True to be visible or false to hide.
I worked SO hard on doing this and then as I went on tonight it said something like: Sorry this project has a blank field, this may be a bug in the system. Now my whole app is ruined 🙁 :(.
Do you think maybe you could E-Mail me a link to the completed one? So Sorry! I am just so crushed and sad
Complete project is given at the end of the tutorial above.
Sajal congrats for this tutorial!
Very nice your initiative
How do i get the Call GetListItem parentIndex block
In Get block’s drop-down menu, you should see parentIndex.
I cant seem to find the get block i will just download the .ai and copy and paste it
Look at Variable Blocks-
How do I get the purple call: Setup blocks in step 7?
Get a Call block from Procedures drawer and from the drop down list, choose the correct procedures.
i dont get it.
under procedures there is not a block that starts with ‘call’.
You sure? http://appinventor.mit.edu/explore/ai2/support/blocks/procedures.html
Thanks, but I can’t find the block Call: SetupGameVisibility that lets me attack the visibility:false block… can you help me? Thanks 🙂
Never mind, I figured it out.
What did you do? I have the exact same problem, and I can’t figure it out!
Wait…figured it all out too XD nevermind :b
Can you please help me? I copied the blocks and settings (in design menu),but the game still look like this…I don’t know what could be the problem.
Sorry for my bad english :/
hello, does all your app is created by app inventor? How about the iOS game, what’s the tool do you use to make the game? Can you give me some advises?
They are made with libGDX.
so i checked my code 3x and it doesnt work when i change screen because the bird just stays still and doesnt move at all so help?
How Exactly do you save the score because I am working on my own Game but when i load the game, it does not load the score.
You use TinyDB using a unique TAG to both read and store. See how I used above.
How do I add multiple numbers to a list?
Read first the Lists tutorial – http://imagnity.com/tutorials/app-inventor/list-blocks-on-app-inventor/
I cannot seem to find what .png files you used for all the pictures? Please help.
Download the project that is given above and you should see.
Is it possible to get the high score to remain even after you close the app and reopen it?
Of course. As shows in this tutorial, using TinyDB is the solution.
For such a simple game, this is rather complicated. Well done on having the patience to make this!
Hey sorry for ask again but, I do everything to discover the problem on list but don’t find nothing. I downloaded your project and everything works correctly. Please, can you help me by some way?
I read the tutorial and how to use lists that you placed here but until now I can’t solve the problem.
Thanks again and congratulations for initiatives and for help people.
I don’t really understand – what is the problem on list?
Where does the SetupHeader,SetupPlayButton,and SetupGameVisibility in the step of ‘when screen initialize to’ come from? I don’t see it mentioned at all before hand? I understand where to get the call procedure but like I have to bring in the SetUps first.
Nevermind I fixed it. I looked ahead in the tutorial and set up the procedures.
Anyway, when I test it, I have spikes only on the left side and not the right. Any way to help please?
donde descargo la imágenes ???
A huge thank you for this wonderful tutorial! My kids (8 and 10) and I have used it as a springboard to our own game using many of the tips you provided. We checked out Rebel Chick and are having fun with that too. Thank you again!
I am glad it was helpful. Let me know if you published your game/app anywhere so I can download and take a look.
Sorry but can you make a visual list of which components you used in screen 1 and where you can find them like in the palette
P.S.- I can’t download the barebone project
I have a Windows 7
I figured everything out 😛
Thank you so much for the tutorial!!
Where is ScoreDB
It’s a non-visible component like a clock.
Thx for your tutorial! Its helped me so much!
You are very welcome!
could you pls help me t change the icon of my app made by appinventer .its always android icon.thank you.
Check this out-
I am trying to create this game on AI2 – latest version… i started with the bare bones project, then added all the blocks according to your tutorial, but it just doesn’t work right… I have gone through all the blocks troubleshooting, and i can find no further errors. What do i do now?
I think that maybe one or more of the properties is set wrong on the device window, but have no way of knowing which one is wrong
Fist download the complete project I provided at the end of the tutorial and run it on your device. If this works, maybe you missed a step on the tutorial or did something wrong.
why did my score didn’t appeared ? try so hard :'(
Hey I finished the project however, when I start the project I receive a message saying
The operation select list item cannot accept the arguments: [((-100 140 210 365) (72 145 297 360) (68 140 280 355) (170 230 300 360) (62 205 290 354) (80 215 295 367) (77 140 210 -100) (80 150 300 367) (64 155 307 365) (109 160 320 -100))] [true]
Note: You will not see another error reported for 5 seconds.
I looked throughout the whole thing and could not find the problem.
Can you please try the completed project that I provided at the end of the tutorial and see if it works?
that is soooo werid
Really good project,thanx a lot . every thing is working well. but I have got some problem. as I am keeping this as my mini project, I need to display the score after the game is over . can you please help me how to display the score and the highest score.
The above tutorial does show how to display scores.
but the score is not displaying . I mean after the game is over,the score n the highest score should be displayed to the player.please solve this problem
Since AI2 introduced Percent for setting height and width, created this issue. Change the GameCanvas’s Height to 90% (Just type 90 on Height’s Percent box) and ScoreLabel’s Height to 10% (Just type 10 on Height’s Percent box). Or download the project again from above as I already fixed them. Thank you for spotting and reporting it to me.
can you please solve another 2 issues for me.
1.what should I need to change to reduce the speed of the bird while it is flying.
2.can I introduce level number on the screen to be displayed soon after the bird completes its level
To reduce speed, change speed to 2 where I set above to 5. Do it for each occurrence where the speed is 5. Don’t change where speed is something else like 20.
You can use level just like how I used score to display.
SetupGameVisibility procedure takes a boolean variable as a parameter. We named the variable visibility. i see that it is embedded in the code. how do you do it?
It’s a comment. Click on the question mark on the block to include a comment.
Help! Whenever I tap on the screen the bird does not jump. The bird just moves across the screen over and cover. Also, I can’t get the spikes to switch sides. I checked my like 10 times and it matches the one above.
I just checked and everything is fine. You must have missed something. All screenshots above are from the actual project file that I provided at the end of the tutorial.
is it possible to build this in the ai2 app inventor without downloading the bare bone project?
okay because i am making this for fun and noticed that some of the blocks i cant seem to find and some of the variables are not there as well.
There shouldn’t be anything if you start from scratch. That is why you don’t see the blocks. You have to create them following the tutorial above.
can you please explain how you got the setupgamevisibility to have a boolean variable please? and how you get visibility for it aswell
i realize i have used this program before, i was wondering if you could explain how you got the program to use the setupgamevisibility command to have the visibility variable i’m confused on that i have reread again and again but still cant figure it out.
@Kyle You have to create a procedure before you can find it in procedure drawer. I created before I called-
Hello Sajal how are you? The project is already running, However when the bird is going right (headingLeft=false) and touched the spikes, there is no reaction on calling the end state or dead instead it scores..i already tripled checked the blocks you made from mine and i think there is missing on the BirdSprite.collidedWith code.
Thank you very much for this project and for your time.
It does. Check inside isDead procedure. There’s a NOT clause for right edge check – if not heading left. Also I ran the project and it works fine. Maybe you should download the final project provided at the end of the tutorial and run on an actual device and see.
hello sajal..its all fine now..there is nothing wrong with the collide and isdead..i found the problem..and its in the setupPlacements where i didnt notice that all variables are isOnleft=flase..and the other one should be headlingleft..
Hey! I´m 15 and I´m making this for a school project. Have made my own designs for the game. Everything works except one little problem. I have programmed the blocks exactly how you did, but the bird falls down very fast and the top and bottom spikes don´t appear, and so, when the bird goes to the top or to the bottom, it bugs and it stays at the top or at the bottom whole the time and it just keeps on scoring!
I hope you can help me with this, because I have to turn in this work in two days!
Hi Donis! First try the complete project file that I included end of above tutorial. Try it and see if everything works. If it does, then you missed or did something wrong when you followed the tutorial. You still have two day. You can try starting the tutorial from scratch.
Hi Sajal Dutta. I have to create my own app and upload it to the android market for my college now class. I already did a few basics and intermediate tutorials. I want to know if I can make a game similar but simpler than Bomber man. I know how to make pictures turn invisible but I want to know if I can make a character place bombs and have it explode and when the boxes disappear, coins appear. So I want to know if I can make two ImageSprites in the same x and y axes and be able to make one disappear and other appear. Please Reply ASAP!!1
Yes you can. But another way would be have the coins invisible at start. Doesn’t matter what x and y coordinates since it’s invisible. When you set boxes to be invisible, before doing that, set the x and y of coins as the same as the box. Then set box to be invisible and set coins to be visible.
You should play with http://craftyjs.com/
already addicted to it
Please can anyone tell me how to add many numbers in a list as done in the SPIKES_Y_POS step
can’t we use jpg formats for image sprites?
If you don’t care about alpha channel then yes, you can.
Its not letting me download the file for the layout, so I am doing it all by scratch, can anyone help me because I am confused. Do I create multiple screens? what’s the rest of the layout?
Something maybe wrong with your browser because the file is there. Try right clicking on the file link and save link as as or similar depending on what browser you use.
I really liked it ,but Idon`t understand the components of the screen one .
Where are the images of the birds in the screen ??????
And where I can find them ?
It’s under Media. Check the bottom section of the first screenshot – http://imagnity.com/wp-content/uploads/2014/08/OhMySpikes-UI.png
i have a stupid issue, whenever i tap the screen to make the bird jump it just keeps going up and dies. probably a stupid mistake but i have looked over the code more than i want to admit to too.
Maybe put the bird a bit below the center of the screen and try.
How can Create a simple calculator program؟
Could you show a sample for the program; that would be helpful.
The score isn’t working on the bottom! Any fix?
wHATS THE POINT OF MIT APP DEVELOPER WHEN U CAN USE C++ FOR THE SAME THING
So even an 8-year old can easily pick up programming!
How do you get Call “setup” block.
I am SO CONFUSED PLEASE HELP
Before you can call a setup procedure, you need to create that procedure. For example, you should create SetupGame procedure first. After that, get the call procedure block from the left panel in the blocks editor window. It looks like this- http://appinventor.mit.edu/explore/ai2/support/blocks/procedures.html#do
How do I open the file for the pics and everything? Please help! Thanks!
I’m putting in the pics and have no idea which one goes to which.
thanks man for tutorial i had a little difficult but i made it
Great tutorial everything worked great.
How come i cant make the big list for y pos like you did?
How do you get that extended list with -100, 140, etc.?
Hi, I have a quick question.
I followed every step, and I have encountered one small problem;
whenever I get to the actual game screen, it’s not possible for me to make the bird sprite move like it should. It stays still even though the code seems to be correct. Could you point out to me where to possibly look?
Thank you in advance!
Check on the speed/heading/etc
Can you pls give the right pixel height and width for the bird and spikes (left, up, bottom) i did the app with your tutorial but i tried do modify it like i want. Now i have create my own bird and spikes but when i run the game,, the spikes are not in the screen visibel and my bird just fly 1mm and die in the middle of the screen. Somethin gis going wrong but i dont know what. Maybe you can give me some ideas. Thank you
You can download the images and see.
I created the app and did everything but as soon as I start, the bird just dies right away.
guys please try this app I created. This is my very first app I created using app inventor. Please comment if you have any suggestions.Thanks!
Hello Sajal, I made my app but my bird didn’t flap when I’d tapped, what wrong with that :'( please help me
Thank you so much for the tutorial ! Really enjoyed it.
hi! i have a problem.when i play start my bird just go from one side of the screen to the other side. can you help me?
Hey is your Programm free or do you need to pay, and where can I use it?
Use it any way you like just make sure to use your own graphics if you will publish it somewhere.
I don’t know how to make this and I can’t download the file! Can you please email me the project; email@example.com please and thank you
Great tutorial, thanks!
Although I have a problem, the bird just vanishes sometimes and it’s invisible. I compared my blocks to yours and I can’t seem to find anything different. Can you help please? where should I look for the problem -what block-
Hi, I still can’t figure out how to do the ‘SetupHeader, SetupPlayButton and SetupGameVisibility’
How do I import the barebone thing? It says when I import it into the import extension thing that it isn’t a component file
Also I can’t find call setupheader, setupplaybutton, and setupvisability.
NVM both of those things, i figured them out but, i don’t know how you got the list thing to have four slots for each list
How do you make it easier? It just flys up and down too fast. If I’m lucky I can score 1 point.
Here’s the problem: the bird flys up and down too sharply. It is impossible to complete the average level because the space between the spikes is too small. It needs to fly slower and not go straight up and down sharply.
Where do you get “HeaderSprite”?
This is a good place to make games
Hey there, I was wondering how to make a pause menu. I have it partially figured out, but my main problem was how to get the bird and everything around him to stop moving so the game is actually paused. Also, if the bird just sits on the ground, he spins around and racks up points incredibly fast. If you could help me solve these problems, that would be greatly appreciated.
The operation Visible cannot accept the arguments: , Note: You will not see another error reported for 5 seconds.
this mean and how do I stop it,
I followed the instructions very carefully but this still happened
please help me !!!
is there a source code???
When i open the Oh My Spike on my phone I get an error code 703 but have went through the tutorial several times to clarify i have duplicated the blocks identically, can you please advice how to fix this issue?
i have followed the tutorial to the letter but when I try to open it on my phone it automatically comes up with “Error code 703: Unable to play” can you please give me advise how to correct the error?
Hello, in my game the bird doen’t appear, any help?
This is Such an amazing peice of work
Hey I was wondering why my bird falls so fast, also the number on the bottom keeps going when the bird dies. Any ideas?
Hello from Mr.Saxon’s Computer Science Student
where do i download the picture files for the sprites.
how to you add multiple items into on list row on the y axis?
For the setupPlacements I can not figure out how to do the “Get list item procedure” i followed the direction but i cannot find the block
Can someone help me, i can’t find the “call, get list item, parent index, get temp, childindex, get 1” block in the Setup Placements. I have read ahead and i can’t find it in the procedures drawer. Pls help this is due tomorrow!!!!!!!!
This is one of the greatest games of all time, thank you for allowing me to code such genius
Hello, I followed this tutorial for school, and I was wondering how I could make the bird slower. I can’t find anything in the code that would affect how fast the bird is. Can you please tell me how to change the speed of the bird?
Hi i made the app but when i tested it the the start button stayed in the center and i did not see the bird or the spikes and the score sound was there please help.
How can I slow down the bird? It goes very fast