Scripting

(4 votes, average: 4.75 out of 5)

 Loading ...

This tutorial will help you to make a similar iPhone loader in your ShiVa project.

Introduction

The objective of this tutorial is to create a ’loading’ animation that looks like this:  .
Animation contains 12-segments.

HUD

First of all, import the animation texture inside ShiVa (download sources above and unzip the tga) .
Create a template in the Hud Editor, “AnimationTemplate” and create a component named “Animation”. In the General section, choose type Label, and make the component Viewport aspect ratio independent. Set the size to 5×5. Now in the Appearance section, select the texture previously imported and set colors as follows:

• BackColor: 127, 127, 127, 255
• ForeColor: 127, 127, 127, 0
• BorderColor: 127, 127, 127, 0

Click “OK” and save the HUD. Reference it in your game by dragging and droping “AnimationTemplate” from the Data Explorer > Resource > HUD to the Game Editor > Resources tab.

Script

Create an AIModel called ‘myGame’. In this AIModel, create a ‘onInit’ handler as follows:

--------------------------------------------------------------------------------
function myGame.onInit (  )
--------------------------------------------------------------------------------
  hud.newTemplateInstance ( this.getUser ( ), "AnimationTemplate", "AnimationTemplate" )
  log.message("onInit called")
--------------------------------------------------------------------------------
end
--------------------------------------------------------------------------------

Reference this AIModel it in your game by dragging and droping ’myGame’ from the Data Explorer > AIModels to the Game Editor > Main tab > User MAin AIs.

Launch the game. In the Log Reporter, you should see the ‘onInit called’ message. If this is the case, you can continue with next steps.

In this tutorial, the animation rotates infinitely, 12 segments per rotation, and 1 complete rotation per second. So:

• Create a global number variable named ‘nSegmentsCount’ and initialize it to 12.
• Create a global number variable named ‘nRotationsPerSecond’ and initialize it to 1 (to do one rotation per second).

Then create a ‘getRotation’ function . This function will return the current rotation according to current time (below, to get the current time, we use the application.getTotalFrameTime function that returns the number of seconds elapsed since application was started). Enter this code:

--------------------------------------------------------------------------------
function AIMain.getRotation (  )
--------------------------------------------------------------------------------
  local nSegmentAngle = 360 / this.nSegmentsCount ( )
  local nSegmentIndex = math.roundToNearestInteger ( application.getTotalFrameTime ( ) * this.nRotationsPerSecond ( ) * this.nSegmentsCount ( ) )
  nSegmentIndex = math.mod ( nSegmentIndex, this.nSegmentsCount ( ) )
  local nRotation = math.roundToNearestInteger ( nSegmentIndex ) * nSegmentAngle
  return nRotation
--------------------------------------------------------------------------------
end
--------------------------------------------------------------------------------

It’s now time to animate the HUD component. Create a ‘onEnterFrame’ handler as follows:

--------------------------------------------------------------------------------
function AIMain.onEnterFrame (  )
 
--------------------------------------------------------------------------------
  local hLoader = hud.getComponent ( this.getUser ( ), "AnimationTemplate.Animation" )
  hud.setComponentRotation ( hLoader, this.getRotation ( ) )
--------------------------------------------------------------------------------
end
--------------------------------------------------------------------------------

You can now start the game and go in the Scene Viewer > Hud tab. You should see an animated segment rotating 12 times (360 degrees) per second. You can change the nRotationsPerSecond variable value to turn faster or slower.