Author Topic: [SOLVED] Trouble getting animation to function at two different occassions.  (Read 2201 times)

jclampy69

  • Full Member
  • ***
  • Posts: 86
    • View Profile
Hi, after hanging around here for some time, I've decided to have a dabble at theme creation.

I've hit a brick wall with an animation of an artwork (logo2).. I can get it to function correctly at layout start or at the end of navigation.
But not functioning correctly at both times. It will only animate at one of these times, or I get a duplicate appearing in the same place. (one static and one animated)

In the below example, we have logo1 which is correctly a static image which is displayed for two seconds. Then we have a video snap which appears in the static logo1's place.
While the video snap is playing the static logo1 is hidden. And we get a new logo2a appear on the right-hand side of the screen that has a short animation.
This logo2a is what is giving me problems. It won't animate at both layout start and at end of navigation. It will only do one or the other.

Code: [Select]
////////////////////////////////////////////////////////////////////////////
//
// Attract-Mode animate logo test
//
//  using these artwork names for folder paths:
//  glogo1 = game logo
//  glogo2 = game logo (just set to same path as above)
//  gvideo = game video snap
//
////////////////////////////////////////////////////////////////////////////
fe.layout.width = 1920;
fe.layout.height = 1080;

// _________________________________________________________________________
//           LOAD MODULES & PLUGINS
// `````````````````````````````````````````````````````````````````````````
fe.load_module("preserve-art") //load preserve-art module
fe.load_module("animate");
fe.do_nut("scripts/reload.nut"); //Reload your layout with button press, great when editing theme.

// _________________________________________________________________________
//      FIRST WE'LL DISPLAY THE GAMES LOGO WHERE THE VIDEO WILL APPEAR
// `````````````````````````````````````````````````````````````````````````
local logo = PreserveArt( "glogo1", 758, 272, 400, 300 );
logo.set_fit_or_fill( "fit" );
logo.set_anchor( ::Anchor.Center );
logo.mipmap = true;

local settings =
{
delay_timer = 0,
play_delay = 2000,
}

local video = fe.add_artwork("gvideo", 719, 242, 480, 360 )
video.preserve_aspect_ratio = true;
video.mipmap = true;
video.trigger = Transition.EndNavigation;

function video_on_transition(ttype, var, transition_time)
{
if (ttype == Transition.StartLayout || ttype == Transition.ToNewList || ttype == Transition.FromOldSelection)
{
settings.delay_timer = fe.layout.time
video.visible = false
}
return false
}

function video_on_tick(tick_time)
{
if (video.video_playing && tick_time - settings.delay_timer >= settings.play_delay) video.visible = true
}
fe.add_ticks_callback(this, "video_on_tick")
fe.add_transition_callback(this, "video_on_transition")

// _________________________________________________________________________
//           THEN WE'LL HIDE THE LOGO WHILE THE VIDEO IS PLAYING
// `````````````````````````````````````````````````````````````````````````
function hide_on_tick(tick_time)
{
if ( video.visible == true ) logo.visible = false
else if ( video.visible == false ) logo.visible = true
}
fe.add_ticks_callback(this, "hide_on_tick")

// _________________________________________________________________________
//   THEN ADD A SECOND GAME LOGO IN TOP RIGHT CORNER ONCE VIDEO IS PLAYING
// `````````````````````````````````````````````````````````````````````````
local logo2a = fe.add_artwork( "glogo2", 1400, 300, 400, 300 );
local logo2a_scale_cfg = {
when = Transition.EndNavigation,
property = "scale",
start = 0.0,
end = 1.0,
time = 1250,
delay = 2000
tween = Tween.Linear,}
animation.add( PropertyAnimation( logo2a, logo2a_scale_cfg ) );

function logo2a_on_transition(ttype, var, transition_time)
{
if ( ttype == Transition.StartLayout || ttype == Transition.EndNavigation )
{
settings.delay_timer = fe.layout.time
logo2a.visible = false
}
return false
}

function logo2a_on_tick(tick_time)
{
if ( logo.visible == true ) logo2a.visible = false
else if ( logo.visible == false ) logo2a.visible = true
}
fe.add_transition_callback( this, "logo2a_on_transition")
fe.add_ticks_callback( this, "logo2a_on_tick")

The above layout.nut will have the animation of the second logo not functioning on layout start. It shows, but appears static.
When you perform an end of navigation, then a correctly animated second logo will appear.
How can I achieve the animated second logo on both layout start and at the end of a navigation?
« Last Edit: September 28, 2020, 09:11:14 PM by jclampy69 »

jclampy69

  • Full Member
  • ***
  • Posts: 86
    • View Profile
Re: Trouble getting animation to function at two different occassions.
« Reply #1 on: September 27, 2020, 04:40:33 PM »
I tried this modification:

Code: [Select]
local logo2a_scale_cfg = {
when = Transition.StartLayout,
property = "scale",
start = 0.0,
end = 1.0,
time = 1250,
delay = 2000
tween = Tween.Linear,}
{
when = Transition.EndNavigation,
property = "scale",
start = 0.0,
end = 1.0,
time = 1250,
delay = 2000
tween = Tween.Linear,}
animation.add( PropertyAnimation( logo2a, logo2a_scale_cfg ) );

But that doesn't work.

So, I tried this modification..

Code: [Select]
local logo2a = fe.add_artwork( "glogo2", 1400, 300, 400, 300 );
local logo2a_scale_cfg = {
when = Transition.EndNavigation,
property = "scale",
start = 0.0,
end = 1.0,
time = 1250,
delay = 2000
tween = Tween.Linear,}
animation.add( PropertyAnimation( logo2a, logo2a_scale_cfg ) );

function logo2a_on_transition(ttype, var, transition_time)
{
if ( ttype == Transition.EndNavigation )
{
settings.delay_timer = fe.layout.time
logo2a.visible = false
}
return false
}

function logo2a_on_tick(tick_time)
{
if ( logo.visible == true ) logo2a.visible = false
else if ( logo.visible == false ) logo2a.visible = true
}
fe.add_transition_callback( this, "logo2a_on_transition")
fe.add_ticks_callback( this, "logo2a_on_tick")

local logo2b = fe.add_artwork( "glogo2", 1400, 300, 400, 300 );
local logo2b_scale_cfg = {
when = Transition.StartLayout,
property = "scale",
start = 0.0,
end = 1.0,
time = 1250,
delay = 2000
tween = Tween.Linear,}
animation.add( PropertyAnimation( logo2b, logo2b_scale_cfg ) );

function logo2b_on_transition(ttype, var, transition_time)
{
if ( ttype == Transition.StartLayout )
{
settings.delay_timer = fe.layout.time
logo2b.visible = false
}
return false
}

function logo2b_on_tick(tick_time)
{
if ( logo.visible == true ) logo2b.visible = false
else if ( logo.visible == false ) logo2b.visible = true
}
fe.add_transition_callback( this, "logo2b_on_transition")
fe.add_ticks_callback( this, "logo2b_on_tick")


But, then you get duplicate logos appearing in the same place, one statc and one animated.

If I then modify the logo2b function as so...

Code: [Select]
function logo2b_on_tick(tick_time)
{
if ( logo.visible == true ) logo2b.visible = false
else return
}
{
if ( logo2a.visible == true ) logo2b.visible = false
else if ( logo2a.visible == false ) logo2b.visible = true
}
fe.add_transition_callback( this, "logo2b_on_transition")
fe.add_ticks_callback( this, "logo2b_on_tick")

Then it gets rid of a duplicate showing.. But, the second logo2 at start of layout is still not animating only showing as static.
« Last Edit: September 27, 2020, 08:24:55 PM by jclampy69 »

jclampy69

  • Full Member
  • ***
  • Posts: 86
    • View Profile
Re: [SOLVED] Trouble getting animation to function at two different occassions.
« Reply #2 on: September 28, 2020, 09:14:29 PM »
LOL, I think I started to go in circles there.. After some more research I have found a solution.

Here is my revised animated logo test layout.nut

Code: [Select]
////////////////////////////////////////////////////////////////////////////
//
// Attract-Mode animated logo test
//
//  using these artwork names for folder paths:
//  glogo = game logo
//  gvideo = game video snap
//
////////////////////////////////////////////////////////////////////////////
fe.layout.width = 1920;
fe.layout.height = 1080;

// _________________________________________________________________________
//           LOAD MODULES & PLUGINS
// `````````````````````````````````````````````````````````````````````````
fe.load_module("preserve-art") //load preserve-art module
fe.load_module("animate");
fe.do_nut("scripts/reload.nut"); //Reload your layout with button press, great when editing theme.

// _________________________________________________________________________
//      FIRST WE'LL DISPLAY THE GAMES LOGO WHERE THE VIDEO WILL APPEAR
// `````````````````````````````````````````````````````````````````````````
local logo1 = PreserveArt( "glogo", 758, 272, 400, 300 );
logo1.set_fit_or_fill( "fit" );
logo1.set_anchor( ::Anchor.Center );
logo1.mipmap = true;

local settings =
{
delay_timer = 0,
play_delay = 2000,
}

local video = fe.add_artwork("gvideo", 719, 242, 480, 360 )
video.preserve_aspect_ratio = true;
video.mipmap = true;
video.trigger = Transition.EndNavigation;

function video_on_transition(ttype, var, transition_time)
{
if (ttype == Transition.StartLayout || ttype == Transition.ToNewList || ttype == Transition.FromOldSelection)
{
settings.delay_timer = fe.layout.time
video.visible = false
}
return false
}

function video_on_tick(tick_time)
{
if (video.video_playing && tick_time - settings.delay_timer >= settings.play_delay) video.visible = true
}
fe.add_ticks_callback(this, "video_on_tick")
fe.add_transition_callback(this, "video_on_transition")

// _________________________________________________________________________
//        THEN WE'LL HIDE THE FIRST LOGO WHILE THE VIDEO IS PLAYING
// `````````````````````````````````````````````````````````````````````````
function hide_on_tick(tick_time)
{
if ( video.visible == true ) logo1.visible = false
else if ( video.visible == false ) logo1.visible = true
}
fe.add_ticks_callback(this, "hide_on_tick")

// _________________________________________________________________________
//   THEN ADD A SECOND GAME LOGO IN TOP RIGHT CORNER ONCE VIDEO IS PLAYING
// `````````````````````````````````````````````````````````````````````````
local logo2 = fe.add_artwork( "glogo", 1400, 300, 400, 300 );
logo2.preserve_aspect_ratio = true;
local logo2_start_scale = {
when = Transition.StartLayout,
property = "scale",
start = 0.0,
end = 1.0,
time = 1250,
delay = 2000
tween = Tween.Linear,}
animation.add( PropertyAnimation( logo2, logo2_start_scale ) );

function logo2_on_transition(ttype, var, transition_time)
{
if ( ttype == Transition.ToNewSelection )
logo2_start_scale.time = 1;
return false;
}
fe.add_transition_callback( this, "logo2_on_transition")

local logo2_next_scale = {
when = Transition.ToNewSelection,
property = "scale",
start = 0.0,
end = 1.0,
time = 1250,
delay = 2000
tween = Tween.Linear,}
animation.add( PropertyAnimation( logo2, logo2_next_scale ) );

// _________________________________________________________________________
//           WE'LL HIDE THE SECOND LOGO UNLESS THE VIDEO IS PLAYING
// `````````````````````````````````````````````````````````````````````````
function hide_on_tick(tick_time)
{
if ( video.visible == false ) logo2.visible = false
else if ( video.visible == true ) logo2.visible = true
}
fe.add_ticks_callback(this, "hide_on_tick")


Cheers.