engine-animate v1.0.25

Engine Animate

Framework desenvolvida para manipulação em Canvas JavaScrip.

Desenvolvedor: Michael Milanez

Package: engine

Language: ES6 - JavaScript

Versão 1.0.0

Instalação da biblioteca Engine Animation

npm i engine-animate

Estrutura

Classes

Display

• ObjectInteractive
• Shape
• Rectangle
• Circle
• Line
• Sprite
• SpriteSheet
• DisplayObject
• MovieClip

ObjectInteractive

Versão 1.0.0

Package: engine/display/ObjectInteractive.js

ObjectInteractive é a classe base para criação de objetos complexos que interagem com o canvas, permitindo manipulação de eventos, posição, tamanho e entre outras propriedades basicas dos objetos.

Instância

Exemplo de uso:

    import ObjectInteractive from './engine/displays/ObjectInteractive.js';
    const Object = new ObjectInteractive();	

Propriedades

Métodos privados

Métodos publicos

Eventos

Obs: Esta classe foi desenvolvida para ser usada como classe base para as demais classes, ou seja, a classe Object interactive é usada como herança para a classe dos objetos, componentes, etc...

Exemplo de criação de componente usando a herança do Objectinteractive:

    import ObjectInteractive from './ObjectInteractive.js';

	export default class Sprite extends ObjectInteractive{
		constructor(){
			super();

			this._name = 'Sprite';
			this._version = '1.0.0';						
		}

		//Método sobrescrito da classe ObjectInteractive
		draw(ctx){
						
		}
	}
    	

O método draw deve ser sobrescrito e ele é chamado repetida vezes quando adicionado no stage.

Shape

Versão 1.0.0

Package: engine/display/Shape.js

Herança: ObjectInteractive

Shape é um objeto criado para gerar formas básicas no Canvas baseado na classe ObjectInteractive.

Instância

Exemplo de uso:

passando url da imagem

    import ShapeClass from './engine/displays/Shape.js';
    const shape = new ShapeClass();

	shape.dragDrop = true;
	shape.x = 100;
	shape.y = 100;
	shape.setBorderColor({r:255,g:0,b:0,a:0.5});
	shape.setColor('#0000ff');
	shape.alpha = 0.5;
	shape.borderAlpha = 1;
	shape.border = 2;	

Propriedades

Obs: Shape herda de ObjecteInteractive, portanto, possui todas as propriedade da classe ObjectInteractive.

Métodos privados

Métodos publicos

Eventos

Obs: Esta classe foi desenvolvida para ser usada como classe base para as demais classes, ou seja, a classe Shape é usada como herança para a classe dos objetos, componentes, etc...

Exemplo de uso:

    import StageClass from './engine/displays/Stage.js' ;
	import ShapeClass from './engine/displays/Shape.js';

	const stage = new StageClass('canvas');
	stage.start(800, 600, 90);

	const shape = new ShapeClass();
	shape.dragDrop = true;
	shape.x = 100;
	shape.y = 100;
	shape.setBorderColor({r:255,g:0,b:0,a:0.5});
	shape.setColor('#0000ff');
	shape.alpha = 0.5;
	shape.borderAlpha = 1;
	shape.border = 2;
	stage.addObject(shape);

    	

A classe Shape é herdada da classe ObjectInteracitive, portanto possui todas as propriedades, métodos e eventos dela.

Rectangle

Versão 1.0.0

Package: engine/display/Rectangle.js

Herança: Shape, ObjectInteractive

Shape é um objeto criado para gerar formas básicas no Canvas baseado na classe ObjectInteractive.

Instância

Exemplo de uso:

passando url da imagem

    import Rectangle from './engine/displays/Rectangle.js';
    
	const rect = new Rectangle();
	rect.dragDrop = true;
	rect.x = 20;
	rect.y = 200;
	rect.width = 200;
	rect.height = 200;
	rect.setColor('#00ff00');
	rect.setBorderColor('#ff0000');
	rect.alpha = 0.5;
	rect.borderAlpha = 1;
	rect.border = 2;
	stage.addObject(rect);	

Propriedades

Obs: Rectangle herda de Shape e ObjecteInteractive, portanto, possui todas as propriedade da classe ObjectInteractive.

Métodos privados

Métodos publicos

Eventos

Obs: Esta classe foi desenvolvida para ser usada como classe base para as demais classes, ou seja, a classe Shape é usada como herança para a classe dos objetos, componentes, etc...

Exemplo de uso:

    import StageClass from './engine/displays/Stage.js' ;
	import RectangleClass from './engine/displays/Rectangle.js';

	const stage = new StageClass('canvas');
	stage.start(800, 600, 90);

	const rect = new Rectangle();
	rect.dragDrop = true;
	rect.x = 20;
	rect.y = 200;
	rect.width = 200;
	rect.height = 200;
	rect.setColor('#00ff00');
	rect.setBorderColor('#ff0000');
	rect.alpha = 0.5;
	rect.borderAlpha = 1;
	rect.border = 2;
	stage.addObject(rect);

    	

A classe Rectangle é herdada da classe Shape eObjectInteracitive, portanto possui todas as propriedades, métodos e eventos dela.

Circle

Versão 1.0.0

Package: engine/display/Circle.js

Herança: Shape, ObjectInteractive

Circle é um objeto criado para gerar formas básicas no Canvas baseado na classe ObjectInteractive.

Instância

Exemplo de uso:

passando url da imagem

    import Circle from './engine/displays/Circle.js';
    
	const circle = new CircleClass();
	circle.dragDrop = true;
	circle.x = 100;
	circle.y = 100;
	circle.radius = 50;
	circle.centerObject = false;
	circle.setBorderColor({r:255,g:0,b:0,a:0.5});
	circle.setColor('#0000ff');
	circle.alpha = 0.5;
	circle.borderAlpha = 1;
	circle.border = 1;	

Propriedades

Obs: Rectangle herda de Shape e ObjecteInteractive, portanto, possui todas as propriedade da classe ObjectInteractive.

Métodos privados

Métodos publicos

Eventos

Obs: Esta classe foi desenvolvida para ser usada como classe base para as demais classes, ou seja, a classe Shape é usada como herança para a classe dos objetos, componentes, etc...

Exemplo de uso:

    import StageClass from './engine/displays/Stage.js' ;
	import RectangleClass from './engine/displays/Rectangle.js';

	const stage = new StageClass('canvas');
	stage.start(800, 600, 90);

	const rect = new Rectangle();
	rect.dragDrop = true;
	rect.x = 20;
	rect.y = 200;
	rect.width = 200;
	rect.height = 200;
	rect.setColor('#00ff00');
	rect.setBorderColor('#ff0000');
	rect.alpha = 0.5;
	rect.borderAlpha = 1;
	rect.border = 2;
	stage.addObject(rect);

    	

A classe Rectangle é herdada da classe Shape eObjectInteracitive, portanto possui todas as propriedades, métodos e eventos dela.

Sprite

Versão 1.0.0

Package: engine/display/Sprite.js

Herança: ObjectInteractive

Sprite é um objeto criado para manipular imagem no Canvas baseado na classe ObjectInteractive.

Instância

Exemplo de uso:

passando url da imagem

    import SpriteClass from './engine/displays/Sprite.js';
    const sprite = new SpriteClass();
	sprite.source('assets/img/image.png');	

Ou um objeto Image()

    import SpriteClass from './engine/displays/Sprite.js';
    const sprite = new SpriteClass();
	var image = new Image();
	image.src = 'assets/img/image.png'
	sprite.source(image);	

Propriedades

Métodos privados

Métodos publicos

Eventos

Obs: Esta classe foi desenvolvida para ser usada como classe base para as demais classes, ou seja, a classe Object interactive é usada como herança para a classe dos objetos, componentes, etc...

Exemplo de uso:

    import StageClass from './engine/displays/Stage.js' ;
	import SpriteClass from './engine/displays/Sprite.js';

	const stage = new StageClass('canvas');
	stage.start(800, 600, 90);

	const sprite = new SpriteClass();
	sprite.source('http://localhost:8080//assets/image/img.jpg');
	sprite.x = 0;
	sprite.y = 0;
	sprite.dragDrop = true;

	stage.addObject(sprite);
    	

A classe Sprite é herdada da classe ObjectInteracitive, portanto possui todas as propriedades, métodos e eventos dela.

DisplayObject

Versão 1.0.0

Package: engine/display/DisplayObjetc.js

Herança: JavaScrip

DisplayObject, classe base para componentes interativos com renderização autonoma.

Instância

Exemplo de uso:

passando url da imagem

    import DisplayObjectClass from './engine/displays/DisplayObject.js';
    const display = new DisplayObjectClass();		

Propriedades

Métodos privados

Métodos publicos

Eventos

Obs: Esta classe foi desenvolvida para ser usada como classe base para as demais classes, ou seja, a classe DisplayObject é usada como herança para a classe dos objetos, componentes, etc...

Exemplo de uso:

    import StageClass from './engine/displays/Stage.js' ;
	import DisplayObject from './DisplayObject.js';

	export default class MovieClip extends DisplayObject {
		constructor(){
			super();
			this._name = 'MovieClip';
			this._version = '1.0.0';
		}
	}
    	

A classe MovieClip é herdada da classe DisplayObject, portanto possui todas as propriedades, métodos e eventos dela.

MovieCLip

Versão 1.0.0

Package: engine/display/MovieClip.js

Herança: DisplayObject

MovieClip, classe com renderização automoma controlada pelo frameRate.

Instância

Exemplo de uso:

passando url da imagem

    import MovieClipClass from './engine/displays/MovieClip.js';
    const movieClip = new MovieClipClass();		

Propriedades

Métodos privados

Métodos publicos

Eventos

Obs: Esta classe foi desenvolvida para criar animações autonoma sem a necessidade de usar o render do Stage.

Exemplo de uso:

    import MovieClipClass from './engine/displays/MovieClip.js';
	const movieClip = new MovieClipClass(canvasObject);
	movieClip.addFrame(imageData);
	MovieClip.play();
	
    	

A classe MovieClip é herdada da classe DisplayObject, portanto possui todas as propriedades, métodos e eventos dela.

Vídeo Canvas

Versão 1.0.0

Package: engine/components/components/ Class: public class VideoCanvas Extends: not Language: ES6 - JavaScript

graph LR
A(Engine) --> B(components) --> C(components) --> D(VideoCanvas.js)

O vídeo Canvas é um componente base que servirá para criar componentes mais complexos estendidos desta classe. Seu funcionamento é simples, a classe recebe o id do elemento canvas e a URL do vídeo, e por sua vez é criado um player com funcionalidades específicas para o controle do vídeo.

Instância

Exemplo de uso:

    import VideoCanvasClass from './engine/components/components/VideoCanvas.js';
    const videoCanvas = new VideoCanvasClass('canvas', 'video1.mp4');	

Propriedades

Métodos

Eventos

Exemplo de uso:

addEventListener('VIDEO_LOADED', function(e){
	console.log(e);
});

Exemplo

The file explorer is accessible using the button in left corner of the navigation bar. You can create a new file by clicking the New file button in the file explorer. You can also create folders by clicking the New folder button.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv='pragma' content='no-cache'>

	<title>Document</title>

	<link rel="shortcut icon" href="#">
	<script type="module" src="./main.js"></script>

    <style>
    	canvas{
    		border: solid 1px #000000;
    		left: auto;
    		right: auto;
    	}
    	.container{
    		display: block;
    	}
    </style>

</head>
<body>
	<h3>Vídeo Canvas</h3>
	<div>
		<button id="btPlay">PlayPause</button>
		<button id="btStop">stop</button>
		<button id="btCapture">Capture</button>
	</div>	
	<div class="container">
		<canvas id="canvas"></canvas>
	</div>
</body>
</html>

JS

import VideoCanvasClass from './engine/components/components/VideoCanvas.js';
const videoCanvas = new VideoCanvasClass('canvas', 'video1.mp4');
videoCanvas.start();
addEventListener('VIDEO_LOADED', function(e){
	console.log(e);
});

addEventListener('PROCESS_VIDEO', function(e){
	//console.log(e.detail);
});

addEventListener('STATUS_PLAY', function(e){
	console.log('Status play: '+e.detail.status+' | tocando: '+e.detail.playing);
});
document.getElementById("btPlay").onclick = function() {
	videoCanvas.play();
};

document.getElementById("btStop").onclick = function() {
	videoCanvas.stop();
};

document.getElementById("btCapture").onclick = function() {
	videoCanvas.capture();
};