what is the search term I am looking for to adapt easelJS to JS that will work in animate?

[Bundaberg North5E42]

Guys so I am not just here asking stupid questions all the time can you please point me toward the reference or give me the search terms I need to look up how to convert an easelJS file like the asteroids examples - or just some general Javascript from a tutorial- into something that will work from the animate cc timeline or can be used in a class file as a separate code.js.

I understand it can be done but cannot find the correct "easelJS to animate JS" dictionary...  is there such a thing?

Yes I am following your advice, yes I am looking at tutorials and reading the docs, I just seem to be making such painfully slow progress.  

If you can send me toward the right references this would really help

Thanks

[kglad]

you can add another (in addition to createjs) javascript library (eg, anime.js), if that's what you want.

and you can use plain old javascript in your animate canvas project.

[Bundaberg North5E42]

Hey thanks kglad - I found this

https://community.adobe.com/t5/animate-discussions/html5-canvas-animate-cc-how-to-add-external-scrip...

it gives a step by step but then says its only for AS3 - I can follow the steps until I get to the last step where it says in the publish setting you click on the wrench button - but in adobe animate cc HTML5 canvas there is no wrench button in the publish settings?

Can you please point towards the documentation- I am searching and searching but cant seem to find anything.

I am super grateful for your efforts so thanks - hopefully I will get there

[Bundaberg North5E42]

No sorry I obviously didnt understand your reply!  anime.js is like easelJS right?  Its a framework.

My issue is I can go to EaselJS and find examples (made in EaselJS)- like here

https://createjs.com/demos/easeljs/game     - where you can pull out this code (asteroids)

var DIFFICULTY = 2;			//how fast the game gets mor difficult
var ROCK_TIME = 110;		//aprox tick count until a new asteroid gets introduced
var SUB_ROCK_COUNT = 4;		//how many small rocks to make on rock death
var BULLET_TIME = 5;		//ticks between bullets
var BULLET_ENTROPY = 100;	//how much energy a bullet has before it runs out.

var TURN_FACTOR = 7;		//how far the ship turns per frame
var BULLET_SPEED = 17;		//how fast the bullets move

var KEYCODE_ENTER = 13;		//useful keycode
var KEYCODE_SPACE = 32;		//useful keycode
var KEYCODE_UP = 38;		//useful keycode
var KEYCODE_LEFT = 37;		//useful keycode
var KEYCODE_RIGHT = 39;		//useful keycode
var KEYCODE_W = 87;			//useful keycode
var KEYCODE_A = 65;			//useful keycode
var KEYCODE_D = 68;			//useful keycode

var manifest;           // used to register sounds for preloading
var preload;

var shootHeld;			//is the user holding a shoot command
var lfHeld;				//is the user holding a turn left command
var rtHeld;				//is the user holding a turn right command
var fwdHeld;			//is the user holding a forward command

var timeToRock;			//difficulty adjusted version of ROCK_TIME
var nextRock;			//ticks left until a new space rock arrives
var nextBullet;			//ticks left until the next shot is fired

var rockBelt;			//space rock array
var bulletStream;		//bullet array

var canvas;			//Main canvas
var stage;			//Main display stage

var ship;			//the actual ship
var alive;			//wheter the player is alive

var messageField;		//Message display field
var scoreField;			//score Field

var loadingInterval = 0;

//register key functions
document.onkeydown = handleKeyDown;
document.onkeyup = handleKeyUp;

function init() {
	if (!createjs.Sound.initializeDefaultPlugins()) {
		document.getElementById("error").style.display = "block";
		document.getElementById("content").style.display = "none";
		return;
	}

	if (createjs.BrowserDetect.isIOS || createjs.BrowserDetect.isAndroid || createjs.BrowserDetect.isBlackberry) {
		document.getElementById("mobile").style.display = "block";
		document.getElementById("content").style.display = "none";
		return;
	}

	canvas = document.getElementById("gameCanvas");
	stage = new createjs.Stage(canvas);
	messageField = new createjs.Text("Loading", "bold 24px Arial", "#FFFFFF");
	messageField.maxWidth = 1000;
	messageField.textAlign = "center";
	messageField.textBaseline = "middle";
	messageField.x = canvas.width / 2;
	messageField.y = canvas.height / 2;
	stage.addChild(messageField);
	stage.update(); 	//update the stage to show text

	// begin loading content (only sounds to load)
	var assetsPath = "sounds/";
	manifest = [
		{id: "begin", src: "spawn.ogg"},
		{id: "break", src: "break.ogg", data: 6},
		{id: "death", src: "death.ogg"},
		{id: "laser", src: "shot.ogg", data: 6},
		{id: "music", src: "music.ogg"}
	];

	createjs.Sound.alternateExtensions = ["mp3"];
	preload = new createjs.LoadQueue(true, assetsPath);
	preload.installPlugin(createjs.Sound);
	preload.addEventListener("complete", doneLoading); // add an event listener for when load is completed
	preload.addEventListener("progress", updateLoading);
	preload.loadManifest(manifest);
}

function stop() {
	if (preload != null) {
		preload.close();
	}
	createjs.Sound.stop();
}

function updateLoading() {
	messageField.text = "Loading " + (preload.progress * 100 | 0) + "%";
	stage.update();
}

function doneLoading(event) {
	clearInterval(loadingInterval);
	scoreField = new createjs.Text("0", "bold 18px Arial", "#FFFFFF");
	scoreField.textAlign = "right";
	scoreField.x = canvas.width - 20;
	scoreField.y = 20;
	scoreField.maxWidth = 1000;

	messageField.text = "Welcome: Click to play";

	// start the music
	createjs.Sound.play("music", {interrupt: createjs.Sound.INTERRUPT_NONE, loop: -1, volume: 0.4});

	watchRestart();
}

function watchRestart() {
	//watch for clicks
	stage.addChild(messageField);
	stage.update(); 	//update the stage to show text
	canvas.onclick = handleClick;
}

function handleClick() {
	//prevent extra clicks and hide text
	canvas.onclick = null;
	stage.removeChild(messageField);

	// indicate the player is now on screen
	createjs.Sound.play("begin");

	restart();
}

//reset all game logic
function restart() {
	//hide anything on stage and show the score
	stage.removeAllChildren();
	scoreField.text = (0).toString();
	stage.addChild(scoreField);

	//new arrays to dump old data
	rockBelt = [];
	bulletStream = [];

	//create the player
	alive = true;
	ship = new Ship();
	ship.x = canvas.width / 2;
	ship.y = canvas.height / 2;

	//log time untill values
	timeToRock = ROCK_TIME;
	nextRock = nextBullet = 0;

	//reset key presses
	shootHeld = lfHeld = rtHeld = fwdHeld = dnHeld = false;

	//ensure stage is blank and add the ship
	stage.clear();
	stage.addChild(ship);

	//start game timer
	if (!createjs.Ticker.hasEventListener("tick")) {
		createjs.Ticker.addEventListener("tick", tick);
	}
}

function tick(event) {
	//handle firing
	if (nextBullet <= 0) {
		if (alive && shootHeld) {
			nextBullet = BULLET_TIME;
			fireBullet();
		}
	} else {
		nextBullet--;
	}

	//handle turning
	if (alive && lfHeld) {
		ship.rotation -= TURN_FACTOR;
	} else if (alive && rtHeld) {
		ship.rotation += TURN_FACTOR;
	}

	//handle thrust
	if (alive && fwdHeld) {
		ship.accelerate();
	}

	//handle new spaceRocks
	if (nextRock <= 0) {
		if (alive) {
			timeToRock -= DIFFICULTY;	//reduce spaceRock spacing slowly to increase difficulty with time
			var index = getSpaceRock(SpaceRock.LRG_ROCK);
			rockBelt[index].floatOnScreen(canvas.width, canvas.height);
			nextRock = timeToRock + timeToRock * Math.random();
		}
	} else {
		nextRock--;
	}

	//handle ship looping
	if (alive && outOfBounds(ship, ship.bounds)) {
		placeInBounds(ship, ship.bounds);
	}

	//handle bullet movement and looping
	for (bullet in bulletStream) {
		var o = bulletStream[bullet];
		if (!o || !o.active) {
			continue;
		}
		if (outOfBounds(o, ship.bounds)) {
			placeInBounds(o, ship.bounds);
		}
		o.x += Math.sin(o.rotation * (Math.PI / -180)) * BULLET_SPEED;
		o.y += Math.cos(o.rotation * (Math.PI / -180)) * BULLET_SPEED;

		if (--o.entropy <= 0) {
			stage.removeChild(o);
			o.active = false;
		}
	}

	//handle spaceRocks (nested in one loop to prevent excess loops)
	for (spaceRock in rockBelt) {
		var o = rockBelt[spaceRock];
		if (!o || !o.active) {
			continue;
		}

		//handle spaceRock movement and looping
		if (outOfBounds(o, o.bounds)) {
			placeInBounds(o, o.bounds);
		}
		o.tick(event);

		//handle spaceRock ship collisions
		if (alive && o.hitRadius(ship.x, ship.y, ship.hit)) {
			alive = false;

			stage.removeChild(ship);
			messageField.text = "You're dead:  Click or hit enter to play again";
			stage.addChild(messageField);
			watchRestart();

			//play death sound
			createjs.Sound.play("death", {interrupt: createjs.Sound.INTERRUPT_ANY});
			continue;
		}

		//handle spaceRock bullet collisions
		for (bullet in bulletStream) {
			var p = bulletStream[bullet];
			if (!p || !p.active) {
				continue;
			}

			if (o.hitPoint(p.x, p.y)) {
				var newSize;
				switch (o.size) {
					case SpaceRock.LRG_ROCK:
						newSize = SpaceRock.MED_ROCK;
						break;
					case SpaceRock.MED_ROCK:
						newSize = SpaceRock.SML_ROCK;
						break;
					case SpaceRock.SML_ROCK:
						newSize = 0;
						break;
				}

				//score
				if (alive) {
					addScore(o.score);
				}

				//create more
				if (newSize > 0) {
					var i;
					var index;
					var offSet;

					for (i = 0; i < SUB_ROCK_COUNT; i++) {
						index = getSpaceRock(newSize);
						offSet = (Math.random() * o.size * 2) - o.size;
						rockBelt[index].x = o.x + offSet;
						rockBelt[index].y = o.y + offSet;
					}
				}

				//remove
				stage.removeChild(o);
				rockBelt[spaceRock].active = false;

				stage.removeChild(p);
				bulletStream[bullet].active = false;

				// play sound
				createjs.Sound.play("break", {interrupt: createjs.Sound.INTERUPT_LATE, offset: 0.8});
			}
		}
	}

	//call sub ticks
	ship.tick(event);
	stage.update(event);
}

function outOfBounds(o, bounds) {
	//is it visibly off screen
	return o.x < bounds * -2 || o.y < bounds * -2 || o.x > canvas.width + bounds * 2 || o.y > canvas.height + bounds * 2;
}

function placeInBounds(o, bounds) {
	//if its visual bounds are entirely off screen place it off screen on the other side
	if (o.x > canvas.width + bounds * 2) {
		o.x = bounds * -2;
	} else if (o.x < bounds * -2) {
		o.x = canvas.width + bounds * 2;
	}

	//if its visual bounds are entirely off screen place it off screen on the other side
	if (o.y > canvas.height + bounds * 2) {
		o.y = bounds * -2;
	} else if (o.y < bounds * -2) {
		o.y = canvas.height + bounds * 2;
	}
}

function fireBullet() {
	//create the bullet
	var o = bulletStream[getBullet()];
	o.x = ship.x;
	o.y = ship.y;
	o.rotation = ship.rotation;
	o.entropy = BULLET_ENTROPY;
	o.active = true;

	//draw the bullet
	o.graphics.beginStroke("#FFFFFF").moveTo(-1, 0).lineTo(1, 0);

	// play the shot sound
	createjs.Sound.play("laser", {interrupt: createjs.Sound.INTERUPT_LATE});
}

function getSpaceRock(size) {
	var i = 0;
	var len = rockBelt.length;

	//pooling approach
	while (i <= len) {
		if (!rockBelt[i]) {
			rockBelt[i] = new SpaceRock(size);
			break;
		} else if (!rockBelt[i].active) {
			rockBelt[i].activate(size);
			break;
		} else {
			i++;
		}
	}

	if (len == 0) {
		rockBelt[0] = new SpaceRock(size);
	}

	stage.addChild(rockBelt[i]);
	return i;
}

function getBullet() {
	var i = 0;
	var len = bulletStream.length;

	//pooling approach
	while (i <= len) {
		if (!bulletStream[i]) {
			bulletStream[i] = new createjs.Shape();
			break;
		} else if (!bulletStream[i].active) {
			bulletStream[i].active = true;
			break;
		} else {
			i++;
		}
	}

	if (len == 0) {
		bulletStream[0] = new createjs.Shape();
	}

	stage.addChild(bulletStream[i]);
	return i;
}

//allow for WASD and arrow control scheme
function handleKeyDown(e) {
	//cross browser issues exist
	if (!e) {
		var e = window.event;
	}
	switch (e.keyCode) {
		case KEYCODE_SPACE:
			shootHeld = true;
			return false;
		case KEYCODE_A:
		case KEYCODE_LEFT:
			lfHeld = true;
			return false;
		case KEYCODE_D:
		case KEYCODE_RIGHT:
			rtHeld = true;
			return false;
		case KEYCODE_W:
		case KEYCODE_UP:
			fwdHeld = true;
			return false;
		case KEYCODE_ENTER:
			if (canvas.onclick == handleClick) {
				handleClick();
			}
			return false;
	}
}

function handleKeyUp(e) {
	//cross browser issues exist
	if (!e) {
		var e = window.event;
	}
	switch (e.keyCode) {
		case KEYCODE_SPACE:
			shootHeld = false;
			break;
		case KEYCODE_A:
		case KEYCODE_LEFT:
			lfHeld = false;
			break;
		case KEYCODE_D:
		case KEYCODE_RIGHT:
			rtHeld = false;
			break;
		case KEYCODE_W:
		case KEYCODE_UP:
			fwdHeld = false;
			break;
	}
}

function addScore(value) {
	//trust the field will have a number and add the score
	scoreField.text = (Number(scoreField.text) + Number(value)).toString();
}

But I cant just save this into a game.js and then link it to an animate file, even while I am using easelJS library because it doesnt work.  So I am obviously missng something here.  

Like animate is using easelJS - but when you go to the easelJS webpage and look at the documentation- the examples and scripts there are not written like they would run in the timeline or from a class?

So sorry to be so dumb but I feel like I am missing something really simple here

[kglad]

the code should wotk fine if added to a timeline or linked in the actions panel > global, if needed library/stage assets are  added.

[Bundaberg North5E42]

If I just put this script in the timeline it doesnt throw any errors but nothing happens.

If I link it as an external script it doesent throw any errors but nothing happens 

If I cut and paste this script into a separate file game.js and link it as a class it has heaps of errors - I have spent a lot of time going through and changing var to this but then I got stuck with the messageField that I asked about in another thread- like I said I am missing something here

IS there something I am not doing that it needs to run off the main timeline?  I cant see where the code is looking for any assets (like a ship_mc) and as its not throwing any errors I just dont know where to from there.

But thanks again maybe we are getting somewhere 

[Bundaberg North5E42]

ok maybe I am onto something now - I just added the init(); function at the bottom of the script because I couldnt see it getting called (and I am not using the class file now- just putting it straight on the timeline)- now I am seeing some errors - like the

messageField.x = canvas.width/2;

is not a thing and I fix this by making it 

messageField.x = this.canvas.width/2;

and this gets no error - the next errors are saying "Hey where are these sounds? in the /sounds folder...

so do you think I am on the right track now?

[kglad]

there are probably a lot of assets needed for that code to work.  isn't that explained wherever you got rhat code?

[kglad]

and did you fix that message text field code you previously published?

[kglad]

i'm on my phone which makes reading code difficult, but i noticed that gameCanvas again.

if that's used like it was in a previous post by you that used a "loading" message textfield, you have to manually create that canvas or better just use the animate created canvas.

[Bundaberg North5E42]

ok so I realise now that the code that was available for you to "edit" here on the easelJS demos page is not the whole thing- there are other scripts here- some that relate to the asteroids example and some that dont.

I think I have learnt something here- 

I added the scrips that seemed to be needed and fixed a few errors - now I will go back and look at the "gameCanvas"

[Bundaberg North5E42]

Ok I think I might give up on this and find and easier test or make something from scratch at this point- my mistake was to think that the code they were giving you was all the code that was driving the project - this (and me being stupid) was the reason why I couldnt get it to run? 

[kglad]

your text code worked (once you fix gameCanvas)

[Bundaberg North5E42]

Well there were no errors but stuff must still be missng - it doesnt work.... I just dont know if I am actually making any progress or not - 

[kglad]

why are you working on this lengthy code "snippet" instead of that shorter one?

[Bundaberg North5E42]

Hey kglad,

I am not really sure I understand what you mean - when you go to the website demo from easelJS

https://createjs.com/demos/easeljs/game.   you can look at the code.

I was pointed to this originally by JoãoCésar here

https://community.adobe.com/t5/animate-discussions/ok-team-help-me-build-asteroids-for-education/td-...

and he says this

"I think you can take a closer look at the example suggested in the beginning:

https://createjs.com/demos/easeljs/game

The example above has everything you need to know. The HTML5 Canvas document exports to CreateJS so you only have to adapt some parts for Animate."

So I have been trying to do that ever since!

and then you said to me today that I should just be able to paste that code into animate (which i had already tried) so I went back and had another go.. then at some point I had the idea to look at the debug of that site.  I thought it was showing me that there were other scripts and heaps of other things going on - not just the code you can access from the original demo game page.  I have been putting a lot of time into this and had made a sounds folder and put some bogus sounds correctly named, I made some changes to the code to fix any errors (var to this sort of thing) but when I saw all the extra files and stuff in the source for the site I said to myself "oh well thats why I cant get it to work!

[kglad]

asteroids looks like it's no longer supported.  at least, that github link fails.

i checked the drag and drop game and that has dependencies* not in the game js.

*

<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
<script src="../_assets/js/examples.js"></script>

<script src="../lib/easeljs-NEXT.js"></script>

eg, here is example.js

/**
* Very minimal shared code for examples.
*/

(function() {
if (document.body) { setupEmbed(); }
else { document.addEventListener("DOMContentLoaded", setupEmbed); }

function setupEmbed() {
if (window.top != window) {
document.body.className += " embedded";
}
}

var o = window.examples = {};
o.showDistractor = function(id) {
var div = id ? document.getElementById(id) : document.querySelector("div canvas").parentNode;
div.className += " loading";
};

o.hideDistractor = function() {
var div = document.querySelector(".loading");
div.className = div.className.replace(/\bloading\b/);
};
})();

[kglad · Accepted solution]

bottomline about the createjs demos: they are not designed for use by inexperienced coders.  they are designed to show what can be done.

[Bundaberg North5E42]

Thanks kglad, I think I have learnt something from trying anyway.  I am making (some limited) progress 🙂

[kglad]

sure!