Citrusengine Series Tutorial Four: Citrus 2D animations and Cameras

Author: CLS Sharing station
This time we'll talk about Citrusengine's 2D animations and cameras. About animation, basically support Starling can be used in citrusengine, but Citrusengine simplifies the operation steps. Here I'll show you three ways to create a citrus 2D animation
Animate a bitmap sequence of sprite sheet using a SWF animation to create a skeletal animation through the keel (Dragon Bones) (= "Official Chinese Course")
Before we started, we also used COMPONENTS.FLA to set the layout for our level, but also set the box2d of the rigid body position and scope (this time I named Level2.fla), but this time to make the camera useful, we set the scene larger (1500 * 768):
Gray is the platform (Platform), yellow is the coin (coin), Blue is the hero (hero), Red is the Enemy (Enemy)
http://www.chenlinsheng.com/?p=463
Here we first set the default range of activity for enemy (the enemy will walk back and forth in the range of Leftbound, rightbound settings by default until an obstacle is encountered, such as platform)
http://www.chenlinsheng.com/?p=463
Now let's start with the role creation animation:
1. Using SWF animations This is the simplest way to create an animation, which is to view the SWF as a game element. If we can animate coin like this
1) Create a coin.fla, create a movie clip symbol Coin_anim, make a simple frame animation
http://www.chenlinsheng.com/?p=463
2) Pull the component into the stage and set its size to 50*50, which is consistent with the coin size set by the LEVEL2.FLA. As for the other, such as coordinates and COIN.FLA of the stage size and background color, etc., can be arbitrarily set
3) finally fill in the coin.swf path on the coin view in Level2.fla, and remember that the path is relative to the flex project. Ah, is not the same as the previous tutorial set the hero's view when the same ~
http://www.chenlinsheng.com/?p=463
2. Using the sprite sheet bitmap sequence to build animation in Starling generally use the sprite sheet bitmap sequence to build animation, in fact, in my series of tutorial two is to use this method to add animation to the hero, but at that time I did not say if the flash CS creates bitmaps and XML. Now let's see how to create a sprite sheet bitmap for our hero (Hero) via Flash CS.
A. First, we need to know that hero has the following kinds of animations: walking (walk), Death (Die), jumping (jump), injury (hurt), idle (Idle), Dodge (duck), etc., and what we need to do is create the appropriate movie clips for these animations as library components, Of course we can create the necessary animations as needed, as this tutorial only creates walk,idle,jump. Screenshot of the following library component jump (jumping):
http://www.chenlinsheng.com/?p=463
Note: You need to create a new layer tag that marks a "jump" in the first frame.
B. After creating the relevant animation, we can select and right-click on the gallery file to export the sprite Sheet
http://www.chenlinsheng.com/?p=463
Here are the parameter settings when I export:
http://www.chenlinsheng.com/?p=463
In this way we get a sprite sheet bitmap sequence and XML file, which we can then embed using embed: http://www.chenlinsheng.com/?p=463 <subtexture name= " idle0000 "x=" 0 "y=" 0 "width=" "height=" 0 "framex=" 0 "framey=" "" Framewidth= "frameheight="
< subtexture name= "idle0001" x= "0" y= "0" width= "All" height= "" "framex=" 0 "framey=" "framewidth=" frameheight= " "/>
< subtexture name= "idle0002" x= "0" y= "width=" 0 "height=" 0 "framex=" "" Framey= "" "" "Framewidth=" (frameheight= ") "/> Copy Code
So the next step is to use the same method as the series tutorial two [Embed (source=). /.. /levels/hero.png ")]
private Var Heroanimbitmap:class;
[Embed (source= "/. /levels/hero.xml ", mimetype=" Application/octet-stream ")]
private Var Heroanimxml:class;

var ta:textureatlas=new textureatlas (
Texture.frombitmap (New Heroanimbitmap ()), XML (New Heroanimxml ()));
var animationseq:animationsequence=new animationsequence (Ta,
["Walk", "idle", "Jump"], "idle", 24);
Hero.view=animationseq; Copy Code 3. Create skeletal animations through the keel (Dragon Bones) (= "Official Chinese course") Dragonbones is an open source 2D Skeleton animation framework and tool that contains flash-based Pro's skeletal animation editing panel Dragonbonesdesignpanel and skeletal animation ActionScript framework. It allows developers to quickly create 2D skeletal animations using familiar flash pro elements and timeline edits, and apply them to flash or other technology applications. Features
Animation is based on the Flash Pro timeline, you can use flash traditional animation to make the game animation, bone binding can make the animation more accurate, more real and natural, and can be controlled dynamically by the program, you can set the animation time scale of individual bones and delay playback, using fewer keyframes can be used to express complex animation effects Animation parts of the use of stitching, animation has an easing tween, occupy less bitmap/memory resources; Skeleton display objects are logically separated from the skeleton and can be changed dynamically without affecting animation playback, and can be easily used in 2D applications for traditional displaylist, Starling and other technologies.
First we need to download the keel and install the Flash Pro extension. It is important to note that this plugin only supports Flash Pro 5.5 or later. Installation method: Open Flash cs-"help =" Management Extension = "install =" Select "Dragonbonesdesignpanel.zxp" in the download package to install the installation, we can go through the window > other panels > Dragonbonesdesignpanel Open the Bone animation editing panel. Now we need to combine our just three component animations into one (I'll name it "Allanimations"), and of course we'll use labels to differentiate them. (This time does not need to be tweened animation, you can choose to delete the tween or retention, the thing on the use of the keel when we only need to set the keyframe side-by-side good location on the line) and then we select this component (Allanimations) in the library, open the Bone Edit Panel import to import the selected library symbol: HTTP ://www.chenlinsheng.com/?p=463 This time you can make the animation smoother by setting up the skeleton's affiliation such as Bone tree (bone), or you can export it directly, and we select "PNG (contains XML)" when exporting. Finally we get a PNG image containing XML information http://www.chenlinsheng.com/?p=463 finally used the keel animation in Flex: [Embed (source= "). /.. /levels/hero_output.png ", mimetype=" Application/octet-stream ")]
private Var Heroanimbitmapandxml:class;

/*armature: We can think of it as a container that corresponds to a moiveclip that is edited in Flash Pro and exported through the Bones panel.
Through the armature to manage the skeleton, play animation and so on. */
var armature:armature;
/* Based on Starling Factory, which is the basis for building skeletal animations. It is responsible for parsing data formats from resources exported from the previous bone panel
and prepares the image resource, and creates the skeleton container armature through it. */
var factory:starlingfactory=new starlingfactory ();
Factory.addeventlistener (Event.complete,function (event:event): void{
Armature=factory.buildarmature ("Allanimations");
armature.animation.timescale=0.7;
Hero.view=armature;
Hero.offsetx = 35;
Hero.offsety = 35;
});
Factory.parsedata (New Heroanimbitmapandxml ()); Copy the code Finally, let's look at how to set up the camera: citrusengine, we can access the camera via View.camera through its setup (target:object=null,offset:mathvector=null , Bounds:rectangle=null,
Easing:mathvector=null, Cameralens:mathvector=null): Acitruscamera quickly sets the relevant properties of the camera. The following is an introduction to the method parameters: target: The camera's goal, as set to hero, the camera will move with the movement of the hero offset: Set the target motion, the upper-left corner of the target area, such as set it to Mathvector (0,0) and if your scene is large enough, You will find your target movement when there is no free distance to the left, that is, you run to the right, you can not see the object behind you, unless your right side of the display area has not been to the end ~ Bounds: Camera display area, this tutorial we set to level2.swf size Easing: the rate at which the camera follows the target at x and Y, the smaller the number, the slower the change, the maximum cannot exceed 1, and when set to 0, the camera will not move
Usage Example: var offset:mathvector = new Mathvector (STAGE.STAGEWIDTH/2,STAGE.STAGEHEIGHT/2);
var bounds:rectangle = new Rectangle (0, 0, 1500, 768);
var easing:mathvector = new Mathvector (0.25, 0.25);
View.camera.setUp (Hero, offset, bounds, easing); Copy code = "Original and source download