mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-06 15:24:55 +08:00
[ts] Clean-up examples
# Conflicts: # spine-ts/index.css # spine-ts/index.html # spine-ts/spine-player/example/physics.html
This commit is contained in:
Mario Zechner
parent
c61ff7ee93
commit
3cce0af971
@ -1 +1,2 @@
|
||||
**/*
|
||||
**/*.ts
|
||||
**/*.js
|
||||
228
spine-ts/index.css
Normal file
228
spine-ts/index.css
Normal file
@ -0,0 +1,228 @@
|
||||
/***
|
||||
The new CSS reset - version 1.11.2 (last updated 15.11.2023)
|
||||
GitHub page: https://github.com/elad2412/the-new-css-reset
|
||||
***/
|
||||
|
||||
/*
|
||||
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
|
||||
- The "symbol *" part is to solve Firefox SVG sprite bug
|
||||
- The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
|
||||
*/
|
||||
*:where(
|
||||
:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)
|
||||
) {
|
||||
all: unset;
|
||||
display: revert;
|
||||
}
|
||||
|
||||
/* Preferred box-sizing value */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Fix mobile Safari increase font-size on landscape mode */
|
||||
html {
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
/* Reapply the pointer cursor for anchor tags */
|
||||
a,
|
||||
button {
|
||||
cursor: revert;
|
||||
}
|
||||
|
||||
/* Remove list styles (bullets/numbers) */
|
||||
ol,
|
||||
ul,
|
||||
menu,
|
||||
summary {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* For images to not be able to exceed their container */
|
||||
img {
|
||||
max-inline-size: 100%;
|
||||
max-block-size: 100%;
|
||||
}
|
||||
|
||||
/* removes spacing between cells in tables */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
|
||||
input,
|
||||
textarea {
|
||||
-webkit-user-select: auto;
|
||||
}
|
||||
|
||||
/* revert the 'white-space' property for textarea elements on Safari */
|
||||
textarea {
|
||||
white-space: revert;
|
||||
}
|
||||
|
||||
/* minimum style to allow to style meter element */
|
||||
meter {
|
||||
-webkit-appearance: revert;
|
||||
appearance: revert;
|
||||
}
|
||||
|
||||
/* preformatted text - use only for this feature */
|
||||
:where(pre) {
|
||||
all: revert;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* reset default text opacity of input placeholder */
|
||||
::placeholder {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
/* fix the feature of 'hidden' attribute.
|
||||
display:revert; revert to element instead of attribute */
|
||||
:where([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* revert for bug in Chromium browsers
|
||||
- fix for the content editable attribute will work properly.
|
||||
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
|
||||
:where([contenteditable]:not([contenteditable="false"])) {
|
||||
-moz-user-modify: read-write;
|
||||
-webkit-user-modify: read-write;
|
||||
overflow-wrap: break-word;
|
||||
-webkit-line-break: after-white-space;
|
||||
-webkit-user-select: auto;
|
||||
}
|
||||
|
||||
/* apply back the draggable feature - exist only in Chromium and Safari */
|
||||
:where([draggable="true"]) {
|
||||
-webkit-user-drag: element;
|
||||
}
|
||||
|
||||
/* Revert Modal native behavior */
|
||||
:where(dialog:modal) {
|
||||
all: revert;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Remove details summary webkit styles */
|
||||
::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
|
||||
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-block; /* Aligns like a button */
|
||||
padding: 0.125em 0.5em; /* Button size */
|
||||
color: #333; /* Text color */
|
||||
background-color: #ccc;
|
||||
border: none; /* No border */
|
||||
border-radius: 5px; /* Rounded corners */
|
||||
text-align: center; /* Center text */
|
||||
text-decoration: none; /* No underline */
|
||||
cursor: pointer; /* Cursor changes to hand symbol */
|
||||
transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effect */
|
||||
|
||||
/* Slight shadow for depth (optional) */
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Hover state */
|
||||
button:hover {
|
||||
background-color: #fff; /* Darker shade when hovered */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Larger shadow on hover */
|
||||
}
|
||||
|
||||
.overlay {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
gap: 0.5em;
|
||||
padding: 1em;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h5 {
|
||||
font-weight: 600;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
body {
|
||||
background-color: #222;
|
||||
color: #ccc;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1em;
|
||||
}
|
||||
a {
|
||||
color: darkorange;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
padding: 1em;
|
||||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1em;
|
||||
}
|
||||
@ -5,165 +5,188 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>spine-ts Examples</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>spine-ts Examples</h1>
|
||||
<ul>
|
||||
<li>Canvas</li>
|
||||
<div style="width: 300px; margin: 0 auto">
|
||||
<h1>spine-ts Examples</h1>
|
||||
<ul>
|
||||
<li><a href="/spine-canvas/example">Example</a></li>
|
||||
<li>
|
||||
<a href="/spine-canvas/example/mouse-click.html">Mouse click</a>
|
||||
</li>
|
||||
<li>Canvas</li>
|
||||
<ul>
|
||||
<li><a href="/spine-canvas/example">Example</a></li>
|
||||
<li>
|
||||
<a href="/spine-canvas/example/mouse-click.html">Mouse click</a>
|
||||
</li>
|
||||
</ul>
|
||||
<li>Pixi</li>
|
||||
<ul>
|
||||
<li><a href="/spine-pixi/example/index.html">Basic example</a></li>
|
||||
<li>
|
||||
<a href="/spine-pixi/example/events-example.html">Events example</a>
|
||||
</li>
|
||||
</ul>
|
||||
<li>Phaser</li>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/basic-example.html">Basic example</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/events-example.html"
|
||||
>Events example</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/mix-and-match-example.html"
|
||||
>Mix and match example</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/arcade-physics-example.html"
|
||||
>Arcade physics example</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/control-bones-example.html"
|
||||
>Control bones example</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/batching-test.html">Batching test</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/multi-scene-test.html"
|
||||
>Multi-scene test</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/bounds-test.html">Bounds test</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/visibility-test.html"
|
||||
>Visibility test</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/visibility-test-container.html"
|
||||
>Visibility test (container)</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/blend-test.html">Blend test</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/camera-pipeline-test.html"
|
||||
>Camera pipeline test</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/extended-class-test.html"
|
||||
>Extended class</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/canvas-test.html">Canvas test</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/depth-test.html">Depth test</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/render-to-texture-test.html"
|
||||
>Render to texture test</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/custom-spine-object-type.html"
|
||||
>Custom object factory name</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/add-existing.html"
|
||||
>Add existing object</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<li>Player</li>
|
||||
<ul>
|
||||
<li><a href="/spine-player/example/example.html">Example</a></li>
|
||||
<li><a href="/spine-player/example/physics.html">Physics</a></li>
|
||||
<li><a href="/spine-player/example/editor.html">Editor</a></li>
|
||||
<li>
|
||||
<a href="/spine-player/example/embedding-binary-example.html"
|
||||
>Embedding binary</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-player/example/embedding-json-example.html"
|
||||
>Embedding JSON</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-player/example/dispose.html">Disposing a player</a>
|
||||
</li>
|
||||
</ul>
|
||||
<li>WebGL</li>
|
||||
<ul>
|
||||
<li><a href="/spine-webgl/example">Example</a></li>
|
||||
<li><a href="/spine-webgl/example/barebones.html">Barebones</a></li>
|
||||
<li><a href="/spine-webgl/example/physics.html">Physics</a></li>
|
||||
<li><a href="/spine-webgl/example/physics2.html">Physics II</a></li>
|
||||
<li>
|
||||
<a href="/spine-webgl/example/mix-and-match.html"
|
||||
>Mix & match</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-webgl/example/custom-attachment.html"
|
||||
>Custom attachment</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-webgl/example/drag-and-drop.html"
|
||||
>Drag & drop</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="/spine-webgl/example/dress-up.html">Dress-up</a></li>
|
||||
<li>
|
||||
<a href="/spine-webgl/example/bone-dragging.html">Bone dragging</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-webgl/demos/additiveblending.html"
|
||||
>Additive blending</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="/spine-webgl/demos/clipping.html">Clipping</a></li>
|
||||
<li><a href="/spine-webgl/demos/hoverboard.html">Hoverboard</a></li>
|
||||
<li>
|
||||
<a href="/spine-webgl/demos/imagechanges.html">Image changes</a>
|
||||
</li>
|
||||
<li><a href="/spine-webgl/demos/meshes.html">Meshes</a></li>
|
||||
<li><a href="/spine-webgl/demos/skins.html">Skins</a></li>
|
||||
<li>
|
||||
<a href="/spine-webgl/demos/spritesheets.html">Spritesheets</a>
|
||||
</li>
|
||||
<li><a href="/spine-webgl/demos/stretchyman.html">Stretchyman</a></li>
|
||||
<li><a href="/spine-webgl/demos/tank.html">Tank</a></li>
|
||||
<li><a href="/spine-webgl/demos/transforms.html">Transforms</a></li>
|
||||
<li><a href="/spine-webgl/demos/transitions.html">Transitions</a></li>
|
||||
<li><a href="/spine-webgl/demos/vine.html">Vine</a></li>
|
||||
</ul>
|
||||
<li>THREE.JS</li>
|
||||
<ul>
|
||||
<li><a href="/spine-threejs/example/index.html">Example</a></li>
|
||||
<li>
|
||||
<a href="/spine-threejs/example/coordinate-transform.html"
|
||||
>Coordinate transform</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-threejs/example/logarithmic-depth-buffer.html"
|
||||
>Logarithmic depth buffer</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<li>Pixi</li>
|
||||
<ul>
|
||||
<li><a href="/spine-pixi/example/index.html">Basic example</a></li>
|
||||
<li>
|
||||
<a href="/spine-pixi/example/events-example.html">Events example</a>
|
||||
</li>
|
||||
</ul>
|
||||
<li>Phaser</li>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/basic-example.html">Basic example</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/events-example.html">Events example</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/mix-and-match-example.html"
|
||||
>Mix and match example</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/arcade-physics-example.html"
|
||||
>Arcade physics example</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/control-bones-example.html"
|
||||
>Control bones example</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/batching-test.html">Batching test</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/multi-scene-test.html"
|
||||
>Multi-scene test</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/bounds-test.html">Bounds test</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/visibility-test.html"
|
||||
>Visibility test</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/visibility-test-container.html"
|
||||
>Visibility test (container)</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="/spine-phaser/example/blend-test.html">Blend test</a></li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/camera-pipeline-test.html"
|
||||
>Camera pipeline test</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/extended-class-test.html"
|
||||
>Extended class</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/canvas-test.html">Canvas test</a>
|
||||
</li>
|
||||
<li><a href="/spine-phaser/example/depth-test.html">Depth test</a></li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/render-to-texture-test.html"
|
||||
>Render to texture test</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/custom-spine-object-type.html">Custom object factory name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-phaser/example/add-existing.html">Add existing object</a>
|
||||
</li>
|
||||
</ul>
|
||||
<li>Player</li>
|
||||
<ul>
|
||||
<li><a href="/spine-player/example/example.html">Example</a></li>
|
||||
<li>
|
||||
<a href="/spine-player/example/embedding-binary-example.html"
|
||||
>Embedding binary</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-player/example/embedding-json-example.html"
|
||||
>Embedding JSON</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-player/example/dispose.html">Disposing a player</a>
|
||||
</li>
|
||||
</ul>
|
||||
<li>WebGL</li>
|
||||
<ul>
|
||||
<li><a href="/spine-webgl/example">Example</a></li>
|
||||
<li><a href="/spine-webgl/example/barebones.html">Barebones</a></li>
|
||||
<li>
|
||||
<a href="/spine-webgl/example/mix-and-match.html">Mix & match</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-webgl/example/custom-attachment.html"
|
||||
>Custom attachment</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-webgl/example/drag-and-drop.html">Drag & drop</a>
|
||||
</li>
|
||||
<li><a href="/spine-webgl/example/dress-up.html">Dress-up</a></li>
|
||||
<li>
|
||||
<a href="/spine-webgl/example/bone-dragging.html">Bone dragging</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-webgl/demos/additiveblending.html"
|
||||
>Additive blending</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="/spine-webgl/demos/clipping.html">Clipping</a></li>
|
||||
<li><a href="/spine-webgl/demos/hoverboard.html">Hoverboard</a></li>
|
||||
<li>
|
||||
<a href="/spine-webgl/demos/imagechanges.html">Image changes</a>
|
||||
</li>
|
||||
<li><a href="/spine-webgl/demos/meshes.html">Meshes</a></li>
|
||||
<li><a href="/spine-webgl/demos/skins.html">Skins</a></li>
|
||||
<li><a href="/spine-webgl/demos/spritesheets.html">Spritesheets</a></li>
|
||||
<li><a href="/spine-webgl/demos/stretchyman.html">Stretchyman</a></li>
|
||||
<li><a href="/spine-webgl/demos/tank.html">Tank</a></li>
|
||||
<li><a href="/spine-webgl/demos/transforms.html">Transforms</a></li>
|
||||
<li><a href="/spine-webgl/demos/transitions.html">Transitions</a></li>
|
||||
<li><a href="/spine-webgl/demos/vine.html">Vine</a></li>
|
||||
</ul>
|
||||
<li>THREE.JS</li>
|
||||
<ul>
|
||||
<li><a href="/spine-threejs/example/index.html">Example</a></li>
|
||||
<li>
|
||||
<a href="/spine-threejs/example/coordinate-transform.html"
|
||||
>Coordinate transform</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/spine-threejs/example/logarithmic-depth-buffer.html"
|
||||
>Logarithmic depth buffer</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,43 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Add existing object</h1>
|
||||
</body>
|
||||
<script>
|
||||
</body>
|
||||
<script>
|
||||
class BasicExample extends Phaser.Scene {
|
||||
preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
create() {
|
||||
const spineboy = this.add.spine(200, 500, "spineboy-data", "spineboy-atlas");
|
||||
const spineboy2 = this.add.existing(new spine.SpineGameObject(this, this.spine, 500, 500, 'spineboy-data', "spineboy-atlas"));
|
||||
}
|
||||
create() {
|
||||
const spineboy = this.add.spine(
|
||||
200,
|
||||
500,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
);
|
||||
const spineboy2 = this.add.existing(
|
||||
new spine.SpineGameObject(
|
||||
this,
|
||||
this.spine,
|
||||
500,
|
||||
500,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
new Phaser.Game({
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: [BasicExample],
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
}
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: [BasicExample],
|
||||
plugins: {
|
||||
scene: [
|
||||
{
|
||||
key: "spine.SpinePlugin",
|
||||
plugin: spine.SpinePlugin,
|
||||
mapping: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,61 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Arcade Physics example</h1>
|
||||
</body>
|
||||
<script>
|
||||
</body>
|
||||
<script>
|
||||
class PhysicsExample extends Phaser.Scene {
|
||||
preload() {
|
||||
this.load.spineBinary("coin-data", "assets/coin-pro.skel");
|
||||
this.load.spineAtlas("coin-atlas", "assets/coin-pma.atlas");
|
||||
}
|
||||
preload() {
|
||||
this.load.spineBinary("coin-data", "assets/coin-pro.skel");
|
||||
this.load.spineAtlas("coin-atlas", "assets/coin-pma.atlas");
|
||||
}
|
||||
|
||||
create() {
|
||||
const coin = this.add.spine(400, 200, 'coin-data', "coin-atlas");
|
||||
coin.animationState.setAnimation(0, "animation", true);
|
||||
coin.setScale(0.3);
|
||||
coin.setSize(280, 280);
|
||||
create() {
|
||||
const coin = this.add.spine(400, 200, "coin-data", "coin-atlas");
|
||||
coin.animationState.setAnimation(0, "animation", true);
|
||||
coin.setScale(0.3);
|
||||
coin.setSize(280, 280);
|
||||
|
||||
this.physics.add.existing(coin);
|
||||
this.physics.add.existing(coin);
|
||||
|
||||
coin.body.setOffset(0, 50);
|
||||
coin.body.setVelocity(100, 200);
|
||||
coin.body.setBounce(1, 1);
|
||||
coin.body.setCollideWorldBounds(true);
|
||||
}
|
||||
coin.body.setOffset(0, 50);
|
||||
coin.body.setVelocity(100, 200);
|
||||
coin.body.setBounce(1, 1);
|
||||
coin.body.setCollideWorldBounds(true);
|
||||
}
|
||||
}
|
||||
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
physics: {
|
||||
default: 'arcade',
|
||||
arcade: {
|
||||
debug: true,
|
||||
gravity: { y: 200 }
|
||||
}
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
physics: {
|
||||
default: "arcade",
|
||||
arcade: {
|
||||
debug: true,
|
||||
gravity: { y: 200 },
|
||||
},
|
||||
scene: [PhysicsExample],
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
}
|
||||
},
|
||||
scene: [PhysicsExample],
|
||||
plugins: {
|
||||
scene: [
|
||||
{
|
||||
key: "spine.SpinePlugin",
|
||||
plugin: spine.SpinePlugin,
|
||||
mapping: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
</script>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,47 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Basic example</h1>
|
||||
</body>
|
||||
<script>
|
||||
</body>
|
||||
<script>
|
||||
class BasicExample extends Phaser.Scene {
|
||||
preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
create() {
|
||||
const spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.setInteractive();
|
||||
spineboy.displayWidth = 200;
|
||||
spineboy.displayHeight = spineboy.height / spineboy.width * 200;
|
||||
this.input.enableDebug(spineboy, 0xff00ff);
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
}
|
||||
create() {
|
||||
const spineboy = this.add.spine(
|
||||
400,
|
||||
500,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
);
|
||||
spineboy.setInteractive();
|
||||
spineboy.displayWidth = 200;
|
||||
spineboy.displayHeight = (spineboy.height / spineboy.width) * 200;
|
||||
this.input.enableDebug(spineboy, 0xff00ff);
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
}
|
||||
}
|
||||
|
||||
new Phaser.Game({
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: [BasicExample],
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
}
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: [BasicExample],
|
||||
plugins: {
|
||||
scene: [
|
||||
{
|
||||
key: "spine.SpinePlugin",
|
||||
plugin: spine.SpinePlugin,
|
||||
mapping: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,46 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<script src="https://unpkg.com/@esotericsoftware/spine-phaser@4.1.*/dist/iife/spine-phaser.min.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Basic example</h1>
|
||||
</body>
|
||||
<script>
|
||||
</body>
|
||||
<script>
|
||||
class BasicExample extends Phaser.Scene {
|
||||
preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
create() {
|
||||
const spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
}
|
||||
create() {
|
||||
const spineboy = this.add.spine(
|
||||
400,
|
||||
500,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
);
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
}
|
||||
}
|
||||
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: [BasicExample],
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
}
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: [BasicExample],
|
||||
plugins: {
|
||||
scene: [
|
||||
{
|
||||
key: "spine.SpinePlugin",
|
||||
plugin: spine.SpinePlugin,
|
||||
mapping: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
</script>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,65 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Batching test</h1>
|
||||
</body>
|
||||
<script>
|
||||
</body>
|
||||
<script>
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update,
|
||||
pack: {
|
||||
files: [
|
||||
{
|
||||
type: "scenePlugin",
|
||||
key: "spine.SpinePlugin",
|
||||
url: "../dist/iife/spine-phaser.js",
|
||||
sceneKey: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
let debug;
|
||||
|
||||
function preload() {
|
||||
this.load.spineJson("raptor-data", "assets/raptor-pro.json");
|
||||
this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
this.load.spineJson("raptor-data", "assets/raptor-pro.json");
|
||||
this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
function create() {
|
||||
const plugin = this.spine;
|
||||
let x = 25;
|
||||
let y = 60;
|
||||
for (let j = 0; j < 10; j++, y += 600 / 10) {
|
||||
for (let i = 0; i < 20; i++, x += 800 / 20) {
|
||||
const obj = Math.random() > 0.5
|
||||
? this.add.spine(x, y, 'spineboy-data', "spineboy-atlas")
|
||||
: this.add.spine(x, y, 'raptor-data', "raptor-atlas");
|
||||
obj.animationState.setAnimation(0, "walk", true);
|
||||
obj.scale = 0.1;
|
||||
}
|
||||
x = 25;
|
||||
const plugin = this.spine;
|
||||
let x = 25;
|
||||
let y = 60;
|
||||
for (let j = 0; j < 10; j++, y += 600 / 10) {
|
||||
for (let i = 0; i < 20; i++, x += 800 / 20) {
|
||||
const obj =
|
||||
Math.random() > 0.5
|
||||
? this.add.spine(x, y, "spineboy-data", "spineboy-atlas")
|
||||
: this.add.spine(x, y, "raptor-data", "raptor-atlas");
|
||||
obj.animationState.setAnimation(0, "walk", true);
|
||||
obj.scale = 0.1;
|
||||
}
|
||||
debug = this.add.text(0, 600 - 40, "FPS: ");
|
||||
x = 25;
|
||||
}
|
||||
debug = this.add.text(0, 600 - 40, "FPS: ");
|
||||
}
|
||||
|
||||
function update() {
|
||||
debug.setText("draw calls: " + spine.PolygonBatcher.getAndResetGlobalDrawCalls() + "\ndelta: " + game.loop.delta);
|
||||
debug.setText(
|
||||
"draw calls: " +
|
||||
spine.PolygonBatcher.getAndResetGlobalDrawCalls() +
|
||||
"\ndelta: " +
|
||||
game.loop.delta
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,72 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Blend test</h1>
|
||||
</body>
|
||||
<script>
|
||||
</body>
|
||||
<script>
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
backgroundColor: '#cdcdcd',
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
backgroundColor: "#cdcdcd",
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update,
|
||||
pack: {
|
||||
files: [
|
||||
{
|
||||
type: "scenePlugin",
|
||||
key: "spine.SpinePlugin",
|
||||
url: "../dist/iife/spine-phaser.js",
|
||||
sceneKey: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
let controls;
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
function preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
function create() {
|
||||
for (var i = 0; i < 4; i++) {
|
||||
const obj = this.add.spine(i * 200, 600, 'spineboy-data', 'spineboy-atlas').setScale(0.25);
|
||||
obj.setScale(0.25);
|
||||
obj.animationState.setAnimation(0, "idle", true);
|
||||
obj.animationState.setAnimation(1, "shoot", true);
|
||||
}
|
||||
const cursors = this.input.keyboard.createCursorKeys();
|
||||
for (var i = 0; i < 4; i++) {
|
||||
const obj = this.add
|
||||
.spine(i * 200, 600, "spineboy-data", "spineboy-atlas")
|
||||
.setScale(0.25);
|
||||
obj.setScale(0.25);
|
||||
obj.animationState.setAnimation(0, "idle", true);
|
||||
obj.animationState.setAnimation(1, "shoot", true);
|
||||
}
|
||||
const cursors = this.input.keyboard.createCursorKeys();
|
||||
|
||||
const controlConfig = {
|
||||
camera: this.cameras.main,
|
||||
left: cursors.left,
|
||||
right: cursors.right,
|
||||
up: cursors.up,
|
||||
down: cursors.down,
|
||||
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
|
||||
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
|
||||
acceleration: 0.35,
|
||||
drag: 0.01,
|
||||
maxSpeed: 1.2
|
||||
};
|
||||
const controlConfig = {
|
||||
camera: this.cameras.main,
|
||||
left: cursors.left,
|
||||
right: cursors.right,
|
||||
up: cursors.up,
|
||||
down: cursors.down,
|
||||
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
|
||||
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
|
||||
acceleration: 0.35,
|
||||
drag: 0.01,
|
||||
maxSpeed: 1.2,
|
||||
};
|
||||
|
||||
controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
|
||||
controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
|
||||
}
|
||||
|
||||
function update(time, delta) {
|
||||
controls.update(delta);
|
||||
controls.update(delta);
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,58 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Bounds test</h1>
|
||||
</body>
|
||||
<script>
|
||||
</body>
|
||||
<script>
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update,
|
||||
pack: {
|
||||
files: [
|
||||
{
|
||||
type: "scenePlugin",
|
||||
key: "spine.SpinePlugin",
|
||||
url: "../dist/iife/spine-phaser.js",
|
||||
sceneKey: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
let spineboy;
|
||||
|
||||
function preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
function create() {
|
||||
spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas", new spine.SkinsAndAnimationBoundsProvider("run"));
|
||||
spineboy.scale = 0.4
|
||||
spineboy.setInteractive();
|
||||
this.input.enableDebug(spineboy, 0xff00ff);
|
||||
spineboy.on("pointerdown", () => spineboy.animationState.setAnimation(0, "run", true));
|
||||
spineboy = this.add.spine(
|
||||
400,
|
||||
300,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas",
|
||||
new spine.SkinsAndAnimationBoundsProvider("run")
|
||||
);
|
||||
spineboy.scale = 0.4;
|
||||
spineboy.setInteractive();
|
||||
this.input.enableDebug(spineboy, 0xff00ff);
|
||||
spineboy.on("pointerdown", () =>
|
||||
spineboy.animationState.setAnimation(0, "run", true)
|
||||
);
|
||||
}
|
||||
|
||||
let time = 0;
|
||||
function update(t, delta) {
|
||||
time += delta / 1000;
|
||||
const scale = 0.4 + Math.cos(time) * 0.2;
|
||||
spineboy.scale = scale;
|
||||
spineboy.angle++;
|
||||
time += delta / 1000;
|
||||
const scale = 0.4 + Math.cos(time) * 0.2;
|
||||
spineboy.scale = scale;
|
||||
spineboy.angle++;
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,35 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Camera pipeline test</h1>
|
||||
<script>
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
backgroundColor: '#cdcdcd',
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
backgroundColor: "#cdcdcd",
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{
|
||||
type: "scenePlugin",
|
||||
key: "spine.SpinePlugin",
|
||||
url: "../dist/iife/spine-phaser.js",
|
||||
sceneKey: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const fragShader = `
|
||||
const fragShader = `
|
||||
#define SHADER_NAME PLASMA_FS
|
||||
|
||||
precision mediump float;
|
||||
@ -59,54 +64,55 @@
|
||||
}
|
||||
`;
|
||||
|
||||
class PlasmaPostFX extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline {
|
||||
constructor(game) {
|
||||
super({
|
||||
game,
|
||||
name: 'PlasmaPostFX',
|
||||
fragShader,
|
||||
uniforms: [
|
||||
'uMainSampler',
|
||||
'uTime',
|
||||
'uResolution'
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
onPreRender() {
|
||||
this.set1f('uTime', this.game.loop.time / 1000);
|
||||
}
|
||||
|
||||
onDraw(renderTarget) {
|
||||
this.set2f('uResolution', renderTarget.width, renderTarget.height);
|
||||
|
||||
this.bindAndDraw(renderTarget);
|
||||
}
|
||||
class PlasmaPostFX extends Phaser.Renderer.WebGL.Pipelines
|
||||
.PostFXPipeline {
|
||||
constructor(game) {
|
||||
super({
|
||||
game,
|
||||
name: "PlasmaPostFX",
|
||||
fragShader,
|
||||
uniforms: ["uMainSampler", "uTime", "uResolution"],
|
||||
});
|
||||
}
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
function preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
this.load.image("img", "assets/raptor-pma.png")
|
||||
onPreRender() {
|
||||
this.set1f("uTime", this.game.loop.time / 1000);
|
||||
}
|
||||
|
||||
function create() {
|
||||
this.renderer.pipelines.addPostPipeline('PlasmaPostFX', PlasmaPostFX);
|
||||
onDraw(renderTarget) {
|
||||
this.set2f("uResolution", renderTarget.width, renderTarget.height);
|
||||
|
||||
// FIXME: Need a dummy sprite so the MultiPipeline sets up state
|
||||
// so rendering the Spine sprite actually works. Unsure what state
|
||||
// is needed.
|
||||
this.add.sprite(0, 0, 'img');
|
||||
|
||||
const spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
|
||||
this.cameras.main.setPostPipeline("PlasmaPostFX");
|
||||
this.bindAndDraw(renderTarget);
|
||||
}
|
||||
}
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
function preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
this.load.image("img", "assets/raptor-pma.png");
|
||||
}
|
||||
|
||||
function create() {
|
||||
this.renderer.pipelines.addPostPipeline("PlasmaPostFX", PlasmaPostFX);
|
||||
|
||||
// FIXME: Need a dummy sprite so the MultiPipeline sets up state
|
||||
// so rendering the Spine sprite actually works. Unsure what state
|
||||
// is needed.
|
||||
this.add.sprite(0, 0, "img");
|
||||
|
||||
const spineboy = this.add.spine(
|
||||
400,
|
||||
300,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
);
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
|
||||
this.cameras.main.setPostPipeline("PlasmaPostFX");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,46 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Canvas test</h1>
|
||||
</body>
|
||||
<script>
|
||||
</body>
|
||||
<script>
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.CANVAS,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.CANVAS,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{
|
||||
type: "scenePlugin",
|
||||
key: "spine.SpinePlugin",
|
||||
url: "../dist/iife/spine-phaser.js",
|
||||
sceneKey: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
function preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
function create() {
|
||||
const spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
const spineboy = this.add.spine(
|
||||
400,
|
||||
300,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
);
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,72 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Control bones</h1>
|
||||
<script>
|
||||
class ControlBonesExample extends Phaser.Scene {
|
||||
preload() {
|
||||
this.load.spineBinary("stretchyman-data", "assets/stretchyman-pro.skel");
|
||||
this.load.spineAtlas("stretchyman-atlas", "assets/stretchyman-pma.atlas");
|
||||
}
|
||||
|
||||
create() {
|
||||
const stretchyman = this.add.spine(400, 580, 'stretchyman-data', "stretchyman-atlas");
|
||||
stretchyman.animationState.setAnimation(0, "idle", true);
|
||||
stretchyman.updatePose(0);
|
||||
|
||||
const controlBoneNames = ["back-arm-ik-target", "back-leg-ik-target", "front-arm-ik-target", "front-leg-ik-target"];
|
||||
const controlBones = [];
|
||||
for (var i = 0; i < controlBoneNames.length; i++) {
|
||||
const bone = stretchyman.skeleton.findBone(controlBoneNames[i]);
|
||||
const point = { x: bone.worldX, y: bone.worldY };
|
||||
stretchyman.skeletonToPhaserWorldCoordinates(point);
|
||||
|
||||
const control = this.add.circle(point.x, point.y, 4, 0xff00ff).setData('bone', bone);
|
||||
controlBones.push(control);
|
||||
|
||||
control.setInteractive();
|
||||
this.input.setDraggable(control);
|
||||
this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
|
||||
gameObject.x = dragX;
|
||||
gameObject.y = dragY;
|
||||
}, this);
|
||||
}
|
||||
|
||||
stretchyman.beforeUpdateWorldTransforms = () => {
|
||||
for (let controlBone of controlBones) {
|
||||
const bone = controlBone.getData('bone');
|
||||
const point = { x: controlBone.x, y: controlBone.y};
|
||||
stretchyman.phaserWorldCoordinatesToBone(point, bone);
|
||||
bone.x = point.x;
|
||||
bone.y = point.y;
|
||||
}
|
||||
}
|
||||
}
|
||||
class ControlBonesExample extends Phaser.Scene {
|
||||
preload() {
|
||||
this.load.spineBinary(
|
||||
"stretchyman-data",
|
||||
"assets/stretchyman-pro.skel"
|
||||
);
|
||||
this.load.spineAtlas(
|
||||
"stretchyman-atlas",
|
||||
"assets/stretchyman-pma.atlas"
|
||||
);
|
||||
}
|
||||
|
||||
new Phaser.Game({
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: [ControlBonesExample],
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
create() {
|
||||
const stretchyman = this.add.spine(
|
||||
400,
|
||||
580,
|
||||
"stretchyman-data",
|
||||
"stretchyman-atlas"
|
||||
);
|
||||
stretchyman.animationState.setAnimation(0, "idle", true);
|
||||
stretchyman.updatePose(0);
|
||||
|
||||
</html>
|
||||
const controlBoneNames = [
|
||||
"back-arm-ik-target",
|
||||
"back-leg-ik-target",
|
||||
"front-arm-ik-target",
|
||||
"front-leg-ik-target",
|
||||
];
|
||||
const controlBones = [];
|
||||
for (var i = 0; i < controlBoneNames.length; i++) {
|
||||
const bone = stretchyman.skeleton.findBone(controlBoneNames[i]);
|
||||
const point = { x: bone.worldX, y: bone.worldY };
|
||||
stretchyman.skeletonToPhaserWorldCoordinates(point);
|
||||
|
||||
const control = this.add
|
||||
.circle(point.x, point.y, 4, 0xff00ff)
|
||||
.setData("bone", bone);
|
||||
controlBones.push(control);
|
||||
|
||||
control.setInteractive();
|
||||
this.input.setDraggable(control);
|
||||
this.input.on(
|
||||
"drag",
|
||||
function (pointer, gameObject, dragX, dragY) {
|
||||
gameObject.x = dragX;
|
||||
gameObject.y = dragY;
|
||||
},
|
||||
this
|
||||
);
|
||||
}
|
||||
|
||||
stretchyman.beforeUpdateWorldTransforms = () => {
|
||||
for (let controlBone of controlBones) {
|
||||
const bone = controlBone.getData("bone");
|
||||
const point = { x: controlBone.x, y: controlBone.y };
|
||||
stretchyman.phaserWorldCoordinatesToBone(point, bone);
|
||||
bone.x = point.x;
|
||||
bone.y = point.y;
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
new Phaser.Game({
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: [ControlBonesExample],
|
||||
plugins: {
|
||||
scene: [
|
||||
{
|
||||
key: "spine.SpinePlugin",
|
||||
plugin: spine.SpinePlugin,
|
||||
mapping: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,49 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Custom object factor name</h1>
|
||||
</body>
|
||||
<script>
|
||||
</body>
|
||||
<script>
|
||||
window.SPINE_GAME_OBJECT_TYPE = "spineOfficial";
|
||||
|
||||
class BasicExample extends Phaser.Scene {
|
||||
preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
create() {
|
||||
const spineboy = this.add.spineOfficial(400, 500, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.setInteractive();
|
||||
spineboy.displayWidth = 200;
|
||||
spineboy.displayHeight = spineboy.height / spineboy.width * 200;
|
||||
this.input.enableDebug(spineboy, 0xff00ff);
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
}
|
||||
create() {
|
||||
const spineboy = this.add.spineOfficial(
|
||||
400,
|
||||
500,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
);
|
||||
spineboy.setInteractive();
|
||||
spineboy.displayWidth = 200;
|
||||
spineboy.displayHeight = (spineboy.height / spineboy.width) * 200;
|
||||
this.input.enableDebug(spineboy, 0xff00ff);
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
}
|
||||
}
|
||||
|
||||
new Phaser.Game({
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: [BasicExample],
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
}
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: [BasicExample],
|
||||
plugins: {
|
||||
scene: [
|
||||
{
|
||||
key: "spine.SpinePlugin",
|
||||
plugin: spine.SpinePlugin,
|
||||
mapping: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,50 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Depth test</h1>
|
||||
</body>
|
||||
<script>
|
||||
</body>
|
||||
<script>
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{
|
||||
type: "scenePlugin",
|
||||
key: "spine.SpinePlugin",
|
||||
url: "../dist/iife/spine-phaser.js",
|
||||
sceneKey: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
function preload() {
|
||||
this.load.image('logo', 'phaser.png');
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
this.load.image("logo", "phaser.png");
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
function create() {
|
||||
this.add.image(400, 350, 'logo').setName('logo1').setDepth(2);
|
||||
const spineboy = this.add.spine(400, 600, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.animationState.setAnimation(0, "walk", true)
|
||||
spineboy.setScale(0.5)
|
||||
spineboy.setDepth(1);
|
||||
this.add.text(400, 300, 'Set Depth Test', { font: '16px Courier', fill: '#00ff00' }).setName('text').setOrigin(0.5);
|
||||
this.add.image(400, 350, "logo").setName("logo1").setDepth(2);
|
||||
const spineboy = this.add.spine(
|
||||
400,
|
||||
600,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
);
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
spineboy.setScale(0.5);
|
||||
spineboy.setDepth(1);
|
||||
this.add
|
||||
.text(400, 300, "Set Depth Test", {
|
||||
font: "16px Courier",
|
||||
fill: "#00ff00",
|
||||
})
|
||||
.setName("text")
|
||||
.setOrigin(0.5);
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,70 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Events example</h1>
|
||||
<div style="display: flex; flex-direction: column; width: 800px">
|
||||
<canvas id="game" width="800" height="600"></canvas>
|
||||
<textarea id="log" style="height: 10em;"></textarea>
|
||||
<canvas id="game" width="800" height="600"></canvas>
|
||||
<textarea id="log" style="height: 10em"></textarea>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
</body>
|
||||
<script>
|
||||
function log(message) {
|
||||
let log = document.querySelector("#log");
|
||||
log.textContent += message + "\n";
|
||||
log.scrollTop = log.scrollHeight;
|
||||
console.log(message);
|
||||
let log = document.querySelector("#log");
|
||||
log.textContent += message + "\n";
|
||||
log.scrollTop = log.scrollHeight;
|
||||
console.log(message);
|
||||
}
|
||||
|
||||
class EventsExample extends Phaser.Scene {
|
||||
preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
create() {
|
||||
const spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.scale = 0.5;
|
||||
create() {
|
||||
const spineboy = this.add.spine(
|
||||
400,
|
||||
500,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
);
|
||||
spineboy.scale = 0.5;
|
||||
|
||||
spineboy.animationState.addListener({
|
||||
start: (entry) => log(`Started animation ${entry.animation.name}`),
|
||||
interrupt: (entry) => log(`Interrupted animation ${entry.animation.name}`),
|
||||
end: (entry) => log(`Ended animation ${entry.animation.name}`),
|
||||
dispose: (entry) => log(`Disposed animation ${entry.animation.name}`),
|
||||
complete: (entry) => log(`Completed animation ${entry.animation.name}`),
|
||||
})
|
||||
spineboy.animationState.addListener({
|
||||
start: (entry) => log(`Started animation ${entry.animation.name}`),
|
||||
interrupt: (entry) =>
|
||||
log(`Interrupted animation ${entry.animation.name}`),
|
||||
end: (entry) => log(`Ended animation ${entry.animation.name}`),
|
||||
dispose: (entry) => log(`Disposed animation ${entry.animation.name}`),
|
||||
complete: (entry) =>
|
||||
log(`Completed animation ${entry.animation.name}`),
|
||||
});
|
||||
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
const trackEntry = spineboy.animationState.addAnimation(0, "run", 3, true);
|
||||
trackEntry.listener = {
|
||||
event: (entry, event) => log(`Custom event for ${entry.animation.name}: ${event.data.name}`)
|
||||
}
|
||||
}
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
const trackEntry = spineboy.animationState.addAnimation(
|
||||
0,
|
||||
"run",
|
||||
3,
|
||||
true
|
||||
);
|
||||
trackEntry.listener = {
|
||||
event: (entry, event) =>
|
||||
log(`Custom event for ${entry.animation.name}: ${event.data.name}`),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const config = {
|
||||
canvas: document.querySelector("#game"),
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: [EventsExample],
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
}
|
||||
canvas: document.querySelector("#game"),
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: [EventsExample],
|
||||
plugins: {
|
||||
scene: [
|
||||
{
|
||||
key: "spine.SpinePlugin",
|
||||
plugin: spine.SpinePlugin,
|
||||
mapping: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
</script>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,103 +1,132 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Extended class</h1>
|
||||
</body>
|
||||
<script>
|
||||
|
||||
|
||||
</body>
|
||||
<script>
|
||||
function preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
function create() {
|
||||
const spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
const spineboy = this.add.spine(
|
||||
400,
|
||||
300,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
);
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
}
|
||||
|
||||
class CustomSpineObject1 {
|
||||
constructor(scene, x, y, data, atlas, animation, loop) {
|
||||
this.scene = scene;
|
||||
this.spine = scene.add.spine(x, y, data, atlas);
|
||||
this.spine.animationState.setAnimation(0, animation, loop);
|
||||
}
|
||||
constructor(scene, x, y, data, atlas, animation, loop) {
|
||||
this.scene = scene;
|
||||
this.spine = scene.add.spine(x, y, data, atlas);
|
||||
this.spine.animationState.setAnimation(0, animation, loop);
|
||||
}
|
||||
}
|
||||
|
||||
class CustomSpineObject2 {
|
||||
constructor(scene, x, y, dataKey, atlasKey, animation, loop) {
|
||||
this.scene = scene;
|
||||
this.spine = scene.make.spine({ scene, x, y, dataKey, atlasKey });
|
||||
this.spine.animationState.setAnimation(0, animation, loop);
|
||||
constructor(scene, x, y, dataKey, atlasKey, animation, loop) {
|
||||
this.scene = scene;
|
||||
this.spine = scene.make.spine({ scene, x, y, dataKey, atlasKey });
|
||||
this.spine.animationState.setAnimation(0, animation, loop);
|
||||
|
||||
scene.sys.displayList.add(this.spine);
|
||||
scene.sys.updateList.add(this.spine);
|
||||
}
|
||||
scene.sys.displayList.add(this.spine);
|
||||
scene.sys.updateList.add(this.spine);
|
||||
}
|
||||
}
|
||||
|
||||
class CustomSpineObject3 {
|
||||
constructor(scene, x, y, dataKey, atlasKey, animation, loop) {
|
||||
this.scene = scene;
|
||||
constructor(scene, x, y, dataKey, atlasKey, animation, loop) {
|
||||
this.scene = scene;
|
||||
|
||||
this.parent = scene.add.container(0, 0);
|
||||
this.spine = scene.make.spine({ scene, x, y, dataKey, atlasKey });
|
||||
this.spine.animationState.setAnimation(0, animation, loop);
|
||||
this.parent.add(this.spine);
|
||||
}
|
||||
this.parent = scene.add.container(0, 0);
|
||||
this.spine = scene.make.spine({ scene, x, y, dataKey, atlasKey });
|
||||
this.spine.animationState.setAnimation(0, animation, loop);
|
||||
this.parent.add(this.spine);
|
||||
}
|
||||
}
|
||||
|
||||
class Example extends Phaser.Scene {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
preload() {
|
||||
this.load.image('logo', 'phaser.png');
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
preload() {
|
||||
this.load.image("logo", "phaser.png");
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
create() {
|
||||
this.add.image(0, 0, 'logo').setOrigin(0);
|
||||
create() {
|
||||
this.add.image(0, 0, "logo").setOrigin(0);
|
||||
|
||||
const custom1 = new CustomSpineObject1(this, 100, 550, 'spineboy-data', 'spineboy-atlas', 'idle', true);
|
||||
custom1.spine.setScale(0.5);
|
||||
const custom2 = new CustomSpineObject2(this, 350, 550, 'spineboy-data', 'spineboy-atlas', 'walk', true);
|
||||
custom2.spine.setScale(0.5);
|
||||
const custom3 = new CustomSpineObject3(this, 600, 550, 'spineboy-data', 'spineboy-atlas', 'run', true);
|
||||
custom3.spine.setScale(0.5);
|
||||
const custom1 = new CustomSpineObject1(
|
||||
this,
|
||||
100,
|
||||
550,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas",
|
||||
"idle",
|
||||
true
|
||||
);
|
||||
custom1.spine.setScale(0.5);
|
||||
const custom2 = new CustomSpineObject2(
|
||||
this,
|
||||
350,
|
||||
550,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas",
|
||||
"walk",
|
||||
true
|
||||
);
|
||||
custom2.spine.setScale(0.5);
|
||||
const custom3 = new CustomSpineObject3(
|
||||
this,
|
||||
600,
|
||||
550,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas",
|
||||
"run",
|
||||
true
|
||||
);
|
||||
custom3.spine.setScale(0.5);
|
||||
|
||||
this.add.image(400, 0, 'logo').setOrigin(0);
|
||||
}
|
||||
this.add.image(400, 0, "logo").setOrigin(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const config = {
|
||||
type: Phaser.WEBGL,
|
||||
parent: 'phaser-example',
|
||||
width: 800,
|
||||
height: 600,
|
||||
backgroundColor: '#2d2d2d',
|
||||
scene: Example,
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
}
|
||||
type: Phaser.WEBGL,
|
||||
parent: "phaser-example",
|
||||
width: 800,
|
||||
height: 600,
|
||||
backgroundColor: "#2d2d2d",
|
||||
scene: Example,
|
||||
plugins: {
|
||||
scene: [
|
||||
{
|
||||
key: "spine.SpinePlugin",
|
||||
plugin: spine.SpinePlugin,
|
||||
mapping: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
</script>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,60 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Mix and match</h1>
|
||||
</body>
|
||||
<script>
|
||||
</body>
|
||||
<script>
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{
|
||||
type: "scenePlugin",
|
||||
key: "spine.SpinePlugin",
|
||||
url: "../dist/iife/spine-phaser.js",
|
||||
sceneKey: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
function preload() {
|
||||
this.load.spineBinary("mix-and-match-data", "assets/mix-and-match-pro.skel");
|
||||
this.load.spineAtlas("mix-and-match-atlas", "assets/mix-and-match-pma.atlas");
|
||||
this.load.spineBinary(
|
||||
"mix-and-match-data",
|
||||
"assets/mix-and-match-pro.skel"
|
||||
);
|
||||
this.load.spineAtlas(
|
||||
"mix-and-match-atlas",
|
||||
"assets/mix-and-match-pma.atlas"
|
||||
);
|
||||
}
|
||||
|
||||
function create() {
|
||||
const mixAndMatch = this.add.spine(400, 500, 'mix-and-match-data', "mix-and-match-atlas", new spine.SkinsAndAnimationBoundsProvider(null, ["full-skins/girl"]));
|
||||
mixAndMatch.scale = 0.5;
|
||||
mixAndMatch.animationState.setAnimation(0, "walk", true);
|
||||
const mixAndMatch = this.add.spine(
|
||||
400,
|
||||
500,
|
||||
"mix-and-match-data",
|
||||
"mix-and-match-atlas",
|
||||
new spine.SkinsAndAnimationBoundsProvider(null, ["full-skins/girl"])
|
||||
);
|
||||
mixAndMatch.scale = 0.5;
|
||||
mixAndMatch.animationState.setAnimation(0, "walk", true);
|
||||
|
||||
const skeletonData = mixAndMatch.skeleton.data;
|
||||
const skin = new spine.Skin("custom");
|
||||
skin.addSkin(skeletonData.findSkin("skin-base"));
|
||||
skin.addSkin(skeletonData.findSkin("nose/short"));
|
||||
skin.addSkin(skeletonData.findSkin("eyelids/girly"));
|
||||
skin.addSkin(skeletonData.findSkin("eyes/violet"));
|
||||
skin.addSkin(skeletonData.findSkin("hair/brown"));
|
||||
skin.addSkin(skeletonData.findSkin("clothes/hoodie-orange"));
|
||||
skin.addSkin(skeletonData.findSkin("legs/pants-jeans"));
|
||||
skin.addSkin(skeletonData.findSkin("accessories/bag"));
|
||||
skin.addSkin(skeletonData.findSkin("accessories/hat-red-yellow"));
|
||||
mixAndMatch.skeleton.setSkin(skin);
|
||||
mixAndMatch.skeleton.setToSetupPose();
|
||||
const skeletonData = mixAndMatch.skeleton.data;
|
||||
const skin = new spine.Skin("custom");
|
||||
skin.addSkin(skeletonData.findSkin("skin-base"));
|
||||
skin.addSkin(skeletonData.findSkin("nose/short"));
|
||||
skin.addSkin(skeletonData.findSkin("eyelids/girly"));
|
||||
skin.addSkin(skeletonData.findSkin("eyes/violet"));
|
||||
skin.addSkin(skeletonData.findSkin("hair/brown"));
|
||||
skin.addSkin(skeletonData.findSkin("clothes/hoodie-orange"));
|
||||
skin.addSkin(skeletonData.findSkin("legs/pants-jeans"));
|
||||
skin.addSkin(skeletonData.findSkin("accessories/bag"));
|
||||
skin.addSkin(skeletonData.findSkin("accessories/hat-red-yellow"));
|
||||
mixAndMatch.skeleton.setSkin(skin);
|
||||
mixAndMatch.skeleton.setToSetupPose();
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,68 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Multi-scene test</h1>
|
||||
</body>
|
||||
<script>
|
||||
</body>
|
||||
<script>
|
||||
class Scene1 extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: "Scene1" })
|
||||
}
|
||||
constructor() {
|
||||
super({ key: "Scene1" });
|
||||
}
|
||||
|
||||
preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
create() {
|
||||
const spineboy = this.add.spine(400, 500, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
this.input.once('pointerdown', () => this.scene.start('Scene2'));
|
||||
}
|
||||
create() {
|
||||
const spineboy = this.add.spine(
|
||||
400,
|
||||
500,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
);
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
this.input.once("pointerdown", () => this.scene.start("Scene2"));
|
||||
}
|
||||
}
|
||||
|
||||
class Scene2 extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: "Scene2" })
|
||||
}
|
||||
constructor() {
|
||||
super({ key: "Scene2" });
|
||||
}
|
||||
|
||||
preload() {
|
||||
this.load.spineJson("raptor-data", "assets/raptor-pro.json");
|
||||
this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
|
||||
}
|
||||
preload() {
|
||||
this.load.spineJson("raptor-data", "assets/raptor-pro.json");
|
||||
this.load.spineAtlas("raptor-atlas", "assets/raptor-pma.atlas");
|
||||
}
|
||||
|
||||
create() {
|
||||
const raptor = this.add.spine(300, 600, 'raptor-data', "raptor-atlas");
|
||||
raptor.scale = 0.5;
|
||||
raptor.animationState.setAnimation(0, "walk", true);
|
||||
this.input.once('pointerdown', () => this.scene.start('Scene1'));
|
||||
}
|
||||
create() {
|
||||
const raptor = this.add.spine(300, 600, "raptor-data", "raptor-atlas");
|
||||
raptor.scale = 0.5;
|
||||
raptor.animationState.setAnimation(0, "walk", true);
|
||||
this.input.once("pointerdown", () => this.scene.start("Scene1"));
|
||||
}
|
||||
}
|
||||
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: [Scene1, Scene2],
|
||||
plugins: {
|
||||
scene: [
|
||||
{ key: "spine.SpinePlugin", plugin: spine.SpinePlugin, mapping: "spine" }
|
||||
]
|
||||
}
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: [Scene1, Scene2],
|
||||
plugins: {
|
||||
scene: [
|
||||
{
|
||||
key: "spine.SpinePlugin",
|
||||
plugin: spine.SpinePlugin,
|
||||
mapping: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
const game = new Phaser.Game(config);
|
||||
</script>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,57 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Render to texture</h1>
|
||||
</body>
|
||||
<script>
|
||||
</body>
|
||||
<script>
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{
|
||||
type: "scenePlugin",
|
||||
key: "spine.SpinePlugin",
|
||||
url: "../dist/iife/spine-phaser.js",
|
||||
sceneKey: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
function preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
function create() {
|
||||
const renderTexture = this.add.renderTexture(400, 300, 800, 600);
|
||||
const spineboy = this.add.spine(400, 300, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
this.add.text(200, 8, 'Click to stamp SpineBoy');
|
||||
const renderTexture = this.add.renderTexture(400, 300, 800, 600);
|
||||
const spineboy = this.add.spine(
|
||||
400,
|
||||
300,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
);
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
this.add.text(200, 8, "Click to stamp SpineBoy");
|
||||
|
||||
this.input.on('pointermove', function (pointer) {
|
||||
spineboy.setPosition(pointer.x, pointer.y);
|
||||
}, this);
|
||||
this.input.on(
|
||||
"pointermove",
|
||||
function (pointer) {
|
||||
spineboy.setPosition(pointer.x, pointer.y);
|
||||
},
|
||||
this
|
||||
);
|
||||
|
||||
this.input.on('pointerdown', function (pointer) {
|
||||
renderTexture.draw(spineboy);
|
||||
spineboy.angle += 10;
|
||||
}, this);
|
||||
this.input.on(
|
||||
"pointerdown",
|
||||
function (pointer) {
|
||||
renderTexture.draw(spineboy);
|
||||
spineboy.angle += 10;
|
||||
},
|
||||
this
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,66 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Visibility Test 2</h1>
|
||||
</body>
|
||||
<script>
|
||||
</body>
|
||||
<script>
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{
|
||||
type: "scenePlugin",
|
||||
key: "spine.SpinePlugin",
|
||||
url: "../dist/iife/spine-phaser.js",
|
||||
sceneKey: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
function preload() {
|
||||
this.load.image('coin', 'assets/coin-pma.png');
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
this.load.image("coin", "assets/coin-pma.png");
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
function create() {
|
||||
const spineboy = this.add.spine(100, 400, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.scale = 0.25;
|
||||
spineboy.animationState.setAnimation(0, "idle", true);
|
||||
const spineboy = this.add.spine(
|
||||
100,
|
||||
400,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
);
|
||||
spineboy.scale = 0.25;
|
||||
spineboy.animationState.setAnimation(0, "idle", true);
|
||||
|
||||
const spineboy2 = this.add.spine(250, 400, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy2.scale = 0.25;
|
||||
spineboy2.animationState.setAnimation(0, "walk", true);
|
||||
const spineboy2 = this.add.spine(
|
||||
250,
|
||||
400,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
);
|
||||
spineboy2.scale = 0.25;
|
||||
spineboy2.animationState.setAnimation(0, "walk", true);
|
||||
|
||||
window.coin = this.add.image(400,500,'coin').setOrigin(0.5,1).setScale(0.3).setCrop(304,283,286,284);
|
||||
window.coin = this.add
|
||||
.image(400, 500, "coin")
|
||||
.setOrigin(0.5, 1)
|
||||
.setScale(0.3)
|
||||
.setCrop(304, 283, 286, 284);
|
||||
|
||||
const spineboy3 = this.add.spine(500, 400, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy3.scale = 0.25;
|
||||
spineboy3.animationState.setAnimation(0, "run", true);
|
||||
const spineboy3 = this.add.spine(
|
||||
500,
|
||||
400,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
);
|
||||
spineboy3.scale = 0.25;
|
||||
spineboy3.animationState.setAnimation(0, "run", true);
|
||||
|
||||
const spineboy4 = this.add.spine(650, 400, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy4.scale = 0.25;
|
||||
spineboy4.animationState.setAnimation(0, "shoot", true);
|
||||
const spineboy4 = this.add.spine(
|
||||
650,
|
||||
400,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
);
|
||||
spineboy4.scale = 0.25;
|
||||
spineboy4.animationState.setAnimation(0, "shoot", true);
|
||||
|
||||
const grp = this.add.container().add([spineboy,spineboy2,coin,spineboy3,spineboy4]);
|
||||
const grp = this.add
|
||||
.container()
|
||||
.add([spineboy, spineboy2, coin, spineboy3, spineboy4]);
|
||||
|
||||
this.input.on('pointerdown', () => spineboy2.visible = !spineboy2.visible);
|
||||
this.input.on(
|
||||
"pointerdown",
|
||||
() => (spineboy2.visible = !spineboy2.visible)
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,53 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
|
||||
<script src="../dist/iife/spine-phaser.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Phaser Example</title>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="p-4 flex flex-col items-center">
|
||||
<h1>Basic example</h1>
|
||||
</body>
|
||||
<script>
|
||||
</body>
|
||||
<script>
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{ type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
|
||||
]
|
||||
}
|
||||
}
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
type: Phaser.WEBGL,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
pack: {
|
||||
files: [
|
||||
{
|
||||
type: "scenePlugin",
|
||||
key: "spine.SpinePlugin",
|
||||
url: "../dist/iife/spine-phaser.js",
|
||||
sceneKey: "spine",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
function preload() {
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
this.load.spineBinary("spineboy-data", "assets/spineboy-pro.skel");
|
||||
this.load.spineAtlas("spineboy-atlas", "assets/spineboy-pma.atlas");
|
||||
}
|
||||
|
||||
function create() {
|
||||
const spineboy = this.add.spine(250, 500, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
const spineboy = this.add.spine(
|
||||
250,
|
||||
500,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
);
|
||||
spineboy.scale = 0.5;
|
||||
spineboy.animationState.setAnimation(0, "walk", true);
|
||||
|
||||
const spineboy2 = this.add.spine(550, 500, 'spineboy-data', "spineboy-atlas");
|
||||
spineboy2.scale = 0.5;
|
||||
spineboy2.animationState.setAnimation(0, "run", true);
|
||||
const spineboy2 = this.add.spine(
|
||||
550,
|
||||
500,
|
||||
"spineboy-data",
|
||||
"spineboy-atlas"
|
||||
);
|
||||
spineboy2.scale = 0.5;
|
||||
spineboy2.animationState.setAnimation(0, "run", true);
|
||||
|
||||
this.input.on('pointerdown', () => spineboy2.visible = !spineboy2.visible);
|
||||
this.input.on(
|
||||
"pointerdown",
|
||||
() => (spineboy2.visible = !spineboy2.visible)
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -6,20 +6,12 @@
|
||||
<script src="../dist/iife/spine-player.js"></script>
|
||||
<link rel="stylesheet" href="../css/spine-player.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
</head>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: gray;
|
||||
margin: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<body class="flex flex-col" style="gap: 1em;">
|
||||
<div id="container" style="width:640px; height:380px"></div>
|
||||
<div>
|
||||
<button id="dispose">Dispose</button>
|
||||
</div>
|
||||
<button id="dispose" style="align-self: flex-start;">Dispose</button>
|
||||
</body>
|
||||
<script>
|
||||
var player = createPlayer();
|
||||
@ -42,7 +34,7 @@
|
||||
},
|
||||
showControls: true
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
@ -1,18 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="../dist/iife/spine-player.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
<title>Spine Player Editor</title>
|
||||
</head>
|
||||
<body style="width: 100vw; height: 100vh; display: flex; margin: 0; padding: 0;">
|
||||
<div id="editor" style="width: 100%; height: 100%"></div>
|
||||
</head>
|
||||
<body class="flex flex-col w-full h-screen items-center">
|
||||
<div id="editor" class="w-full h-full flex-grow"></div>
|
||||
|
||||
<script>
|
||||
var code = "<script src=\"https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/iife/spine-player.js\"></" + "script>\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/spine-player.css\">\n\n<div id=\"player-container\" style=\"width: 100%; height: 100vh;\"></div>\n\n<script>\nnew spine.SpinePlayer(\"player-container\", {\n jsonUrl: \"http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy-pro.json\",\n atlasUrl: \"http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy.atlas\"\n});\n</" + "script>".trim();
|
||||
spine.SpinePlayerEditor.DEFAULT_CODE = code;
|
||||
var player = new spine.SpinePlayerEditor(document.getElementById("editor"));
|
||||
var code =
|
||||
'<script src="https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/iife/spine-player.js"></' +
|
||||
'script>\n<link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/spine-player.css">\n\n<div id="player-container" style="width: 100%; height: 100vh;"></div>\n\n<script>\nnew spine.SpinePlayer("player-container", {\n jsonUrl: "http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy-pro.json",\n atlasUrl: "http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy.atlas"\n});\n</' +
|
||||
"script>".trim();
|
||||
spine.SpinePlayerEditor.DEFAULT_CODE = code;
|
||||
var player = new spine.SpinePlayerEditor(
|
||||
document.getElementById("editor")
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -6,18 +6,12 @@
|
||||
<script src="../dist/iife/spine-player.js"></script>
|
||||
<link rel="stylesheet" href="../css/spine-player.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../index.css" />
|
||||
</head>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: gray;
|
||||
margin: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div id="container" style="width:640px; height:380px"></div>
|
||||
<div id="container-raptor" style="width:640px; height:380px"></div>
|
||||
<body class="flex flex-col justify-center items-center">
|
||||
<div id="container" style="max-width:640px; aspect-ratio: 16/9"></div>
|
||||
<div id="container-raptor" style="max-width:640px; aspect-ratio: 16/9"></div>
|
||||
<div>
|
||||
<button id="walk">Walk</button>
|
||||
<button id="jump">Jump</button>
|
||||
|
||||
@ -90,7 +90,7 @@ body { margin: 0px; }
|
||||
private render (parent: HTMLElement) {
|
||||
let dom = /*html*/`
|
||||
<div style="display: flex; flex-direction: column; width: 100%; height: 100%;">
|
||||
<div style="width: 100%; height: 50%;"></div>
|
||||
<div style="width: 100%; height: 50%"></div>
|
||||
<iframe style="width: 100%; height: 50%; outline: none; border: none;"></iframe>
|
||||
</div>
|
||||
`;
|
||||
@ -112,6 +112,7 @@ body { margin: 0px; }
|
||||
this.startPlayer();
|
||||
});
|
||||
|
||||
codeElement.children[0].style.height = "100%";
|
||||
this.setCode(SpinePlayerEditor.DEFAULT_CODE);
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user