Novice question, how does Starling display images? How to make animation? Do you have a demo to take a look at? Is there a tutorial suitable for beginners?

Haxe
1

Novice question, how does Starling display images? How to make animation? Do you have a demo to take a look at? Is there a tutorial suitable for beginners?

2

Starling beginners don’t know how to display images? How to make animation?

3

A friend sent me a link to enter the chat room, but I couldn’t get in due to network errors. The internet is suitable for bypassing the wall, but unfortunately I don’t know how to do it, so I can only post and communicate on the forum

4

Here is a quick example of how I am loading an image into my project:
In my Game class file Game.hx:

class Game extends Sprite {
	public static var assets:AssetManager = new AssetManager();
        ...
}

Game.assets.enqueue(["assets/backgrounds/map.png"]);
...
Game.assets.loadQueue(function(ratio:Float) {
            if (ratio == 1.0) {
                  trace("All assets loaded!");
            }
            });

elsewhere in my level class:

import starling.display.Image;

class level extends Sprite {
public function new() {
		super();

		mapImage = new Image(Game.assets.getTexture('map'));

		addChild(mapImage);

}

I hope this helps.

5

A demo project with a still image and animation. It uses three assets you can download and put in assets/img/ (these are downloaded from the Starling repository):

project.xml :

<?xml version="1.0" encoding="utf-8"?>
<project>
	<meta title="Example" package="" version="1.0.0" company="Company Name" />
	<app main="Main" path="bin" file="Example" />

	<window background="#000000" fps="60" />
	<window width="320" height="480" />
	
	<source path="src" />
	
	<haxelib name="openfl" />
	<haxelib name="starling" />
	
	<assets path="assets/img" rename="img" />
</project>

The src/ folder contains two files.

Main.hx where Starling is initialised:

package;

import openfl.display.Sprite;
import starling.core.Starling;

class Main extends Sprite
{

	public function new()
	{
		super();

		var starling:Starling = new Starling(ViewRoot, this.stage, null, null, "auto", "auto");
		starling.start();
	}
}

And ViewRoot.hx which represents my Starling context (and the root of my real project).

package;

import openfl.Assets;
import starling.core.Starling;
import starling.display.Image;
import starling.display.MovieClip;
import starling.display.Sprite;
import starling.textures.Texture;
import starling.textures.TextureAtlas;
import starling.utils.AssetManager;

class ViewRoot extends Sprite {

	private static var assetManager:AssetManager;

	public function new()
	{
		super();

		// STILL IMAGE
		var image:Image = new Image(Texture.fromData(Assets.getBitmapData("img/background.jpg")));
		addChild(image);

		// ANIMATION
		assetManager = new AssetManager();
		assetManager.addTextureAtlas("img/atlas.png", new TextureAtlas(Texture.fromData(Assets.getBitmapData("img/atlas.png")), Xml.parse(Assets.getText("img/atlas.xml"))));

		var animation:MovieClip = new MovieClip(assetManager.getTextures("flight"), 30);
		addChild(animation);
		Starling.current.juggler.add(animation);
	}
}

To test it with HashLink, which is a great option for testing code with:

openfl test hl

output

6

The thing that might feel a bit strange, is the need to create a context for Starling, as I did in Main.hx:

var starling:Starling = new Starling(ViewRoot, this.stage, null, null, "auto", "auto");
starling.start();

Within that Starling context (ViewRoot), this is a Starling world. You need to lean on Starling’s way of doing things, because you’re working closely with the GPU. That means in many cases you must use the Starling versions of things when they’re available, instead of the OpenFL version (MovieClips and Sprites for example).

BitmapData in OpenFL, is comparable to a Texture in Starling.
A Bitmap in OpenFL is comparable to an Image in Starling.
A Sprite in OpenFL is actually similar to a Sprite in Starling :wink:
A MovieClip in OpenFL (a Sprite with a timeline)… is rather different to a MovieClip in Starling (a sequence of Textures).

The Starling Juggler is used to tick things along. You place MovieClips in the Juggler if they’re to animate (as shown in the example). The Juggler can also manage timers and tweens.

7

Thank you to the kind-hearted person

8

May I ask what software was used to export the atlas.xml above?

9

I’m not sure what was used in that particular case, as these are just from the Starling demo, and were probably created for use in AS3 years ago by Daniel Sperl, the original creator of Starling.

Don’t worry though, because creating it again is certainly possible. I use TexturePacker 6.0.1 (the last version to support the ATF format), which I provided details to here:

I’ve been using this for years, with a lifetime license. I haven’t explored options (haven’t needed to), but there may be other alternatives now.

10

I can’t use it. TexturePacker is a paid software that does not purchase exported images with watermarks

11

Perhaps have a look at these free and open source options:

1 Like