Working with images

🐼 Show image from assetpack

To show an image, you need a ImageSprite or PatternSprite and a Texture. You can get textures out of an assetpack. You don't need to mention a file-extension, Flambe will find out for you. That makes swapping from jpg to png very easy. Maximum size for images is 1024x1024, otherwise you can get performance issues! If you need bigger images, break them into pieces.

var myImage = new ImageSprite(pack.getTexture("myImage"));
System.root.addChild(new Entity.add(myImage)); // add on top of stage

Looking for a demo project with images? See https://github.com/aduros/flambe-demos/tree/master/dragging

Load/show external images

To show an external image, you need to create a Manifest, add the urls to it and load the manifest using System.loadAssetPack. You need to define a unique identifier to get it back out of the manifest after loading.

var manifest = new Manifest();
  manifest.add("logo", "https://raw.github.com/aduros/flambe/master/command/data/scaffold/icons/72x72.png");
  
  manifest.add("facebookPhoto", "https://scontent-b-ams.xx.fbcdn.net/hphotos-frc3/t1.0-9/285202_1883439129273_2053121_n.jpg"); 
  
  System.loadAssetPack(manifest).get(function (pack) 
  {
	var myLogo = new ImageSprite(pack.getTexture("logo"));
	var myProfilePicture = new ImageSprite(pack.getTexture("facebookPhoto"));
        myProfilePicture.x._ = 200; // move picture to the left
	System.root.addChild(new Entity().add(myLogo)); // add logo on top of stage
	System.root.addChild(new Entity().add(myProfilePicture)); // add profile picture on top of stage
  });

More information on loading (external) assets and assetpacks, read Working with assets.

Get the image dimensions

This returns the original unscaled width/height of the Sprite.

var myLogo = new ImageSprite(pack.getTexture("logo"));
trace( myLogo.getNaturalWidth() );  // width
trace( myLogo.getNaturalHeight() ); // height

Rotate, position, scale, alpha

myLogo.setXY(100,400); // move to x:100,y:400
myLogo.setScale(0.5); // half size. 
myLogo.rotation._ = 180; // in degrees, rotate half circle
myLogo.alpha._ = .5; // half transparent

Note; you can only alter the scale of images, not set the width/height in a way. If you want to set the width of a 400x300 image to 600, then you could use this:

myLogo.scaleX._ = 1 / 400 * 600; // 1.5
myLogo.scaleY._ = myLogo.scaleX._; // scale uniform

Restrictions

Maximum size for images is 1024x1024, otherwise you can get performance issues! If you need bigger images, split them into tiles/peaces.

WebP and JPEG-XR

WebP and JPEG-XR images, that are conditionally loaded on platforms that support them, similar to audio. In practice, Chrome supports WebP, IE9 and Flash support JPEG-XR. Just add it to your assetpack, Flambe will try to pick it up.

Optimizing images

The smaller the better. http://tinypng.org/ or http://www.smushit.com/