241,996
Views
Beginner
Level
97
Comments
Crash Course 2: Invaders - Part 9
by Hectate (Updated on 2015-02-01)
Part 9: Keeping the Ship On Screen
You probably played around with the game so far and noticed something; the ship can go off the screen (and doesn't come back!). Let's fix that, we need to restrict the Ship’s position so it can’t go past the screen’s edge.
Step 66: Create a new When Updating Event for the Ship. We need to add an If and an Otherwise If block inside.
We will use the first to check if the Ship’s position on screen is beyond the left-most edge of the screen (an X position of 0). The second will check if it’s past the right-most edge (a value equal to the screen’s width) of the screen.
Note that it will need to take into account the Ship’s width. Stencyl measures an Actor’s x position from the left-most edge of the graphic; if we didn't account for the Ship's width, the right side of the ship could go further than the right side of the screen.
Step 67: For our conditions, we need to compare two numbers; the Ship's position and the left or right edge of the screen. Let's grab the Greater Than and the Less Than blocks from palette. You can find them in the Flow category, Conditions sub-category, in the Equality section.
Put the Less Than (shaped like < ) block in the top If block's empty space. Put the Greater Than (shaped like > ) in the second, Otherwise If block's empty space.
Step 68: As mentioned previously, one of the numbers we want to compare is the Ship's position. We need a block that tells us that, and we can find it under the Actor category, Position sub-category, Position section; visible as x of Self.
We want to drag two of these blocks out; one for each of our comparison blocks (the < and > blocks). We need one in the left side for both. We need one more change for these two blocks, we want them to say "x (on screen)" instead of just "x". We can click on each one and change them easily with the drop-down menus that appear.
Step 69: Now that we have our first value to compare, we need a second value to compare it against. For our first comparison, we are just going to compare to 0; since an X value of zero is the left side of the screen. All we have to do is type a 0 into the right half of the Less Than block.
The second, Greater Than, comparison will be slightly more complex, however. As previously noted, we have to account for the width of the actor on the right side. Let's get the following blocks and drop them side-by-side in the workspace.
- Minus (found in Numbers & Text > Math > Arithmetic)
- Screen Width (found in Scene > View > Screen Bounds)
- Width of Self (found in Actor > Properties > Size)
We then need to drag the Screen Width into the left side of the Minus block, and the Width of Self into the right side. The result will be a stack of blocks that looks like the below image.
We need to drag this set of blocks into the other half of our second condition. Be sure to grab the Minus block to move them in, or we might only get one of the blocks inside of it instead.
Here's a image of what we should have so far.
Step 70: The goal of setting up these two conditions is to identify when the Ship has gone too far and has reached the edge of the screen. Since we now have those conditions set up, we can have something happen when they are true.
Given that our goal is to keep the Ship on the screen, we want to reset the position of our Ship Actor so that it is back on-screen anytime these conditions are met. To do so, we need two of the Set X to [ ] for Self blocks; one for each condition. Let's drag a couple out and put them where they belong.
Step 71: Just like with the comparison for our condition, the first value is rather easy. We just need to put a 1 into the block so it reads Set X to 1 for Self. Simply put, if our Ship is ever at 0 or less X position (further left than the left edge of the screen), we are going to force it back to 1 instead. This will prevent it from ever going off the left side of the screen.
Again, like our second comparison for our condition, the second value requires a few more blocks to do what we want it to. In this case, let's get the following blocks. Remember that you can ALT-drag on our existing blocks to duplicate them; you should do this to grab the entire stack out of the comparison.
- Minus
- Screen Width
- Width of Self
- Minus (yes, we need a second one)
Again, we need the same math to subtract the width of the Ship from the width of the Screen. This time though, we put that stack of blocks inside the left side of the second Minus block. On the right side, we enter a value of 1 so our Ship gets replaced 1 pixel inside of the right edge of the screen.
Step 72: Now we just need to take the above stack of blocks and insert it into the second Set X to [ ] for Self block in our conditionals. The complete set should look just like the image below.
Once you’ve got this new Event set up, test your game. If it’s working, and your Ship stays on screen, it’s time to move on to our next major Event, enabling our Ship to fire the Bullets we created earlier.
97 Comments
After a little bit of trial and error by repositioning blocks, I was able to figure out how to get the ship to not leave the screen on the left or the right side. My main concern with this part of the tutorial is that I dont think that I fully understand why these blocks limit the ships ability to leave the screen.
This part of the text gets close to explaining how this works, but I'm not 100% confident that I understand:
"Step 66: Let’s move on to restricting the Ship’s bounds so it can’t disappear off the screen’s edge. First, create a new Update Event. Then, set up two checks using an if and an otherwise if block. The first checks whether the Ship’s position is beyond the left-most edge of the screen (an X position of 0), the second checks whether it’s past the right-most edge (a value equal to the screen’s width), but takes into account the Ship’s width. Stencyl measures an Actor’s x position from the left-most edge of the graphic, which is why we need to subtract the Ship’s width."
If someone that understands could create a simple illustration that shows how this logic works, I think it could really help with dispelling confusion here.
0
Here is step by step to getting the ship on screen to work:
1: Add event updated.
2: From flow, conditionals: drag on if
3: From if dropdown, select comparison, inequality , 0 < 0. there should two dropdowns.
4: 1st drop down, select actor, basics: select x of self
5: Enter 0 in second dropdown
6: From Actor, position box on right, select set x to 0 for self. Override 0 with a 1
7: From flow, conditionals select otherwise if and drag under existing if just created.
8: In otherwise if dropdown select comparison, inequalties, select 0 > 0
9: In the 1st dropdown of the 0 > 0, select actor, basics: select x of self
10: in 2nd dropdown if the 0 > 0, select math, Arithmetic, 0 - 0. You should now have 2 dropdowns.
11: In 1st unfilled dropdown for the 0 - 0, select scene, screen width
.
12: In the 2nd unfilled dropdown for the 0 - 0, select Actor, Basics, width of self.
13: From right, under Actor, Position, select set x to 0 for self under the otherwise if.
14: select math, Arithmetic, 0 - 0. You should now have 2 dropdowns.
15: In the Math 0 - 0, in the first dropdown, again select Math, Arithmetic, 0 - 0. this will give 3 dropdowns to create the second part of the otherwise if.
16: In 1st unfilled dropdown, select scene, screen width
17: In 2nd unfulled dropdown, select Actor, Basics, width of self.
18: In 3rd dropdown, enter 1. Ath this point it should match pitcure above Step 67.
19: Test and verify everything works.
7
OMG!!! on this part everybody dont even do the tutorial just do what ThatSmartDUde descibes instead i could not get mine to waork at all the boolian thing just didnt work because i couldnt figure out how to get the with of self to connect so truuuust me go to behaviour for the ship select cand not leave screen and thats it ..it works and if you look at the edit part its only two blocks in the event dialog!!! creepers wtf..ernty? just do it and if you must make a a new update event and copy that there instead this part of the tutorial is bogus. 4real.
0
This part of the tutorial needs much more clarification. I only worked this out by translating pgarc7a's post. Where have we been shown that you can 'nest' booleans?
To clarify for others:
When adding in the booleans (green hexagons) go to Comparion, then Inequality and add the hexagon with 0<0 (the zero's are boxes which you can change).
In the left white box, click the down arrow, go to Actor, then under Basics you'll find the 'x of self' bit. Leave the box on the right empty.
In the Otherwise if repeat the steps above except choose 0>0 under Inequality. Put 'x of self' in left box.
In right box click the drop down, go to Maths and select 0-0.
In the left box of '0-0' click the drop down, go to Scene and Select 'Screen Width'.
In the right box click the drop down, go to Actor and select 'Width of self'.
That's just to get the first screenshot.
0
I was able to fix the part when you go to the right it won't disappear if you change the first part which said " if x of self is less then 0 set x for self to one" to if X of self is less then 3 set X for self to four. This worked for my game.
0
every time i move my ship to the far right of my screen it just disappears before i even get to the edge.
0
There is a behaviour to do it if it dosnt work, it is called Ceannot Exit Screen in the Motion Section
1
Even though specific steps was missing, I managed to get the ship to stay on screen (right side) but missed the Left Side. Fixed now though. I think its good not all details were given, means we are using the program and learning from our mistakes.
1
How does this make any damn sense, and why didn't the author explain how to get these items on the grid? 0)0 where the heck is that?
0
actually nvm on the [y] of [self] bit that was just me not knowing wat i was talking about
0
