Structured Canvas Language™ - Writing Clock Cheese

Start - animated background

Previously we simply placed the background image for the game. Now we will put some animated cogs in the background. We do this by defining a simple ring sprite then cloning it. Then, for each clone, we change some key values in order to differentiate them.

You can give clones names, but if they do not need to be directly referenced, it is easier to work with them nameless. This is done by referencing the most recently made clone with the special name: _clone.

To use _clone, just use it whenever a sprite name is expected.

The ring sprite image we use is sized at 680 pixels squared. Therefore the center of each is at xy=340,340. Since we want the rings (or "cogs") to rotate around the center, we'll explicitly set the center of the Ring sprite to 340,340. Clones of Ring will retain this value.

Sprites are cloned using the "original" or the "current" version of the sprite. "original" uses the sprite's original definition to create the clone (as specified with "create sprite"). "current" uses the existing sprite as it is on the screen (assuming it has been launched). Here we use the original sprite definition.

New code in red


create sprite from title.png as TitleImg
	where x=0 y=0
end

create sprite as Ring
	where
		center=340,340
end

create routine as Start
	launch TitleImg

	clone from Ring using original
	update sprite _clone where size=.5 and image="blueRing.png" and x=170 and y=120
	insert into _clone where alt=(sub
		create rotation where speed=-40
		end)

	clone from Ring using original
	update sprite _clone where size=.7 and image="redRing.png" and x=160 and y=590
	insert into _clone where alt=(sub
		create rotation where speed=40
		end)

	clone from Ring using original
	update sprite _clone where size=.6 and image="greenRing.png" and x=550 and y=350
	insert into _clone where alt=(sub
		create rotation where speed=40
		end)

	clone from Ring using original
	update sprite _clone where size=.2 and image="barRing.png" and x=500 and y=100
	insert into _clone where alt=(sub
		create rotation where speed=-40
		end)

	clone from Ring using original
	update sprite _clone where size=.35 and image="redRing.png" and x=200 and y=390
	insert into _clone where alt=(sub
		create rotation where speed=40
		end)

	clone from Ring using original
	update sprite _clone where size=.4 and image="greenRing.png" and x=550 and y=750
	insert into _clone where alt=(sub
		create rotation where speed=40
		end)

end

The "update sprite _clone" command allows us to change the most recently created clone. Here, we change size, image, x, and y values of the clone. Important: in routines, when listing values to be updated, those values must be separated with "and" so that SCL knows that more values are coming.

"insert into _clone" allows us to set an alteration on the clone. We'll alter the sprite with a rotation which we define inline using the alt=(sub mechanism. You can read more about using alts and 'sub' here.

Check back soon for the next part or follow on us Twitter