Updated owl to key blink animation properly.

This commit is contained in:
badlogic 2018-01-18 15:52:09 +01:00
parent 9aaf57959d
commit 18eec077e4
9 changed files with 116 additions and 70 deletions

File diff suppressed because one or more lines are too long

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -7,14 +7,25 @@
input, label { input, label {
display: block; display: block;
} }
#controls {
position: absolute;
}
#controls * {
position: relative;
top: 0;
left: 0;
}
</style> </style>
</head> </head>
<body> <body>
<canvas id="canvas" style="width: 640px; height: 480px;"></canvas> <canvas id="canvas" style="width: 640px; height: 480px;"></canvas>
<div id="controls">
<label>Up</label><input type="range" id="up" min="0" max="100" value="0"></input> <label>Up</label><input type="range" id="up" min="0" max="100" value="0"></input>
<label>Down</label><input type="range" id="down" min="0" max="100" value="0"></input> <label>Down</label><input type="range" id="down" min="0" max="100" value="0"></input>
<label>Left</label><input type="range" id="left" min="0" max="100" value="0"></input> <label>Left</label><input type="range" id="left" min="0" max="100" value="0"></input>
<label>Right</label><input type="range" id="right" min="0" max="100" value="0"></input> <label>Right</label><input type="range" id="right" min="0" max="100" value="0"></input>
</div>
</body> </body>
<script> <script>
var canvas = document.getElementById("canvas"); var canvas = document.getElementById("canvas");
@ -28,25 +39,25 @@
var skeleton, animationState; var skeleton, animationState;
var upEntry, downEntry, leftEntry, rightEntry; var upEntry, downEntry, leftEntry, rightEntry;
assetManager.loadTexture("deform_sample.png"); assetManager.loadTexture("owl.png");
assetManager.loadText("deform_sample.atlas"); assetManager.loadText("owl.atlas");
assetManager.loadText("deform_sample.json"); assetManager.loadText("owl-pro.json");
function load () { function load () {
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("deform_sample.atlas"), function(path) { var atlas = new spine.TextureAtlas(assetManager.get("owl.atlas"), function(path) {
return assetManager.get(path); return assetManager.get(path);
}); });
var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
skeletonJson.scale = 0.5; skeletonJson.scale = 0.5;
var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get("deform_sample.json"))); var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get("owl-pro.json")));
skeleton = new spine.Skeleton(skeletonData); skeleton = new spine.Skeleton(skeletonData);
var animationStateData = new spine.AnimationStateData(skeletonData); var animationStateData = new spine.AnimationStateData(skeletonData);
animationStateData.defaultMix = 0.3; animationStateData.defaultMix = 0.3;
animationState = new spine.AnimationState(animationStateData); animationState = new spine.AnimationState(animationStateData);
animationState.setAnimation(0, "breath", true); animationState.setAnimation(0, "blink", true);
upEntry = animationState.setAnimation(1, "up", true); upEntry = animationState.setAnimation(1, "up", true);
upEntry.alpha = 0; upEntry.alpha = 0;
upEntry.mixBlend = spine.MixBlend.add; upEntry.mixBlend = spine.MixBlend.add;