How to pause a animation in nativescript-vue - animation

I use AnimationSet with AnimationDefinitions in my project.
When I call AnimationSet.cancel(), the element reset to its initial state.
It seems like the cancel() method can be customized. So, is there a way to save the current element state by custom the cancel() method and making it looks like a pause action? Or, is there any other way to achieve this effect?

Resolved by:
start() {
// "Create new Animation with AnimationDefinitions with initial state or existing recorded state"
// "Play and record state in the background in millisecond level"
}
pause() {
// "Clear old Animation"
// "Create new one with recorded state with setting the duration to 1"
// "Play"
}
Maybe it's not a proper solution. But for now, I can only find out this hack way. And it just works fine for me.

Related

Codename one - Long Press Event to Ignore normal Press

I have been following this guide and have the working example till the very end of the demo (very insightful tutorial, 10/10 would recommend):
https://codenameone.teachable.com/courses/java-for-mobile-devices-introducing-codename-one/lectures/2647773
Now I wanted to expand this to a more practical todo list by adding a Floating Action Button to add new items, like that:
fab = FloatingActionButton.createFAB(FontImage.MATERIAL_ADD);
fab.bindFabToContainer(current.getContentPane(), Component.RIGHT,
Component.BOTTOM);
fab.addActionListener(e -> { // show dialog for adding new item });
This by itself works fine. Now comes the tricky part. When using a long press event on any of the items, two things should happen:
the visual of the long pressed item should change to indicate it is being selected (not in terms of a Checkbox or ToggleButton "select" but a highlight.
the FAB should change its icon and actionlistener to delete the highlighted item.
The long press event is achieved in overriding the longPointPress method from the Checkbox class:
#Override
public void longPointerPress(int x, int y){
mainForm.longPressEvent(this);
// no event parameter for e.consume();
}
To my questions:
Q1: When I use the action listener from the ToggleButton, both the "normal" click event as well as the long Press event are fired. I need to distinguish between the two though.
The longPointerPress method does not have the event in the param list, hence I cannot consume the event after being done with my long Press Event activity. How can I prevent the normal action listener from firing?
Q2: For the "highlight effect", I would like the item to have a margin to all sides, overall shrinking the element by that amount. In other words, without increasing the previous total size. By just adding a margin though, the item gets bigger.
How could a shrink a given element with a margin to all sides, but preserve the original size?
Q3: A FAB only has the option to "setIcon", not "setMaterialIcon". Hence, I am currently recreating the FAB every time it changes, as I dont want to hustle with the involved styles. Is there a better way than this?
//this is the unwanted function, as I dont want to set the style myself
fab.setIcon(FontImage.createMaterial(icon, s));
//Delete FAB pressed, change to Add FAB
fab.remove();
fab = FloatingActionButton.createFAB(FontImage.MATERIAL_ADD);
fab.bindFabToContainer(current.getContentPane(), Component.RIGHT, Component.BOTTOM);
Action event is always invoked on pointer release regardless of whether there was a long press event fired as we don't "know" you processed the longPress event. You would need to create a flag such as:
private boolean handledInLongPress;
public void longPress(int x, int y) {
// do your stuff
handledInLongPress = true;
}
private void handleActionEvent(ActionEvent ev) {
// I'm using this as a placeholder for your event code
// block the event from propagating and undo anything it might
// have triggered
ev.consume();
}
I would recommend using setUIID() on the elements and define a "delete*" set of UIID's. You can define smaller padding and fonts to create the effect of shrinking but that might be tricky if you have icons here as well. You can scale down said icons and keep the original for restoring in a client property.
FAB makes a lot of assumptions so re-creating it (or using two instances) is probably a better approach than trying to set the icon. There is no way to change the icon of the FAB at runtime in the current implementation.

p5.js mousePressed works but doublePressed doesnot?

While programming my own minesweeper game, I have come to a stage(kind of final one) where I have to introduce the concept of Flags. Currently, I am using mousePressed() to open up any cell that might be a mine. But I cannot figure out a way how to flag any cell, as I tried to use doubleClicked() but it does not work in this case. Does anyone have any hint for this, or any built in p5.js tool that might simply flag a cell?
EDIT:
https://github.com/abj54/minesweeper
My code is in the above repo for anyone who might want to go through it. In terms of flag, it is a basic indicator of letting user guess which of the given cell may be a mine.
Listening to booth events on the same object is problematic because of the event change which is called for a dblclick:
mousedown
mouseup
click
mousedown
mouseup
click
dbclick
P5.js checks the click/dblclick event of the window so you should not use both functions (click and dblclick).
But you can use the click event with a Timeout to solve this problem.
var clicked=false, clickTimeout=300;
function mouseClicked(){
if(!clicked){
clicked=true;
setTimeout(function(){
if(clicked){
console.log("single click");
clicked=false;
//single ClickStuff
}
},clickTimeout);
}else{
clicked=false;
console.log("double click");
//double click Stuff
}
}
So you are waiting the in clickTimeout defined amount of Time if a second click is called and react to.

UI Button - activate buttons with keyboard input

this is probably dead easy but I can't find a solution. I made a dialogue system and have a UI-button to click when the player should display a sentence next.
The issue is that the button is only triggered onMouseclick and I would like to change the input button to Enter. Would anyone know how to go about this?
If you need to determine if the button is selected first or not, I suggest you take a look at this page: https://docs.unity3d.com/ScriptReference/UI.Selectable.IsHighlighted.html
If you don't want pressing the button to have any functionality, you just wouldn't link it to any functions.
Working code might look something like this:
public class selectableExample : Selectable{
BaseEventData _event;
void Update()
{
if (IsHighlighted(_event) == true)
{
if (Input.GetKeyDown("enter")){
print("replace me with working function"); // whatever you want to have happen on button press
}
}
}
}
You simply attach this to your button and it should respond the same as being pressed. To be honest, it hardly seems like you actually need a button at all for this though, you'd probably be fine with just a label telling the player to press "Enter" and then simply checking for that input.
You can use the Event Trigger component to use one of the many event types. Select Submit (this is set to enter and return in the input settings at edit>project settings>input by default).
Don't set anything in the OnClick event.
The only thing needed now is to actively highlight the button from somewhere with ReferenceToButton.Select().

Unity2D Set Time Trial That Kills Player When Over

I can't find any answers to this. What I want is to set a 5 min time limit that begins when the level begins and ends when level ends. I also want it to kill the player if it runs out. This is for Unity2D and I want the timer to be seen at top left or right of screen. So basically I need a time limit like that of Super Mario. In C# code please.
Break up your problem into easier tasks. You will need some type of timer, and you will want to know how to 'kill' the player.
To create a timer, you can take advantage of how Update runs once per frame. Unity also comes with a Time class. In Time, there is a variable deltaTime which keeps track of the time in seconds to complete the last frame. Some other things you might want to add on to your class that acts as a timer is when to start and stop the timer.
To output the value from a timer to the game, you might want to use Unity's UI system and canvas. You might create a text object that is part of a canvas and anchor that text object to the top left corner.
To 'kill' a player, you can have some method that runs once the timer reaches the time in question and run the kill logic you want.
Helpful links:
MonoBehavior Update: https://docs.unity3d.com/ScriptReference/MonoBehaviour.Update.html
Time: https://docs.unity3d.com/ScriptReference/Time.html
UI: https://unity3d.com/learn/tutorials/topics/user-interface-ui
You can create a class that keeps track of the timer and to check if the requirements to fail are still there.
In this case you can have a float for the timer, and a bool for the condition whenever you completed the level or not.
It the timer reaches zero, check if the bool is still false, if it is, then you call something like KillPlayer(). If you complete the level by hitting a trigger or anything that will know if the level should be considered finished, you set the bool to true.
So your final check could look like this:
public float levelTimer = 300f;
public bool levelComplete = false;
void Start()
{
levelTimer = 300f;
levelComplete = false;
}
void Update()
{
levelTimer -= Time.deltaTime;
if(levelTimer <= 0 && !levelComplete)
{
KillPlayer();
//Something like a Game Over screen maybe
}
}
I hope this help you in the right direction.

How to create a delay based on an animation in HaxeFlixel?

I'm developing my first game and I have a player class (FlxSprite) that has a death animation.
I want to remove the player from the stage as soon as the animation ends, but if I use:
player.animation.play('death');
remove(player);
The animation doesn't finish and the player just disappears.
The way I handle this in most of my projects is something like this:
override public function update(elapsed:Float):Void
{
if (!alive)
{
if (animation.finished)
{
exists = false;
}
super.update(elapsed);
}
// other update stuff...
super.update(elapsed);
}
override public function kill():Void
{
if (!alive || !exists)
{
return;
}
alive = false;
animation.play("death", true);
// Note: I DO NOT call super.kill() because I want to leave exists = true
}
And, in your PlayState or wherever you want to remove the object, just check if (!player.exists) remove(player);, I guess? I don't usually use remove, I just wait until the state is destroyed and then clean everything up with FlxDestroyUtil.
Your question isn't super clear, but I'll try help anyway.
Because of the way the game loop is looping, the remove function kills off the sprite before the animation plays. You can check to see when the animation is finished by putting an if statment in your update function, like so.
if (animation.finished) kill()
If you need an actual timed delay, you can see my previous answer where you increase a variable by FlxG.elapsed every update on a variable until it exceeds your timer length.
I hope this answers your question. You may want too look at methods such as kill() in the HaxeFlixel docs, as I think you might be confused with remove().
EDIT: very sorry, forgot to include one important detail. It is likely that you are calling animation.play every single frame - stop once your death animation plays. In my code I saw I have an isDying variable that stops any new animations starting, and checks to see if the current animation is finished. Without this, the finished variable might not flip.

Resources