Skip to content

Commit

Permalink
[haxe][flixel] Add same example of starling to Flixel.
Browse files Browse the repository at this point in the history
  • Loading branch information
davidetan committed Jul 19, 2024
1 parent 2826b64 commit a2f82a2
Show file tree
Hide file tree
Showing 11 changed files with 349 additions and 131 deletions.
5 changes: 3 additions & 2 deletions spine-haxe/example/src/Main.hx
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,9 @@

package;

import starlingExample.BasicExample;
import starlingExample.Scene.SceneManager;
import flixelExamples.FlixelState;
import starlingExamples.BasicExample;
import starlingExamples.Scene.SceneManager;
import starling.core.Starling;
import flixel.FlxG;
import flixel.FlxGame;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,10 @@ class AnimationBoundExample extends FlxState {
var loadBinary = true;

override public function create():Void {
var button = new FlxButton(0, 0, "Next scene", () -> FlxG.switchState(new CloudPotExample()));
var button = new FlxButton(0, 0, "Next scene", () -> {
FlxG.debugger.drawDebug = false;
FlxG.switchState(new ControlBonesExample());
});
button.setPosition(FlxG.width * .75, FlxG.height / 10);
add(button);

Expand Down
69 changes: 0 additions & 69 deletions spine-haxe/example/src/flixelExamples/BugExample.hx

This file was deleted.

40 changes: 39 additions & 1 deletion spine-haxe/example/src/flixelExamples/CelestialCircusExample.hx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
package flixelExamples;


import flixel.text.FlxText;
import flixel.math.FlxPoint;
import spine.Skin;
import flixel.ui.FlxButton;
import flixel.FlxG;
Expand All @@ -15,6 +17,7 @@ import spine.atlas.TextureAtlas;
class CelestialCircusExample extends FlxState {
var loadBinary = true;

var skeletonSprite:SkeletonSprite;
override public function create():Void {
var button = new FlxButton(0, 0, "Next scene", () -> FlxG.switchState(new SnowglobeExample()));
button.setPosition(FlxG.width * .75, FlxG.height / 10);
Expand All @@ -25,11 +28,46 @@ class CelestialCircusExample extends FlxState {
var animationStateData = new AnimationStateData(data);
animationStateData.defaultMix = 0.25;

var skeletonSprite = new SkeletonSprite(data, animationStateData);
skeletonSprite = new SkeletonSprite(data, animationStateData);
skeletonSprite.screenCenter();
skeletonSprite.state.setAnimationByName(0, "eyeblink-long", true);
add(skeletonSprite);

add(new FlxText(50, 50, 200, "Drag Celeste to move her around", 16));

super.create();
}

var mousePosition = FlxPoint.get();
var dragging:Bool = false;
var lastX:Float = 0;
var lastY:Float = 0;
override public function update(elapsed:Float):Void
{
super.update(elapsed);

mousePosition = FlxG.mouse.getPosition();

if (FlxG.mouse.justPressed && skeletonSprite.overlapsPoint(mousePosition))
{
dragging = true;
lastX = mousePosition.x;
lastY = mousePosition.y;
}

if (FlxG.mouse.justReleased) dragging = false;

if (dragging)
{
skeletonSprite.x += mousePosition.x - lastX;
skeletonSprite.y += mousePosition.y - lastY;
skeletonSprite.skeleton.physicsTranslate(
mousePosition.x - lastX,
mousePosition.y - lastY,
);
lastX = mousePosition.x;
lastY = mousePosition.y;
}

}
}
106 changes: 106 additions & 0 deletions spine-haxe/example/src/flixelExamples/ControlBonesExample.hx
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
package flixelExamples;


import flixel.util.FlxSave;
import flixel.math.FlxPoint;
import flixel.util.FlxColor;
import flixel.util.FlxSpriteUtil;
import flixel.FlxSprite;
import flixel.ui.FlxButton;
import flixel.FlxG;
import spine.flixel.SkeletonSprite;
import spine.flixel.FlixelTextureLoader;
import flixel.FlxState;
import openfl.utils.Assets;
import spine.SkeletonData;
import spine.animation.AnimationStateData;
import spine.atlas.TextureAtlas;

class ControlBonesExample extends FlxState {
var loadBinary = true;

private var controlBones = [];
private var controls:Array<FlxSprite> = [];
override public function create():Void {
var button = new FlxButton(0, 0, "Next scene", () -> FlxG.switchState(new EventsExample()));
button.setPosition(FlxG.width * .75, FlxG.height / 10);
add(button);

var atlas = new TextureAtlas(Assets.getText("assets/stretchyman.atlas"), new FlixelTextureLoader("assets/stretchyman.atlas"));
var data = SkeletonData.from(loadBinary ? Assets.getBytes("assets/stretchyman-pro.skel") : Assets.getText("assets/stretchyman-pro.json"), atlas);
var animationStateData = new AnimationStateData(data);
animationStateData.defaultMix = 0.25;

var skeletonSprite = new SkeletonSprite(data, animationStateData);
skeletonSprite.scaleX = .5;
skeletonSprite.scaleY = .5;
var animation = skeletonSprite.state.setAnimationByName(0, "idle", true).animation;
skeletonSprite.setBoundingBox(animation);
skeletonSprite.screenCenter();
add(skeletonSprite);

var controlBoneNames = [
"back-arm-ik-target",
"back-leg-ik-target",
"front-arm-ik-target",
"front-leg-ik-target",
];

var radius = 6;
for (boneName in controlBoneNames) {
var bone = skeletonSprite.skeleton.findBone(boneName);
var point = [bone.worldX, bone.worldY];
skeletonSprite.skeletonToHaxeWorldCoordinates(point);
var control = new FlxSprite();
control.makeGraphic(radius * 2, radius * 2, FlxColor.TRANSPARENT, true);
FlxSpriteUtil.drawCircle(control, radius, radius, radius, 0xffff00ff);
control.setPosition(point[0] - radius, point[1] - radius);
controlBones.push(bone);
controls.push(control);
add(control);
}

var point = [.0, .0];
skeletonSprite.beforeUpdateWorldTransforms = function (go) {
for (i in 0...controls.length) {
var bone = controlBones[i];
var control = controls[i];
point[0] = control.x + radius;
point[1] = control.y + radius;
go.haxeWorldCoordinatesToBone(point, bone);
bone.x = point[0];
bone.y = point[1];
}
};

super.create();
}

var mousePosition = FlxPoint.get();
var offsetX:Float = 0;
var offsetY:Float = 0;
var sprite:FlxSprite;
override public function update(elapsed:Float):Void
{
super.update(elapsed);

mousePosition = FlxG.mouse.getPosition();

for (control in controls) {
if (FlxG.mouse.justPressed && control.overlapsPoint(mousePosition))
{
sprite = control;
offsetX = mousePosition.x - sprite.x;
offsetY = mousePosition.y - sprite.y;
}
}

if (FlxG.mouse.justReleased) sprite = null;

if (sprite != null)
{
sprite.x = mousePosition.x - offsetX;
sprite.y = mousePosition.y - offsetY;
}
}
}
75 changes: 75 additions & 0 deletions spine-haxe/example/src/flixelExamples/EventsExample.hx
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
package flixelExamples;


import flixel.text.FlxText;
import flixel.ui.FlxButton;
import flixel.FlxG;
import flixel.group.FlxSpriteGroup;
import spine.flixel.SkeletonSprite;
import spine.flixel.FlixelTextureLoader;
import flixel.FlxState;
import openfl.utils.Assets;
import spine.SkeletonData;
import spine.animation.AnimationStateData;
import spine.atlas.TextureAtlas;

class EventsExample extends FlxState {
var loadBinary = true;

override public function create():Void {
var button = new FlxButton(0, 0, "Next scene", () -> FlxG.switchState(new FlixelState()));
button.setPosition(FlxG.width * .75, FlxG.height / 10);
add(button);

var atlas = new TextureAtlas(Assets.getText("assets/spineboy.atlas"), new FlixelTextureLoader("assets/spineboy.atlas"));
var data = SkeletonData.from(loadBinary ? Assets.getBytes("assets/spineboy-pro.skel") : Assets.getText("assets/spineboy-pro.json"), atlas, .25);
var animationStateData = new AnimationStateData(data);
animationStateData.defaultMix = 0.25;

var skeletonSprite = new SkeletonSprite(data, animationStateData);

// add callback to the AnimationState
skeletonSprite.state.onStart.add(entry -> log('Started animation ${entry.animation.name}'));
skeletonSprite.state.onInterrupt.add(entry -> log('Interrupted animation ${entry.animation.name}'));
skeletonSprite.state.onEnd.add(entry -> log('Ended animation ${entry.animation.name}'));
skeletonSprite.state.onDispose.add(entry -> log('Disposed animation ${entry.animation.name}'));
skeletonSprite.state.onComplete.add(entry -> log('Completed animation ${entry.animation.name}'));

skeletonSprite.state.setAnimationByName(0, "walk", true);

var trackEntry = skeletonSprite.state.addAnimationByName(0, "run", true, 3);
skeletonSprite.setBoundingBox(trackEntry.animation);

skeletonSprite.setBoundingBox();
skeletonSprite.screenCenter();
skeletonSprite.skeleton.setBonesToSetupPose();
add(skeletonSprite);

trackEntry.onEvent.add(
(entry, event) -> log('Custom event for ${entry.animation.name}: ${event.data.name}'));


add(textContainer);
super.create();
}

private var textContainer = new FlxSpriteGroup();
private var logs = new Array<FlxText>();
private var logsNumber = 0;
private var yOffset = 12;
private function log(text:String) {
var length = logs.length;
var newLog = new FlxText(250, 30, text);
newLog.x = 50;
newLog.y = 20 + yOffset * logsNumber++;
newLog.color = 0xffffffff;
textContainer.add(newLog);
if (logs.length < 35) {
logs.push(newLog);
} else {
logs.shift().destroy();
logs.push(newLog);
textContainer.y -= yOffset;
}
}
}
11 changes: 10 additions & 1 deletion spine-haxe/example/src/flixelExamples/FlixelState.hx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ class FlixelState extends FlxState

override public function create():Void
{
// FlxG.switchState(new AnimationBoundExample());
// FlxG.switchState(new EventsExample());
// FlxG.switchState(new ControlBonesExample());
// FlxG.switchState(new MixAndMatchExample());
// FlxG.switchState(new SequenceExample());
// FlxG.switchState(new BasicExample());
Expand Down Expand Up @@ -65,6 +66,14 @@ class FlixelState extends FlxState
floor.y = FlxG.height - 100;
add(floor);

// instructions
var groupInstructions = new FlxSpriteGroup();
groupInstructions.setPosition(50, 405);
groupInstructions.add(new FlxText(0, 0, 200, "Left/Right - Move", 16));
groupInstructions.add(new FlxText(0, 25, 150, "Space - Jump", 16));
groupInstructions.add(new FlxText(200, 25, 400, "Click the button for the next example", 16));
add(groupInstructions);

// loading spineboy
var atlas = new TextureAtlas(Assets.getText("assets/spineboy.atlas"), new FlixelTextureLoader("assets/spineboy.atlas"));
var skeletondata = SkeletonData.from(Assets.getText("assets/spineboy-pro.json"), atlas, 1/scale);
Expand Down
Loading

0 comments on commit a2f82a2

Please sign in to comment.