Animating and Parenting an SIO2Widget

Two questions for anyone who has been down this path before:

1. I am creating a menu system using SIO2Widget and was curious what the best way to go about animating the widgets would be. Each SIO2Widget has a single SIO2Material which has 2 textures. I would like to use a spritesheet for the different frames of the animation so that only 1 image needs to get loaded. My C experience is not anywhere near my OO experience so the way I would do this in the OO world is something like this: subclass SIO2Widget and add an ivar for sprite size and an ivar for sprite count. On each render, the piece of the spritesheet being rendered would be based on the sprite size and current sprite count. Can someone point me in the right direction as to how to go about doing this? A rough overview (I'm especially lost as to where I would specify and send the texture coors for the current sprite) would be greatly appreciated.

2. Is it possible to have multiple SIO2Widgets with a single parent? I am looking for some way to have a bunch of menu items that can all be repositioned (slid off the screen and back on) by just moving the parent.

Thanks in advance

uprise78 wrote:Two questions for anyone who has been down this path before:

I would like to use a spritesheet for the different frames of the animation so that only 1 image needs to get loaded.

This is what sio2_font does. Only each character/sprite is laid out into a string rather than keyframe (flip book) animated. Also the UV coordinates are mapped algorithmically rather than arbitrary.

Good point zzajin. I'll give sio2_font a look and see whats happening there.

While messing around with sio2Widgets I ended up make an ugly little project that might help out anyone who is wondering how to use sio2Widget or sio2Timer. It also has some rudimentary touch handling. It is commented and should be pretty easy to follow. You will just need to add 4 images to your project that are 32 x 32 pixel, tga's.

I am thinking that an sio2Sprite class that has named animations might be a good idea. It isn't 3d, but it is super useful for nice menu systems and it would make SIO2 useful for 2d game as well.

Code:

/*
 *  template.mm
 *  template
 *
 */

#include "template.h"
#include "../src/sio2/sio2.h"
   

// Widget vars
SIO2widget *myWidget = NULL;
SIO2image *myImages[ 4 ];
SIO2timer *myTimer = NULL;

unsigned char beingTouched = 0;

void templateRender( void )
{   
   glMatrixMode( GL_MODELVIEW );
   glLoadIdentity();

   glClear( GL_COLOR_BUFFER_BIT );

   // Add a depth so we can see the rotation on the
   // y axis of the player.
   sio2WindowEnter2D( sio2->_SIO2window, -1000.0f, 1000.0f );
   {
      sio2WindowEnterLandscape2D( sio2->_SIO2window );
      {
         // Render our widget
         sio2WidgetRender( myWidget, sio2->_SIO2window, 0 );
         
         // Evaluate the timers
         sio2ResourceRender( sio2->_SIO2resource, sio2->_SIO2window, NULL, SIO2_EVALUATE_TIMER );
         
         // Check to see if we are selected
         if( beingTouched )
         {
            // Modify our width/height to be larger if we are being touched
            if( myWidget->_SIO2transform->scl->x < 55 )
            {
               myWidget->_SIO2transform->scl->x += 2;
               myWidget->_SIO2transform->scl->y += 2;
            }
         }
         else
         {
            // Shrink back down to 32 if we are not being touched
            if( myWidget->_SIO2transform->scl->x > 32 )
            {
               myWidget->_SIO2transform->scl->x -= 1;
               myWidget->_SIO2transform->scl->y -= 1;   
            }
         }
         
         // Reset the rendering states set by SIO2widget.
         sio2WidgetReset();
         
         sio2MaterialReset();
         
         sio2ResourceUpdateAllWidgetBoundaries( sio2->_SIO2resource,
                                      sio2->_SIO2window );
         
         // Display the "responsive" area of a widget on screen.
         //sio2WidgetDebug( myWidget );
      }
      sio2WindowLeaveLandscape2D( sio2->_SIO2window );
   }
   sio2WindowLeave2D();
}


void myWidgetTouch( void *, void *, vec2 * )
{
   NSLog(@"You touched myWidget");
}


void templateLoading( void )
{
   myWidget    = sio2WidgetInit( "widget" );
   myImages[ 0 ] = sio2ImageInit( "widgetImagea" );
   
   // Load 4 images for the animation
   SIO2stream *_SIO2stream     = sio2StreamOpen( "a.tga", 1 );
   {
      sio2ImageLoad( myImages[ 0 ], _SIO2stream );
      sio2ImageGenId( myImages[ 0 ], 0, 0.0f );
   }
   _SIO2stream = sio2StreamClose( _SIO2stream );
   
   
   myImages[ 1 ] = sio2ImageInit( "widgetImageb" );
   _SIO2stream     = sio2StreamOpen( "b.tga", 1 );
   {
      sio2ImageLoad( myImages[ 1 ], _SIO2stream );
      sio2ImageGenId( myImages[ 1 ], 0, 0.0f );
   }
   _SIO2stream = sio2StreamClose( _SIO2stream );
   
   
   myImages[ 2 ] = sio2ImageInit( "widgetImagec" );
   _SIO2stream     = sio2StreamOpen( "c.tga", 1 );
   {
      sio2ImageLoad( myImages[ 2 ], _SIO2stream );
      sio2ImageGenId( myImages[ 2 ], 0, 0.0f );
   }
   _SIO2stream = sio2StreamClose( _SIO2stream );
   
   
   myImages[ 3 ] = sio2ImageInit( "widgetImaged" );
   _SIO2stream     = sio2StreamOpen( "d.tga", 1 );
   {
      sio2ImageLoad( myImages[ 3 ], _SIO2stream );
      sio2ImageGenId( myImages[ 3 ], 0, 0.0f );
   }
   _SIO2stream = sio2StreamClose( _SIO2stream );
   

   // Initialize widget materials
   myWidget->_SIO2material = sio2MaterialInit( "widgetMaterial" );
   myWidget->_SIO2material->_SIO2image[ SIO2_MATERIAL_CHANNEL0 ] = myImages[0];
   myWidget->_SIO2material->diffuse->w = 1.0f;
   
   myWidget->_SIO2material->blend = SIO2_MATERIAL_ALPHA;
   
   // Initialize size to be the same as the image size
   myWidget->_SIO2transform->scl->x = myImages[ 0 ]->width;
   myWidget->_SIO2transform->scl->y = myImages[ 0 ]->height;
   
   myWidget->_SIO2transform->loc->x  = sio2->_SIO2window->scl->y / 2;
   myWidget->_SIO2transform->loc->y  = sio2->_SIO2window->scl->x / 2;
   
   // Add a touch listener and hit area
   myWidget->area->x = 32;
   myWidget->area->y = 32;
   myWidget->_SIO2widgettapdown = myWidgetTouch;

   // Enable the necessary widget states
   sio2EnableState( &myWidget->flags, SIO2_WIDGET_VISIBLE | SIO2_WIDGET_ENABLED );
   
   // Create a timer to change the images
   myTimer = sio2TimerInit( "myTimer" );
   sio2TimerCreate( myTimer, sio2->_SIO2window, myTimerCallback, 300 );
   sio2ResourceAdd( sio2->_SIO2resource, SIO2_TIMER, myTimer );

   sio2->_SIO2window->_SIO2windowrender = templateRender;
}


void myTimerCallback( void * item )
{
   static int animationFrame = 0;
   
   // Change the image
   myWidget->_SIO2material->_SIO2image[ SIO2_MATERIAL_CHANNEL0 ] = myImages[ animationFrame ];
   
   animationFrame++;
   
   if( animationFrame == 4 )
      animationFrame = 0;
}


void templateShutdown( void )
{
   sio2ResourceUnloadAll( sio2->_SIO2resource );

   sio2->_SIO2resource = sio2ResourceFree( sio2->_SIO2resource );
   
   sio2->_SIO2window = sio2WindowFree( sio2->_SIO2window );
   
   sio2ShutdownWidget();

   sio2 = sio2Shutdown();

   printf("\nSIO2: shutdown...\n" );
}


vec2 start;
void templateScreenTap( void *_ptr, unsigned char _state )
{
   if( _state == SIO2_WINDOW_TAP_DOWN )
   {
      // Set a flag to show we are being touched
      beingTouched = 1;
      
      // Start the animation timer
      sio2TimerPlay( myTimer );
      
      // Save our start x position so we can figure out where to move if TouchMoved gets called
      start.x = sio2->_SIO2window->touch[ 0 ].x;
      start.y = sio2->_SIO2window->touch[ 0 ].y;
   }
   else
   {
      // Reset the flag so our widget zooms back out
      beingTouched = 0;
      
      // Stop the timer
      sio2TimerStop( myTimer );
   }
}


void templateScreenTouchMove( void *_ptr )
{
   vec2 d;
   d.y = sio2->_SIO2window->touch[ 0 ].x - start.x;
   d.x = start.y - sio2->_SIO2window->touch[ 0 ].y;
   
   myWidget->_SIO2transform->loc->x += d.y;
   myWidget->_SIO2transform->loc->y -= d.x;
   
   start = sio2->_SIO2window->touch[ 0 ];
}


void templateScreenAccelerometer( void *_ptr )
{


}


Hey,

By the way, unless Rom has fixed it, there's a problem with SIO2widget which prevents you from rotating it around its center.

You have been warned...

-j

meteors: this have been fixed since 1.3.2...

When changing the width/height of a widget it looks as if the anchor point is the bottom left corner. Is there a way to modify the anchor point so that scaling a widget will keep it centered?

SIO2_WIDGET_CENTERED... just like in tutorial07???

Wow. I am embarrassed that I missed that one. Thanks SIO2.

sio2interactive wrote:SIO2_WIDGET_CENTERED... just like in tutorial07???

Thanks for the update!!

-j

i have tried to insert the code of the up post but i receive a bad access when try to execute glMatrixMode( GL_MODELVIEW );
can anyone help me?

uprise78 wrote:Good point zzajin. I'll give sio2_font a look and see whats happening there.

While messing around with sio2Widgets I ended up make an ugly little project that might help out anyone who is wondering how to use sio2Widget or sio2Timer. It also has some rudimentary touch handling. It is commented and should be pretty easy to follow. You will just need to add 4 images to your project that are 32 x 32 pixel, tga's.

I am thinking that an sio2Sprite class that has named animations might be a good idea. It isn't 3d, but it is super useful for nice menu systems and it would make SIO2 useful for 2d game as well.

Code:

/*
 *  template.mm
 *  template
 *
 */

#include "template.h"
#include "../src/sio2/sio2.h"
   

// Widget vars
SIO2widget *myWidget = NULL;
SIO2image *myImages[ 4 ];
SIO2timer *myTimer = NULL;

unsigned char beingTouched = 0;

void templateRender( void )
{   
   glMatrixMode( GL_MODELVIEW );
   glLoadIdentity();

   glClear( GL_COLOR_BUFFER_BIT );

   // Add a depth so we can see the rotation on the
   // y axis of the player.
   sio2WindowEnter2D( sio2->_SIO2window, -1000.0f, 1000.0f );
   {
      sio2WindowEnterLandscape2D( sio2->_SIO2window );
      {
         // Render our widget
         sio2WidgetRender( myWidget, sio2->_SIO2window, 0 );
         
         // Evaluate the timers
         sio2ResourceRender( sio2->_SIO2resource, sio2->_SIO2window, NULL, SIO2_EVALUATE_TIMER );
         
         // Check to see if we are selected
         if( beingTouched )
         {
            // Modify our width/height to be larger if we are being touched
            if( myWidget->_SIO2transform->scl->x < 55 )
            {
               myWidget->_SIO2transform->scl->x += 2;
               myWidget->_SIO2transform->scl->y += 2;
            }
         }
         else
         {
            // Shrink back down to 32 if we are not being touched
            if( myWidget->_SIO2transform->scl->x > 32 )
            {
               myWidget->_SIO2transform->scl->x -= 1;
               myWidget->_SIO2transform->scl->y -= 1;   
            }
         }
         
         // Reset the rendering states set by SIO2widget.
         sio2WidgetReset();
         
         sio2MaterialReset();
         
         sio2ResourceUpdateAllWidgetBoundaries( sio2->_SIO2resource,
                                      sio2->_SIO2window );
         
         // Display the "responsive" area of a widget on screen.
         //sio2WidgetDebug( myWidget );
      }
      sio2WindowLeaveLandscape2D( sio2->_SIO2window );
   }
   sio2WindowLeave2D();
}


void myWidgetTouch( void *, void *, vec2 * )
{
   NSLog(@"You touched myWidget");
}


void templateLoading( void )
{
   myWidget    = sio2WidgetInit( "widget" );
   myImages[ 0 ] = sio2ImageInit( "widgetImagea" );
   
   // Load 4 images for the animation
   SIO2stream *_SIO2stream     = sio2StreamOpen( "a.tga", 1 );
   {
      sio2ImageLoad( myImages[ 0 ], _SIO2stream );
      sio2ImageGenId( myImages[ 0 ], 0, 0.0f );
   }
   _SIO2stream = sio2StreamClose( _SIO2stream );
   
   
   myImages[ 1 ] = sio2ImageInit( "widgetImageb" );
   _SIO2stream     = sio2StreamOpen( "b.tga", 1 );
   {
      sio2ImageLoad( myImages[ 1 ], _SIO2stream );
      sio2ImageGenId( myImages[ 1 ], 0, 0.0f );
   }
   _SIO2stream = sio2StreamClose( _SIO2stream );
   
   
   myImages[ 2 ] = sio2ImageInit( "widgetImagec" );
   _SIO2stream     = sio2StreamOpen( "c.tga", 1 );
   {
      sio2ImageLoad( myImages[ 2 ], _SIO2stream );
      sio2ImageGenId( myImages[ 2 ], 0, 0.0f );
   }
   _SIO2stream = sio2StreamClose( _SIO2stream );
   
   
   myImages[ 3 ] = sio2ImageInit( "widgetImaged" );
   _SIO2stream     = sio2StreamOpen( "d.tga", 1 );
   {
      sio2ImageLoad( myImages[ 3 ], _SIO2stream );
      sio2ImageGenId( myImages[ 3 ], 0, 0.0f );
   }
   _SIO2stream = sio2StreamClose( _SIO2stream );
   

   // Initialize widget materials
   myWidget->_SIO2material = sio2MaterialInit( "widgetMaterial" );
   myWidget->_SIO2material->_SIO2image[ SIO2_MATERIAL_CHANNEL0 ] = myImages[0];
   myWidget->_SIO2material->diffuse->w = 1.0f;
   
   myWidget->_SIO2material->blend = SIO2_MATERIAL_ALPHA;
   
   // Initialize size to be the same as the image size
   myWidget->_SIO2transform->scl->x = myImages[ 0 ]->width;
   myWidget->_SIO2transform->scl->y = myImages[ 0 ]->height;
   
   myWidget->_SIO2transform->loc->x  = sio2->_SIO2window->scl->y / 2;
   myWidget->_SIO2transform->loc->y  = sio2->_SIO2window->scl->x / 2;
   
   // Add a touch listener and hit area
   myWidget->area->x = 32;
   myWidget->area->y = 32;
   myWidget->_SIO2widgettapdown = myWidgetTouch;

   // Enable the necessary widget states
   sio2EnableState( &myWidget->flags, SIO2_WIDGET_VISIBLE | SIO2_WIDGET_ENABLED );
   
   // Create a timer to change the images
   myTimer = sio2TimerInit( "myTimer" );
   sio2TimerCreate( myTimer, sio2->_SIO2window, myTimerCallback, 300 );
   sio2ResourceAdd( sio2->_SIO2resource, SIO2_TIMER, myTimer );

   sio2->_SIO2window->_SIO2windowrender = templateRender;
}


void myTimerCallback( void * item )
{
   static int animationFrame = 0;
   
   // Change the image
   myWidget->_SIO2material->_SIO2image[ SIO2_MATERIAL_CHANNEL0 ] = myImages[ animationFrame ];
   
   animationFrame++;
   
   if( animationFrame == 4 )
      animationFrame = 0;
}


void templateShutdown( void )
{
   sio2ResourceUnloadAll( sio2->_SIO2resource );

   sio2->_SIO2resource = sio2ResourceFree( sio2->_SIO2resource );
   
   sio2->_SIO2window = sio2WindowFree( sio2->_SIO2window );
   
   sio2ShutdownWidget();

   sio2 = sio2Shutdown();

   printf("\nSIO2: shutdown...\n" );
}


vec2 start;
void templateScreenTap( void *_ptr, unsigned char _state )
{
   if( _state == SIO2_WINDOW_TAP_DOWN )
   {
      // Set a flag to show we are being touched
      beingTouched = 1;
      
      // Start the animation timer
      sio2TimerPlay( myTimer );
      
      // Save our start x position so we can figure out where to move if TouchMoved gets called
      start.x = sio2->_SIO2window->touch[ 0 ].x;
      start.y = sio2->_SIO2window->touch[ 0 ].y;
   }
   else
   {
      // Reset the flag so our widget zooms back out
      beingTouched = 0;
      
      // Stop the timer
      sio2TimerStop( myTimer );
   }
}


void templateScreenTouchMove( void *_ptr )
{
   vec2 d;
   d.y = sio2->_SIO2window->touch[ 0 ].x - start.x;
   d.x = start.y - sio2->_SIO2window->touch[ 0 ].y;
   
   myWidget->_SIO2transform->loc->x += d.y;
   myWidget->_SIO2transform->loc->y -= d.x;
   
   start = sio2->_SIO2window->touch[ 0 ];
}


void templateScreenAccelerometer( void *_ptr )
{


}


Hy!
I copied your code in tutorial 7 from SIO2, and added 4 tga's with the size 32X32 but I don't see aything on the iPhone Simulator.
I had to reposition the myTimerCallback function before templateLoading function, and I commented the line
start = sio2->_SIO2window->touch[0];
because It didn't worked. I also wrote 100 instead of SIO2_MATERIAL_ALPHA.
Not working at all.. please help me:(

Ok, I fixed the sample to work in 1.4

Here is the source of template.mm:

Code:


/*
 *  template.mm
 *  template
 *
 */

#include "template.h"
#include "../src/sio2/sio2.h"


// Widget vars
SIO2widget *myWidget = NULL;
SIO2image *myImages[ 4 ];

SIO2timer *myTimer = NULL;

unsigned char beingTouched = 0;

void templateRender( void )
{ 
   glMatrixMode( GL_MODELVIEW );
   glLoadIdentity();
   
   glClear( GL_COLOR_BUFFER_BIT );
   
   // Add a depth so we can see the rotation on the
   // y axis of the player.
   sio2WindowEnter2D( sio2->_SIO2window, 0.0f, 100.0f );
   {
      sio2WindowEnterLandscape2D( sio2->_SIO2window );
      {
         // Render our widget
         sio2WidgetRender( myWidget, sio2->_SIO2window, SIO2_TRANSFORM_MATRIX_APPLY );
         
         // Evaluate the timers
         sio2ResourceRender( sio2->_SIO2resource, sio2->_SIO2window, NULL, SIO2_EVALUATE_TIMER );
         
         // Check to see if we are selected
         if( beingTouched )
         {
            // Modify our width/height to be larger if we are being touched
            if( myWidget->_SIO2transform->scl->x < 55 )
            {
               myWidget->_SIO2transform->scl->x += 2;
               myWidget->_SIO2transform->scl->y += 2;
            }
         }
         else
         {
            // Shrink back down to 32 if we are not being touched
            if( myWidget->_SIO2transform->scl->x > 32 )
            {
               myWidget->_SIO2transform->scl->x -= 1;
               myWidget->_SIO2transform->scl->y -= 1; 
            }
         }
         
         // Reset the rendering states set by SIO2widget.
         sio2WidgetReset();
         
         sio2MaterialReset();
         
         sio2ResourceUpdateAllWidgetBoundaries( sio2->_SIO2resource,
                                        sio2->_SIO2window );
         
         // Display the "responsive" area of a widget on screen.
         //sio2WidgetDebug( myWidget );
      }
      sio2WindowLeaveLandscape2D( sio2->_SIO2window );
   }
   sio2WindowLeave2D();
}


void myWidgetTouch( void *, void *, vec2 * )
{
   NSLog(@"You touched myWidget");
}


void templateLoading( void )
{
   myWidget    = sio2WidgetInit( "widget" );
   myImages[ 0 ] = sio2ImageInit( "widgetImagea" );
   
   // Load 4 images for the animation
   SIO2stream *_SIO2stream    = sio2StreamOpen( "a.tga", 1 );
   {
      sio2ImageLoad( myImages[ 0 ], _SIO2stream );
      sio2ImageGenId( myImages[ 0 ], 0, 0.0f );
   }
   _SIO2stream = sio2StreamClose( _SIO2stream );
   
   
   myImages[ 1 ] = sio2ImageInit( "widgetImageb" );
   _SIO2stream    = sio2StreamOpen( "b.tga", 1 );
   {
      sio2ImageLoad( myImages[ 1 ], _SIO2stream );
      sio2ImageGenId( myImages[ 1 ], 0, 0.0f );
   }
   _SIO2stream = sio2StreamClose( _SIO2stream );
   
   
   myImages[ 2 ] = sio2ImageInit( "widgetImagec" );
   _SIO2stream    = sio2StreamOpen( "c.tga", 1 );
   {
      sio2ImageLoad( myImages[ 2 ], _SIO2stream );
      sio2ImageGenId( myImages[ 2 ], 0, 0.0f );
   }
   _SIO2stream = sio2StreamClose( _SIO2stream );
   
   
   myImages[ 3 ] = sio2ImageInit( "widgetImaged" );
   _SIO2stream    = sio2StreamOpen( "d.tga", 1 );
   {
      sio2ImageLoad( myImages[ 3 ], _SIO2stream );
      sio2ImageGenId( myImages[ 3 ], 0, 0.0f );
   }
   _SIO2stream = sio2StreamClose( _SIO2stream );
   
   
   // Initialize widget materials
   myWidget->_SIO2material = sio2MaterialInit( "widgetMaterial" );
   myWidget->_SIO2material->_SIO2image[ SIO2_MATERIAL_CHANNEL0 ] = myImages[0];
   myWidget->_SIO2material->diffuse->w = 1.0f;
   
   myWidget->_SIO2material->blend = SIO2_MATERIAL_COLOR;
   
   // Initialize size to be the same as the image size
   myWidget->_SIO2transform->scl->x = myImages[ 0 ]->width;
   myWidget->_SIO2transform->scl->y = myImages[ 0 ]->height;
   
   myWidget->_SIO2transform->loc->x  = sio2->_SIO2window->scl->y / 2;
   myWidget->_SIO2transform->loc->y  = sio2->_SIO2window->scl->x / 2;
   
   // Add a touch listener and hit area
   myWidget->area->x = 32;
   myWidget->area->y = 32;
   myWidget->_SIO2widgettapdown = myWidgetTouch;
   
   // Enable the necessary widget states
   sio2EnableState( &myWidget->flags, SIO2_WIDGET_VISIBLE |
                             SIO2_WIDGET_ENABLED |
                             SIO2_WIDGET_CENTERED );
   
   // Create a timer to change the images
   myTimer = sio2TimerInit( "myTimer" );
   sio2TimerCreate( myTimer, sio2->_SIO2window, myTimerCallback, 300 );
   sio2ResourceAdd( sio2->_SIO2resource, SIO2_TIMER, myTimer );
   
   sio2->_SIO2window->_SIO2windowrender = templateRender;
}


void myTimerCallback( void * item )
{
   static int animationFrame = 0;
   
   // Change the image
   myWidget->_SIO2material->_SIO2image[ SIO2_MATERIAL_CHANNEL0 ] = myImages[ animationFrame ];
   
   animationFrame++;
   
   if( animationFrame == 4 )
      animationFrame = 0;
}


void templateShutdown( void )
{
   sio2ResourceUnloadAll( sio2->_SIO2resource );
   
   sio2->_SIO2resource = sio2ResourceFree( sio2->_SIO2resource );
   
   sio2->_SIO2window = sio2WindowFree( sio2->_SIO2window );
   
   sio2ShutdownWidget();
   
   sio2 = sio2Shutdown();
   
   printf("\nSIO2: shutdown...\n" );
}


vec2 start;
void templateScreenTap( void *_ptr, unsigned char _state )
{
   if( _state == SIO2_WINDOW_TAP_DOWN )
   {
      // Set a flag to show we are being touched
      beingTouched = 1;
      
      // Start the animation timer
      sio2TimerPlay( myTimer );
      
      // Save our start x position so we can figure out where to move if TouchMoved gets called
      start.x = sio2->_SIO2window->touch[ 0 ]->x;
      start.y = sio2->_SIO2window->touch[ 0 ]->y;
   }
   else
   {
      // Reset the flag so our widget zooms back out
      beingTouched = 0;
      
      // Stop the timer
      sio2TimerStop( myTimer );
   }
}


void templateScreenTouchMove( void *_ptr )
{
   vec2 d;
   d.y = sio2->_SIO2window->touch[ 0 ]->x - start.x;
   d.x = start.y - sio2->_SIO2window->touch[ 0 ]->y;
   
   myWidget->_SIO2transform->loc->x += d.y;
   myWidget->_SIO2transform->loc->y -= d.x;
   
   start = *sio2->_SIO2window->touch[ 0 ];
}


void templateScreenAccelerometer( void *_ptr )
{
   
   
}


Also, declare the timer function callback ('myTimerCallback') in template.h:

Code:


void myTimerCallback( void * item );


Use the same environment as Tutorial07 as it flips the display in landscape (right) mode and
initialize the widget environment in EAGLView.mm, such as:

templateAppDelegate.m:

Code:


   // Flip the simulator to the right
   [[UIApplication sharedApplication] setStatusBarOrientation: UIInterfaceOrientationLandscapeRight animated: NO];


EAGLView.mm:

Code:


      // Required in order to initialize the widget
      // system.
      sio2InitWidget();


Anyhow, you should be able to click on the widgets and see it being scaled up/down as well as images being replaced, etc.
You can also drag the widget around and still have effects.

This is a neat example - thanks to uprise78 for providing it in the first place - This would be a neat complement to Tutorial07 or another separate one to add in the list. Should be linked to Wiki if not already.

Cheers,

--Frank

Thank you so much, now it's working.