241,998
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
The 19 step process that patdi85 laid out worked perfectly for me. Still not sure what superclutz and thatsmartdude are talking about other than trolling...
Though there SHOULD be a simple event control to keep actors on the screen...
2
I constructed the event as shown and it seems to work just fine. I upgraded to 2.2 just before starting this tutorial. I barely managed to find the right blocks to drag together. A little more detailed instructions for which blocks to use and in what order would be helpful.
0
Using Stencyl 2.2, I had to specifically set
"[if [x] of [self] < 0"
to
"[if [x (on screen)] of [self] < 0"
for things to work correctly. When I used the "x" setting, I had issues with the ship disappearing on one side of the screen, no matter what I adjusted numbers to.
It works if you set things to "x (on screen)" in the beginning of the "if" statement.
1
One thing I was noticing is that it doesn't seem to be utilizing the whole screen correctly when I test the game I only get about half the height so I'm assuming the width must be affected too.
0
there is a bug where the ship goes off the left of the screen because in the first "if" block, when it says "if x of self is < 0, set x of self to 1" what ends up happening is the actor is destroyed or something before it's x can be set back to 1.
The solution is to go to the first if block, and change the zero to a one.
0
For those getting lost in step 66, I just found the Screen: Width widget under the Scene group, then click View, and you can see it under screen bounds.
To clarify, if you don't subtract the width of your ship, then it could disappear off the screen completely though you may still be able to bring it back. But you want the right side of the ship to bump into the right-hand wall, not go through it.
0
I have noticed a few differences between the version of Stencyl used in this tutorial, and the one I have.
1. Where can you see what version you are using?
2. I don't see an ability to create a new "update event" on my design mode setup. I guess I can either create a whole new behavior for keeping the ship on screen, or include it in my control loop, though that seems like bad scripting, as I was taught that a method should really only do one thing, so I guess I'll make a separate behavior for this.
3. I don't have any 'events' in my version, as was displayed in part 7 of this tutorial. I only have 'behaviors', so that's what I used to play the music in chapter 7.
0
Snortch, I understand the confusion. It's not very clearly explained but here is how I understand it. Everything in the engine is read from the left (x-wise). So at the very left of the screen x=0. That means the right most side of the screen can be however wide the screen is. So if your scene is 640 pixels wide, the right most side of the screen is 640. As for the number "1" it's referring to the pixel point. So setting your "left side" rule to an x of 1 means you'll be constricted to the first pixel on the screen (presumably the very first visible pixel on the left side). The "right side" rule says you'll be constricted to the last pixel of the screen of the right side. It does this by taking the total number of pixels(say 640) minus your own width (40 pixels maybe?) minus the 1 space extra to keep you from going off the screen. It subtracts your player width because it has to constrain your "ship" from the leftmost side (as, again, it controls and reads everything from the left first.
If it didn't subtract the "ship" width you would be able to fly almost all of your ship of the edge of the screen (minus the 1 pixel they subtract at the end so you'd see a sliver of your ship).
If (vice-verse)they didn't subtract that 1 last pixel most of your ship would remain of the screen but 1 pixel would lean off the edge.
0
