Javascript for Begginers - Construct 3

4

Index

Tagged

Stats

4,379 visits, 8,220 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 5 Sep, 2021. Last updated 7 Sep, 2021

Now we will see how to work with sprites

We declare Sprites like this :

runtime.objects.Sprite.getFirstInstance();

so we can pass into a variable like

const player = runtime.objects.Sprite.getFirstInstance();

And now you can get like below and more.

player.x 
player.y
player.width
player.height
player.uid
player.name
player.angle
player.opacity
player.animationFrame
player.animationSpeed
player.isVisible

Now you can manipulate the sprite like bellow so in this example on start of layout the sprite.x will to position 500 , so you can do the same to angle , height etc..

async function OnBeforeProjectStart(runtime)
{
const player = runtime.objects.Sprite.getFirstInstance();

player.x = 500;

	runtime.addEventListener("tick", () => Tick(runtime));
}

Create object : Sprite

Now we want to create a sprite on start of layout so

runtime.objects.Sprite.createInstance("Main",  500 , 400);

So " Main" is the name of Layout , 500 is the X and 400 is the Y .where it will be created

Now we want to create a sprite every 1 second so we can use 

setInterval(() => create() , 1000);

So create() is the function we gonna call , ad the 1000 is the seconds 1000 = 1second

Now we gonna call the function to create the sprites

runOnStartup(async runtime =>
{
	const player = runtime.objects.Sprite.getFirstInstance();
	setInterval(() => create() , 1000);

function create(){

runtime.objects.Sprite.createInstance("Main", runtime.random() * 500 , runtime.random() * 400);
}
	
	runtime.addEventListener("beforeprojectstart", () => OnBeforeProjectStart(runtime));
});

Now we gonna destroy this sprite after 1 second

const player = runtime.objects.Sprite.getFirstInstance();
setInterval(() => destroy() , 1000);


function destroy(){
player.destroy();
}

Now lets work with some conditions

Lets stop to moving a sprite that has been dragging by drag and drop behaviour

Lets limit it to layout

const player = runtime.objects.Sprite.getFirstInstance();
	if (player.x < 0)
		player.x = 0;
	if (player.y < 0)
		player.y = 0;
	if (player.x > runtime.layout.width)
		player.x = runtime.layout.width;
	if (player.y > runtime.layout.height)
		player.y = runtime.layout.height;

Now lets change the animation frame if the frame = 0 lets change frame to 1

const player = runtime.objects.Sprite.getFirstInstance();

	if (player.animationFrame === 0)
		player.animationFrame = 1;

another example is

	if (player.animationFrame === 0)
		player.isVisible = false;

  • 1 Comments

  • Order by
Want to leave a comment? Login or Register an account!