Skip to main content
Version: 7.0.1

Sprite View

Sprite View is make sprite animations with Smartface Native Framework.


import PgSpriteViewDesign from 'generated/pages/pgSpriteView';
import Image from '@smartface/native/ui/image';
import ImageView from '@smartface/native/ui/imageview';
import { withDismissAndBackButton } from '@smartface/mixins';
import { Router, Route } from '@smartface/router';
import SpriteView from '@smartface/native/ui/spriteview';

export default class PgSpriteView extends withDismissAndBackButton(PgSpriteViewDesign) {
spriteView: SpriteView;
constructor(private router?: Router, private route?: Route) {
super({});
}
initSpriteView() {
this.spriteView = new SpriteView({
width: 100,
height: 125,
imageFillType: ImageView.FillType.ASPECTFIT
});
const sheet = Image.createFromFile('assets://braid.png');

this.spriteView.setSprite({
sheet: sheet, // Image for the frame
frameX: 7, // Distinct image count on X axis
frameY: 4, // Distinct image count on Y axis
frameCount: 27 // Frame count of the image
});
this.layout.addChild(this.spriteView);
this.layout.applyLayout();
}

onShow() {
super.onShow();
this.initBackButton(this.router);
this.spriteView.play(1000);
}

onLoad() {
super.onLoad();
this.initSpriteView();
}
}


You can use this image to create example sprite animation.