Scrolling (creating a scroller)

Материал из Поле цифровой дидактики

Шаблон:April FoolsШаблон:StubШаблон:Merge A scroller is a type of project that makes the background "scroll", or move out of the screen to make it feel like the player is moving. Шаблон:Note

The end product of this tutorial is a simple project where every time an object touches the player, it moves away from the player some more.

Preparation

Sprites

There will be four sprites used:

  • Player: This is the sprite that the user controls.
  • Background: This is the scrolling background.
  • Hitbox: This is what sprites that touch the player will actually be touching. It is not shown.
  • Object: The object that is interacting with the player.

Costumes

  • The player and object can be anything
  • The hitbox should be a rectangle or some shape that covers the place that actually counts as touching the player
  • The background has to fill the entire screen and ideally chain well (i.e. one side of the background should smoothly transition into the other side)

Variables

  • scrollx: "for all sprites", this tracks the virtual x position.
  • myx: "for this sprite" on the Object sprite, this controls the object's virtual x position.

Programming

Setup

In the Hitbox sprite, add the following script:

whenclickedsetghosteffectto99notvisibletotheuser,butstillnottechnicallyhiddenforevergotoPlayerend

This will make the hitbox hidden, but other sprites can still check if they are touching it. The hitbox will also move so that it covers the Player correctly.

In the Player sprite, add the following script:

whenclickedsetscrollxto0resetvirtualxto0gotox:0y:0thespriteitselfshouldnevermovesetrotationstyleleft-rightitshouldpointleftorrightonly

This will simply initialize the positions.

In the Background sprite, add the following script:

whenclickedgotox:0y:0gotobacklayerthebackgroundshouldalwaysbeattheback

This will move the background to the center and move it behind all other sprites.

In the Object sprite, add the following script:

whenclickedsetyto0thiscanbeadifferentvalueifnecessarysetmyxto100thiscanbecustomized

Basic Movement

Expand the script in the Player sprite as follows:

whenclickedsetscrollxto0gotox:0y:0setrotationstyleleft-rightforeverifkeyrightarrowpressed?thenchangescrollxby5pointindirection90endifkeyleftarrowpressed?thenchangescrollxby-5pointindirection-90endend

This will change the virtual x so that the backgrounds will move.

Background Movement

Expand the script in the Background sprite as follows:

whenclickedgotox:0y:0gotobacklayercreatecloneofmyselfforeversetxto-scrollxmod480end

This will make the background move so that it appears as if the player was moving.

Add the following new script as well:

whenIstartasaclonegotobacklayerforeversetxto480-scrollxmod480end

This will add a copy of the background shifted one Stage width to the right, so that the illusion is not broken by the first copy letting the white Stage through.

Object Movement

Expand the Object's script as follows:

whenclickedsetyto0setmyxto100foreversetxtomyx-scrollxThismakestheobjectappearinthecorrectpositionrelativetotheplayeriftouchingHitbox?thenchangemyxby100thescrollingequivalentof"changexby(100)"endend

This will make it appear in the correct position relative to the player.

That is all that is necessary. More objects with more complex behavior can be added following the "Object"'s example.