Sprite Animate v1.1

Sprite Animate v1.1

in

Instructions

sprite animation test

  • FPS: 30

Update

  • Cheanged sprites image
  • Support multi row sprites image
  • Update graphic library

Credits

Development: HWANYONG YOO (UHD)

  • Game engine: Graphic (v1.0.181019 Self Made)
  • Published: Oct 19, 2018
  • Sources:

Source

You can see the source code in Inspector > Sources > sprite.js

sprite.js
'use strict';
import Graphic from '../../../../Engine/1.0.181019/Graphic.js';
import GameObject from '../../../../Engine/1.0.181019/GameObject.js';

var BuilderIdle = new GameObject({
	name: 'Builder-idle',
	position: { x: 210, y: 143},
	width: 192,
	height: 192,
	resource: {
		type: 'sprite',
		path: '/playground/public/Resources/Images/Builder-idle-v2-64px-8x2.png'
	},
	spriteOptions: {
		x: 0,
		y: 0,
		width: 64,
		height: 64,
		interval: 80,
		frame: {
			length: 16,
			row: 2,
			col: 8
		},
		repeatMode: 'loop'
	}
}).setRender((ctx, self, opts) => {
	ctx.drawImage(
		opts.resource.img,
		opts.animate.target.x,
		opts.animate.target.y,
		opts.spriteOptions.width,
		opts.spriteOptions.height,
		opts.position.x,
		opts.position.y,
		opts.width,
		opts.height);
});
var Emotes = new GameObject({
	name: 'Emotes',
	position: { x: 270, y: 100},
	width: 64,
	height: 74,
	resource: {
		type: 'sprite',
		path: '/playground/public/Resources/Images/kenney-emotes-pack.png'
	},
	spriteOptions: {
		x: 0,
		y: 0,
		width: 32,
		height: 38,
		interval: 1000,
		frame: {
			length: 6,
			row: 1,
			col: 6
		},
		repeatMode: 'loop'
	}
}).setRender((ctx, self, opts) => {
	ctx.drawImage(
		opts.resource.img,
		opts.animate.target.x,
		opts.animate.target.y,
		opts.spriteOptions.width,
		opts.spriteOptions.height,
		opts.position.x,
		opts.position.y,
		opts.width,
		opts.height);
});

Graphic.SetBackgroundColor('#ffffff');
BuilderIdle.startSprite();
Emotes.startSprite();
Graphic.addRenderList(BuilderIdle);
Graphic.addRenderList(Emotes);

Related Release Links