Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SpineBoy example updated to use createGraphicsDevice #4941

Merged
merged 1 commit into from
Dec 20, 2022
Merged

SpineBoy example updated to use createGraphicsDevice #4941

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
91 changes: 60 additions & 31 deletions examples/src/examples/misc/spineboy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,52 +6,81 @@ class SpineboyExample {

example(canvas: HTMLCanvasElement): void {

const app = new pc.Application(canvas, {});

const assets = {
'skeleton': new pc.Asset('skeleton', 'json', { url: '/static/assets/spine/spineboy-pro.json' }),
'atlas': new pc.Asset('atlas', 'text', { url: '/static/assets/spine/spineboy-pro.atlas' }),
'texture': new pc.Asset('spineboy-pro.png', 'texture', { url: '/static/assets/spine/spineboy-pro.png' }),
'spinescript': new pc.Asset('spinescript', 'script', { url: '/static/scripts/spine/playcanvas-spine.3.8.js' })
};

const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
assetListLoader.load(() => {
app.start();
pc.createGraphicsDevice(canvas).then((device: pc.GraphicsDevice) => {

// create camera entity
const camera = new pc.Entity('camera');
camera.addComponent('camera', {
clearColor: new pc.Color(0.5, 0.6, 0.9)
});
app.root.addChild(camera);
camera.translateLocal(0, 7, 20);
const createOptions = new pc.AppOptions();
createOptions.graphicsDevice = device;

createOptions.componentSystems = [
// @ts-ignore
pc.CameraComponentSystem,
// @ts-ignore
pc.ScriptComponentSystem
];
createOptions.resourceHandlers = [
// @ts-ignore
pc.TextureHandler,
// @ts-ignore
pc.ScriptHandler,
// @ts-ignore
pc.JsonHandler,
// @ts-ignore
pc.TextHandler
];

const createSpineInstance = (position: pc.Vec3, scale: pc.Vec3, timeScale: number) => {
const app = new pc.AppBase(canvas);
app.init(createOptions);

const spineEntity = new pc.Entity();
spineEntity.addComponent("spine", {
atlasAsset: assets.atlas.id,
skeletonAsset: assets.skeleton.id,
textureAssets: [assets.texture.id]
// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);

const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
assetListLoader.load(() => {

app.start();

// create camera entity
const camera = new pc.Entity('camera');
camera.addComponent('camera', {
clearColor: new pc.Color(0.5, 0.6, 0.9)
});
spineEntity.setLocalPosition(position);
spineEntity.setLocalScale(scale);
app.root.addChild(spineEntity);
app.root.addChild(camera);
camera.translateLocal(0, 7, 20);

// play spine animation
// @ts-ignore
spineEntity.spine.state.setAnimation(0, "portal", true);
const createSpineInstance = (position: pc.Vec3, scale: pc.Vec3, timeScale: number) => {

// @ts-ignore
spineEntity.spine.state.timeScale = timeScale;
};
const spineEntity = new pc.Entity();
spineEntity.addComponent("spine", {
atlasAsset: assets.atlas.id,
skeletonAsset: assets.skeleton.id,
textureAssets: [assets.texture.id]
});
spineEntity.setLocalPosition(position);
spineEntity.setLocalScale(scale);
app.root.addChild(spineEntity);

// play spine animation
// @ts-ignore
spineEntity.spine.state.setAnimation(0, "portal", true);

// create spine entity 1
createSpineInstance(new pc.Vec3(2, 2, 0), new pc.Vec3(1, 1, 1), 1);
// @ts-ignore
spineEntity.spine.state.timeScale = timeScale;
};

// create spine entity 2
createSpineInstance(new pc.Vec3(2, 10, 0), new pc.Vec3(-0.5, 0.5, 0.5), 0.5);
// create spine entity 1
createSpineInstance(new pc.Vec3(2, 2, 0), new pc.Vec3(1, 1, 1), 1);

// create spine entity 2
createSpineInstance(new pc.Vec3(2, 10, 0), new pc.Vec3(-0.5, 0.5, 0.5), 0.5);
});
});
}
}
Expand Down