Right here in Stockholm it has been unusually sizzling and dry for this season of the 12 months and I am fairly satisfied that the pharmacies have damaged a brand new document in anti-histamine gross sales. Final evening we had been lastly blessed with thunder and rain and right this moment the air is cool and good and the pollen gone.
I’ve sneezed rather a lot the final couple of weeks however I’ve additionally executed some coding. My major focus has been constructing an animation framework to be used in intro, cutscenes and background actions and coding an editor for animating sprites. Ester (Eraserhead animation editor) would be the topic of an upcoming dev log and this dev log will probably be in regards to the animation framework.
That is an animation demo and never a part of the sport
Animation framework
The aim of the animation framework is to ease organising and working sequences of a number of animations. The necessity for this arose with my want to create an animated intro with objects shifting in numerous patterns. However I may even use this framework for pre- and post-fight-animations in addition to background animations.
When completed the animation framework will include:
* Assist for spritesheet-based animations
* Builders for organising animations by code
* Easy script-language for organising scenes
* Loader and parser for script-files
Along with this, I’ll in all probability construct an editor to make use of with the script-language for making an attempt out and previewing animations.
The film analogy
When designing and naming the constructing blocks of the framework I’ve taken a “film scene”-approach and used a nomenclature present in film scripts. That gave me following essential courses:
* Scene
* Actor
* Motion
* Animation
“Animation” may not be a reputation recognized from film scripts, however I stored the identify to encourage its use outdoors of the “animated scene” context. So long as you retain observe of calling the update- and draw-methods each actors and animations can be utilized with no scene.
Simplified diagram describing the relationships between the courses
Scene
Consider a scene simply the like a scene in a film or a theater. It is a “room” the place one thing takes place. A scene can have a reputation, background picture and any variety of actors. You draw it on the display screen by calling its Draw-method.
Background for our demo
Actor
In contrast to in a film or theater, an actor shouldn’t be solely characters however all issues residing or useless that has it is personal picture and is separate from the background e.g. character, bullets flying, rising solar.
An actor has a location, it may be seen or hidden, and has a group of actions to carry out that may be looped when executed. An actor additionally has an animation because it’s present “gesture”.
Motion
Identical to within the motion pictures, an motion is one thing an actor does, i.e. an actor will act based on its actions.
A number of the out there actions are:
* Present – draw animation
* Disguise – do not draw animation
* SetPosition – set place of actor
* BasicMove – transfer actor to vacation spot with given velocity and acceleration
* ChangeGesture – change animation
Animation
An animation is predicated on a spritesheet, begin index within the sheet and a body depend. This determines how the actor will seem on the display screen.
A be aware on naming. The property for the animation is called Gesture within the Actor-class, that could be a selection I made to maintain the film analogy constant. I’ve named the category Animation to encourage use of it outdoors of the “animated scene”-context.
Our well-known actor doing one in all it is gestures
Find out how to
To create the scene within the demo above following steps should be made:
1. Load content material
2. Create an animation sheet configuration
3. Create an animation manufacturing unit
4. Create an actor
5. Create the scene
6. Begin the scene
7. Draw scene
Step 1 – 5 can all be executed within the Initialize-method of the Recreation-class.
Step 1 – Load content material
As a primary step we load background- and spritesheet-images as textures.
var background = Content material.Load(“Animation_demo_background”);
var texture = Content material.Load(“Animation_demo_spritesheet”);
Our demo spritesheet
Step 2 – Create animation sheet configuration
Then we create a configuration describing animations discovered within the spritesheet. This object will later be used as argument to our animation manufacturing unit.
var sheetConf =
AnimSheetConfigBuilder
.Start()
.Title(“Samurai gestures”)
.GridSize(new Level(13, 4))
.SpriteSize(new Level(160, 160))
.DefaultFrameDuration(150)
.AddAnimation(“Idle”, new Level(0, 0), 6)
.AddAnimation(“Bow”, new Level(0, 3), 11)
.AddAnimation(“Draw”, new Level(0, 2), 13)
.AddAnimation(“Stroll wo sword”, new Level(0, 1), 8)
.AddAnimation(“Stroll w sword”, new Level(0, 4), 8)
.Construct();
We create a configuration describing a spritesheet with a measurement of 13 columns and Four rows the place every sprite has a measurement of 160 x 160 pixels. The spritesheet known as “Samurai gestures” and default body length for all animations on this sheet is 150 milliseconds. It incorporates 4 totally different animations. Notice that each one names have to be distinctive.
Step 3 – Create animation manufacturing unit
When the sheet config is prepared this step is straightforward. Name the AnimationFactory-constructor passing within the spritesheet texture and the sheet configuration. Our manufacturing unit is prepared.
var animFactory = new AnimationFactory(texture, sheetConf);
Step 4 – Create actor
Simply because it takes a while for an actor to organize for a giant film position, it takes some coding for us to arrange the actor for our scene.
var actor =
ActorBuilder
.Start(animFactory)
.Actions(
actionBuilder =>
{
return
actionBuilder
.Disguise()
.SetPosition(new Level(-120, -4))
.ChangeAnimation(“Stroll wo sword”)
.LoopAnimation()
.Present()
.Transfer(new Level(-60, -4), 0.1f, 0.0f)
.ChangeAnimation(“Bow”)
.WaitForAnimation()
.ChangeAnimation(“Stroll wo sword”)
.LoopAnimation()
.Transfer(new Level(110, -4), 0.1f, 0.0f)
.ChangeAnimation(“Draw”)
.WaitForAnimation()
.ChangeAnimation(“Idle”)
.WaitForAnimation()
.ChangeAnimation(“Stroll w sword”)
.LoopAnimation()
.Transfer(new Level(312, -4), 0.1f, 0.0f)
.Construct();
})
.Construct();
actor.Loop = true;
Right here we use the ActorBuilder together with the ActionBuilder to create the actor and the gathering of actions to carry out. All these actions will probably be carried out in sequence and when executed the actions will, due to the “actor.Loop = true;” assertion, be restarted.
Step 5 – Create scene
As a final constructing step we tie the whole lot collectively by creating our scene, and for this, we even have a devoted builder.
_scene =
SceneBuilder
.CreateScene(animFactory)
.Title(“Demo”)
.Background(background)
.AddActor(actor)
.Construct();
Our scene is now prepared.
Step 6 – Begin scene
If you happen to run the venture you may discover that nothing occurs. That is as a result of we’ve not included the scene within the sport loop but.
Add following traces to the Replace-method:
if (_scene.State == State.NotStarted)
_scene.Begin();
_scene.Replace(gameTime);
Step 7 – Draw scene
Nonetheless, nothing occurs. It is as a result of we’re nonetheless not drawing the scene. And following line to the Draw-method:
_scene.Draw(_spriteBatch, Vector2.Zero);
Run the venture and luxuriate in!
The longer term
You are as at all times greater than welcome to obtain the code and use it in any manner you want, however because it’s nonetheless early days please regard it extra as inspiration than a working framework. I am positive there are many bugs. And adjustments will come.
If not discouraged, go to my BitBucket-account and get going, or look forward to an announcement of a extra secure model.
Please go to Eraserhead Studio https://www.eraserheadstudio.com/ for extra.
Glad coding!
/jan.
NOTE. As at all times, the whole lot I publish right here or on some other website is figure in progress and topic to alter.