A project utilizing the same scrolling engine for its large open-world.

An extensive scrolling engine is a project engine that maintains an extensively large scrolling world. Suppose a world has approximately 300 scrolling tiles for a large open-world game. Having all 300 clones present simultaneously could cause major lag due to an excessive amount of scripts and rendering. An extensive scrolling engine maintains low processing power by only generating the scrolling tiles that are nearby the current location in the project. When scrolling tiles fall too far off the stage, the engine automatically deletes them. This tutorial explains how to develop and maintain a very wide-scrolling world.

Note Note: This tutorial specifically deals only with x scrolling, but the concepts can be used for y scrolling.
Note Note: This tutorial assumes the reader has basic knowledge of scrolling.


Costume Arrangement

Only one sprite is necessary for the entire scrolling world, because each landscape panel is a clone of the landscape sprite arranged in a row, with a different costume on.

The first clone wears costume #1, the second clone, sitting to the right wears costume #2, and so on. The arrangement of costumes in the base sprite must match the order of the landscape move left to right, so that the (scroll x) variable changes its value, all these clones move together.

The variable (scroll x) should be created to hold the x position of the landscape.

Positioning the Landscape Panel Clones

To stop the scrolling when the player moves to the far left or far right part of the game, two variables need to be created.

(scroll x beginning) // for this sprite only
(scroll x ending) // for this sprite only

These hold the x position of the beginning and end of the landscape.

Another variable needs to be created so that it can be used to determine if the landscape clone has left the visible area of the stage.

(width of view) // for this sprite only

Now the initial values need to be set.

when gf clicked
set [width of view v] to (600) // 600 is recommended
set [scroll x beginning v] to (-440) // find the value that works best for you
set [scroll x ending v] to (-1850) // this has 5 landscape tiles and needs to change this to fit your game.
set [scroll x v] to (scroll x beginning) // start from the far left

Moving the Landscape Panel Clones

When arranging landscape panel clones, the player movement input will need to be captured and used to update the (scroll x) variable made earlier.

when gf clicked
    if <<key (left arrow v) pressed?> and <(scroll x) < (scroll x beginning)>> then
        change [scroll x v] by (1)
    if <<key (right arrow v) pressed?> and <(scroll x) > (scroll x ending)>> then
        change [scroll x v] by (-1)

Notice how moving left increases (scroll x), this is so the landscape scrolls in the opposite direction to the player's movement.

List Usage

In the list, "1"s represent the clones currently generated within the landscape, and "0"s represent non-present clones too far off the stage.

A list needs to be created to help organise the landscape panel clones.

(clonesPresent::list) // for this sprite only

This list is used to control what panels are currently visible and active as opposed to the panels that are not visible and non-present.

During every frame of the game, the landscape sprite checks the (scroll x) variable and works out which three landscape panels need to be present. If the (scroll x) variable's value is, -480, the clones panels wear costumes 1, 2, and 3 because each costume is 480 pixels wide. Once (scroll x) reaches the value of -720, the landscape panel clones would wear costumes 2, 3, and 4. Which means the panel clone that was wearing costume on is no longer needed because its no longer visible on the stage. The landscape sprite uses the (clonesPresent) list to work out which panel clones are already present on the stage, which is why it doesn't delete the clones wearing costumes 2 and 3.

The list should be initialized properly with the following script.

when gf clicked
    delete all of [clonesPresent v]
    repeat (5) // "5" is the number of scrolling costumes
        add [0] to [clonesPresent v]

In the list, every "0" represents a panel clone that is not visible on the stage, and every "1" represents every panel clone that is visible. When a panel clone is created, it sets its value in the list to "1" to show that it is a visibily present. This way the lanscape sprite only creates one planel clone for each landscape costume needed.

When a clone moves too far off the stage, it sets its value to "0" again, because it is no longer visible.


The following script can be used to scroll each individual panel clone until it is no longer visible on the stage.

Once the panel clone is no longer visible, it is deleted to save memory.

Smooth Edge Scrolling

By scaling the sprite before and after changing its position, it needs to be made so it scrolls smoothly off the Scratch stage.

Note Note: The following script assumes only horizontal scrolling is in usage.
when I start as a clone
    set y to (0) // value can be changed to vertical position
    repeat until <([abs v] of (((width of costume) * (costume [number v])) + (scroll x))) > (719)> // repeat until no longer visible (719 pixels)
        set size to (200) %
        set x to (((width of costume) * (costume [number v])) + (scroll x))
        set size to (100) %
    replace item (costume [number v]) of [clonesPresent v] with [0] // records deletion of this clone
    delete this clone

The panel clones' job is straightforward, it moves with the (scroll x) value until too far off the stage, then it gets deleted to save memory. The landscape sprite, which creates the clone, uses the following script to check and create new panel clones with the correct costume.

define scroll engine // run without screen refresh
set [basePosition v] to (round ([abs v] of ((scroll x) / ((width of view) - (width of costume))))) // find which costume should be displayed in the middle of the screen
set [i v] to (-1)
repeat (4) // make sure the costumes surrounding basePosition are being displayed by sprites
	if <(item ((basePosition) + (i)) of [clonesPresent v]) = [0]> then
		switch costume to ((base position) + (i))
		replace item ((base position) + (i)) of [clonesPresent v] with [1] // clone now made
		create clone of [myself v]
	change [i v] by (1)

Finally, the landscape sprite needs to always run the scroll engine::custom.

when gf clicked
hide //hide the original sprite
    scroll engine::custom

See Also

External Links

Cookies help us deliver our services. By using our services, you agree to our use of cookies.