How does box2d or Nape work on my animation? Or how can I use it in one of my animations?
You need to add an openfl.text.TextField to Starling’s native overlay for input text.
Typically, Starling is able to recover automatically. However, there are some cases where it cannot, and you need to restore some textures manually.
See Starling Manual: Context Loss for details.
60 FPS is typically a good place to start when using Starling.
1 Like
.
starling
I use multiple movieclips to create animations, and the textures and data are exported from Adobe Animate
.
For example, I have several animations that I designed in this way: one moving clip in standby mode, one moving clip while walking, and one attacking moving clip
.
1 idle movieclip
2 move movieclip
3 attack movieclip
.
I will first instance three movieclips and then create a sprite. Only one movieclip can be played, and the sprite will only be inserted when the movieclip is played
.
Will this lead to frequent removal and addition of children? Will it consume a lot of performance? Is this design reasonable?
.
This largely depends on what you’re trying to accomplish.
My tendency is toward either pre-rendered sprite sequences (eg: characters) which are imported into Starling MovieClips, or programmed animation and effects (eg: effects, environment, etc), or a combination of the two. But that’s what suits the goals of my projects.
I’m not sure I understand your question, you might need to elaborate sorry.
Adding/removing, whilst not a bad approach, can potentially lead to garbage collection pressure. That’ll present as momentary pauses in the game.
Sometimes it’s more efficient to re-use / re-cycle, when the memory overhead isn’t prohibitive.
In your particular example, instead of adding/removing, you might simply remove the unwanted MovieClips from the Juggler (so they’re not animating), and set them to visible = false.
For example:
Starling.juggler.remove(attackMovieClip);
attackMovieClip.visible = false;
.
First of all, thank you for your reply. That is to say, when you are working on a project, how many animations will you run simultaneously on the same screen?
What is the maximum number of animations displayed on the same screen?
.
Regarding the animation production of “moveclip” mentioned above, do you mean setting the “visible” attribute directly instead of “addChild” and “removeChild”?
.
Will frequent operation of ‘addChild’ and ‘removeChild’ on ‘Sprite’ lead to performance degradation? I know you suggested setting “visible” above, but I seem to prefer using “addChild” and “removeChild” to switch animations. How can I design it reasonably?
.
As mentioned above, I will instantiated all the ‘moveclip’ and create a ‘Sprite’. Only the ‘moveclip’ that needs to be played will be placed in the ‘Sprite’, which means switching animations through ‘addChild’ and ‘removeChild’. That’s what I thought at first, so I wonder if this design is reasonable?
.
By the way, how do I use “winter” to modify the color tone of “moveclip” when using “starling”? I want the effect of “moveclip” dynamically producing color changes.
By the way, can ‘textField’ be set to ‘textureSmooth’? I couldn’t find this property?
If handled well, the upper limit is actually enormous. Just recently as a part of viability testing a current project, we successfully ran Starling with 61 ATF spritesheets at 8192x2048. Leveraging DXT hardware compression, GPU memory consumption was 968MB.
These spritesheets contained 540 individual sprites, that made up 8 different animations ranging between 34-111 frames each (0.5 - 2 seconds length).
The test continuously placed the animations on stage in random locations, with a random colour tint, at a rate of 10 new animations per second. Indefinetely.
The content server we tested this on is very modestly spec’d:
- CPU: Xeon Silver 4114 CPU @ 2.20GHz (single-core speed comparable to a 2014 Intel Core i3)
- Ram: 32Gb
- GFX: Nvidia Quadro P4000 (8GB) (roughly similar to a GTX 1060)
- OS: Win10 64bit
Yes, as one possible way of approaching it. But of course, if you prefer to addChild / removeChild that’s also fine. Depending on how you’re doing it, just be mindful of pressure on the garbage collector, or potential memory leaks (not correctly disposing), because that does have performance implications. The visible = true/false approach on frequently re-used assets is just one way of side-stepping those issues.
That’s a pretty big question, because it comes down to project design. It’s a pretty project specific, and personal thing, so I’d encourage you to find a way that works well with your style.
Testing and monitoring resources and performance will prove whether your implementation is reasonable or not. I believe if handled correclty, it should be a reasonable approach.
Try:
movieclip.color = 0xff0000; // red
If scaling a bitmap font to sizes other than its native, interpolation can be a bit rough. You might want to explore using Distance Field text which addresses this shortcoming of bitmap fonts:
.
I set the color tone using ‘Tween’, but I want to set the color tone to 50% instead of 100%. What should I do? Also, what if you want to restore the color tone to its original state? thank you.
.
var tween:Tween = new Tween(img, 1);
tween.animate(“color”, 0xff0000);
Starling.juggler.add(tween);
.
Maybe something like this?
import starling.filters.ColorMatrixFilter;
var filter = new ColorMatrixFilter();
filter.tint(0xFF0000, 0.5); // 50% red tint
movieClip.filter = filter;
The tint here is similar to what can be done in Adobe Animate.
There’s some API details here (using AS3 syntax):
To remove that filter, I think this might do the trick?
movieClip.filter = null;
You can set it directly, it’s possible.
I want to achieve the effect of “tween” to make up for the gap?
Might you tween filter.tint?
For example:
(NOTE: This code has errors, and has been corrected below)
var filter = new ColorMatrixFilter();
movieClip.filter = filter;
// The object being tweened (simply holds a value)
var tintObject = { value: 0.0 };
// Use Starling's tween to tween the value held in tintObject, from 0 to 1 over 1.5 seconds.
// Then on update, it runs the filter.tint() method with the updated value.
Starling.juggler.tween(tintObject, 1.5, {
value: 1.0,
onUpdate: function() {
filter.tint(0xFF0000, tintObject.value);
}
});
Did you make a mistake? It turned black.
.
When using ‘as3’, I implemented ‘TweenMax. to (mc, 2, {colorTransform: {color: 0xff0000, tintAmount: 0.5}})’ in this way, and I want to achieve this effect in ‘starling’
.
TweenMax.to(mc,2,{colorTransform:{color:0xff0000,tintAmount:0.5}});
.
It’s possible I did. I didn’t test this code (I had a moment spare time only). I’ll see if I can find where I went wrong.
Yup, there were a couple of issues with that code, sorry about that.
Main issues were giving filter the name var filter, which conflicted with this DisplayObject’s own filter property. So renaming it to myFilter fixes that.
The other issue was how I referenced the Starling juggler. In the OpenFL version of Starling, we must use Starling.current.juggler, to correctly reference it.
I’ve successfully tested this now:
var myFilter = new ColorMatrixFilter();
movieClip.filter = myFilter;
var tintObject = { value: 0.0 };
Starling.current.juggler.tween(tintObject, 1.5, {
value: 1.0,
onUpdate: function() {
myFilter.tint(0xFF0000, tintObject.value);
}
});
.
Using the code you provided, the image turned black.
.
.
var myFilter = new ColorMatrixFilter();
movieClip.filter = myFilter;
var tintObject = { value: 0.0 };
Starling.current.juggler.tween(tintObject, 1.5, {
value: 1.0,
onUpdate: function() {
myFilter.tint(0xFF0000, tintObject.value);
}
});
.
Hmm… the issue is the effect is cumulative. It’s not setting the value, it’s adding to it. I’m not sure that’s how it’s supposed to behave 
Give this a go, I’ve added myFilter.reset();.
var myFilter = new ColorMatrixFilter();
movieClip.filter = myFilter;
var tintObject = { value: 0.0 };
Starling.current.juggler.tween(tintObject, 1.5, {
value: 1.0,
onUpdate: function() {
myFilter.reset();
myFilter.tint(0xFF0000, tintObject.value);
}
});