The Sprite object is the base for all textured objects that are rendered to the screen
下面是一個簡單的使用範例：
PIXI.loader.add("assets/spritesheet.json").load(setup);
function setup() {
let sheet = PIXI.loader.resources["assets/spritesheet.json"].spritesheet;
let sprite = new PIXI.Sprite(sheet.textures["image.png"]);
...
}
An AnimatedSprite is a simple way to display an animation depicted by a list of textures.
下面是一個簡單的使用範例：
PIXI.loader.add("assets/spritesheet.json").load(setup);
function setup() {
let sheet = PIXI.loader.resources["assets/spritesheet.json"].spritesheet;
animatedSprite = new PIXI.extras.AnimatedSprite(sheet.animations["image_sequence"]);
...
}
var sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
// Clear listener after first call.
sound.once('load', function(){
sound.play();
});
// Fires when the sound finishes playing.
sound.on('end', function(){
console.log('Finished!');
});
public static sound:Array<resources> = [
new Resources('Sound_bg','assets/bg.mp3'),
new Resources('Sound_level_pass','assets/level_pass.mp3'),
new Resources('Sound_select_1','assets/select_1.mp3'),
new Resources('Sound_select_crrect','assets/select_crrect.mp3'),
new Resources('Sound_select_error','assets/select_error.mp3')
];
新增SoundMgr.ts內容如下：
import {ResourcesList} from "./ResourcesList";
export class SoundMgr {
private static soundList:Array<soundInfo> = new Array<soundInfo>();
public static load(){
ResourcesList.sound.forEach(element => {
let info = new SoundInfo(element.id, element.path);
this.soundList.push(info);
});
}
public static play(id, loop = false){
this.soundList.forEach(element => {
if (element.soundID == id){
element.sound.loop(loop);
element.sound.play();
}
});
}
}
class SoundInfo{
public soundID:string;
public path:string;
public sound:Howl;
constructor(_id:string, url:string) {
this.soundID = _id;
this.path = url;
this.load();
}
public load(){
this.sound = new Howl({src: this.path});
}
}
// ctor
const loader = new Loader();
loader
// Chainable `add` to enqueue a resource
.add(name, url, options)
// Chainable `pre` to add a middleware that runs for each resource, *before* loading that resource.
// This is useful to implement custom caching modules (using filesystem, indexeddb, memory, etc).
.pre(cachingMiddleware)
// Chainable `use` to add a middleware that runs for each resource, *after* loading that resource.
// This is useful to implement custom parsing modules (like spritesheet parsers, spine parser, etc).
.use(parsingMiddleware)
// The `load` method loads the queue of resources, and calls the passed in callback called once all
// resources have loaded.
.load((loader, resources) => {
// resources is an object where the key is the name of the resource loaded and the value is the resource object.
// They have a couple default properties:
// - `url`: The URL that the resource was loaded from
// - `error`: The error that happened when trying to load (if any)
// - `data`: The raw data that was loaded
// also may contain other properties based on the middleware that runs.
});
// throughout the process multiple signals can be dispatched.
loader.onProgress.add((event) => {}); // called once per loaded/errored file
loader.onError.add((target,event,error) => {}); // called once per errored file
loader.onLoad.add((target) => {}); // called once per loaded file
loader.onComplete.add(() => {}); // called once when the queued resources all load.
class Resources{
public id:string;
public path:string;
constructor(id, path) {
this.id = id;
this.path = path;
}
}
export class ResourcesList{
public static img = [
new Resources('bunny','assets/bunny.png'),
new Resources('background','assets/background.png'),
new Resources('Button','assets/Button.json'),
new Resources('Character_Idle','assets/Character_Idle.json'),
new Resources('Character_Jump','assets/Character_Jump.json'),
new Resources('Character_Laugh','assets/Character_Laugh.json'),
new Resources('Icon','assets/Icon.json')
];
}
