Sprite Additions

I mentioned some additions I have been playing around with for 2d games in another thread (https://sio2interactive.forumotion.net/sio2-engine-f3/opengl-code-question-t496.htm?sid=6b879034b2ec5e2f119e929faa61e31c). As promised, here is the (incomplete) code. Rather than explain what it does, here is a commented example of how to use it:

Code:


   // Create a layer so we have somewhere to put our sprites
   P31spriteLayer *layer = p31spriteLayerInit( "myLayer", sio2->_SIO2window );
   p31spriteLayerSetBackgroundImage( layer, "bg1.png" );
   
   // Create a sprite with it's default image
   sprite = p31spriteInit( "mySprite", "a.png" );
   sprite->_SIO2transform->loc->x = 100;
   sprite->_SIO2transform->loc->y = 100;
   
   // Create a spriteAnimation with 4 frames and a delay of 0.2 seconds between frames
   P31spriteAnimation *anim = p31spriteAnimationInit( "myAnimation", 0.2f );
   anim->repeatCount = 20;  // Not setting a repeat count defaults to repeat forever
   p31spriteAnimationAddFrame( anim, "anim1.png" );
   p31spriteAnimationAddFrame( anim, "anim2.png" );
   p31spriteAnimationAddFrame( anim, "anim3.png" );
   p31spriteAnimationAddFrame( anim, "anim2.png" );
   
   // Add the animation to the sprite and start playing
   p31spriteAddSpriteAnimation( sprite, anim );
   p31spritePlaySpriteAnimation( sprite, anim );
   
   
   
   // Create a child sprite and set its position relative to it's parent
   P31sprite *child = p31spriteInit( "myChild", "girlSprite.png" );
   child->transformAnchor->x = 20; // relative to parent
   child->transformAnchor->y = 0; // relative to parent
   
   // Set the child sprites scale
   child->_SIO2transform->scl->x = 1.2f;
   child->_SIO2transform->scl->y = 1.2f;
   
   // Add the child to the main sprite
   p31spriteAddChild( sprite, child );

   // Add the sprite to our layer
   p31spriteLayerAddChild( layer, sprite );


Both sprites and layers can have actions added to them. Here is some example code for how to create and add different actions:

Code:


   // Rotate action
   P31spriteAction *rotate = p31spriteActionRotateInit( 0.7f, 180 );
        // setting reverseAction = 1 will make the action reverse itself back to the starting value when it completes
   rotate->reverseAction = 1;
   rotate->rate = 2.5f;  // Some easing functions take in a rate parameter.  Something between 2 - 5 works well
   rotate->easingFunction = P31_SPRITE_ACTION_TIMING_EaseIn;
   p31spriteRunSpriteAction( sprite, rotate );
   
   
   // Scale action with finish handler function
   P31spriteAction *scale = p31spriteActionScaleInit( 0.7f, 2.0f, 2.0f );
   scale->_P31spriteActionComplete = spriteActionCompleteHandler;  // This function will be called when the action is complete
   p31spriteRunSpriteAction( sprite, scale );
   
   
   // Move action
   vec2 *toPos = sio2Vec2Init();
   toPos->x = 100.0;
   toPos->y = 100.0;
   P31spriteAction *move = p31spriteActionMoveInit( 1.0f, toPos );
   move->rate = 2.0f;
   move->easingFunction = P31_SPRITE_ACTION_TIMING_EaseIn;
   p31spriteRunSpriteAction( sprite, move );
   
   
   // Fade spriteAction
   //P31spriteAction *fade = p31spriteActionFadeInit( 2.0f, 0.1f );
   //p31spriteRunSpriteAction( sprite, fade );


void spriteActionCompleteHandler( void * a )
{
   P31spriteAction *action = ( P31spriteAction * )a;
   
   NSLog(@"Finished action on sprite: %s", action->_parentSprite->name );
}


Here is a link to the download: http://www.4shared.com/account/file/96609440/e5516d2b/Archive.html

To set things up, just drop the two folders into the 'SIO2_SDK_v1.3.5' directory. You will need to open the SIO2StaticLib project first and compile for your target (or all targets). I usually just compile Simulator/Debug, Simulator/Release, Device/Debug and Device/Release so they are all done and ready. This will create a static lib of all of the non-SIO2 source files. When you clean/build your actual project it will only need to compile the SIO2 files and not the libPNG, lua, JPG, bullet, etc. Saves a ton of time.

Once you have the static lib compiled you can open up Widget Test and compile it. This is a simple example with two sprites. If you touch anywhere on the screen, a random spriteAction will be applied to the parent sprite with a random easing function and a different duration. Click around to see all the different combinations.

This project is far from complete. Off the top of my head, some of the items that would need to be added are:

- Make 'copy' commands for the actions for quick, easy reuse in the callback or when applying to multiple spries
- Remove 'p31' prefixes from everything and add the P31_SPRITE_LAYER to the sio2resource manager. I added them in the p31resource file to keep from modifying the SIO2 source
- 'by' actions, such as 'rotateBy', 'moveBy'. These would just add to the current transform
- Sequence actions. This would allow you to add multiple actions to a sequence and add the whole thing as one action to a sprite
- Collision detection? Perhaps it could be added or perhaps it would be best to do this on a per project basis
- Code cleanup!!

Hopefully, this will be useful to somebody out there...

Thanks

Hi,

I think SIO2 is a very impressive toolkit, but I am still trying to determine whether it is the right platform for the game I want to develop, which is 2-D. I am using these new sprites and it looks promising, although I understand there is much left to do here. Maybe I can even help with that. For testing, I can pop sprites onto the screen fine at a touch point, but I'm at a loss on how to detect if there is a sprite is already at the touch point without manually cycling through all sprites already created. Additionally, what is the strategy for collision detection between sprites once we start moving them around? Looking for a push in the right direction...

Thanks very much!
Scott

Have you looked at Cocos2D?


-j

Yes, I actually started with Cocos2d but after about 2 days decided it wasn't going to cut it. It's possible I'm wrong about that, but it was my gut feeling (I have quite a few things to learn about this as I am coming from mainly a .NET/SQL business app background). If it helps, the main function of my game is to route fluid on a flat surface. Think of a 2-D lava lamp using the accelerometer. The fluid needs to freely morph and combine with other fluid puddles when there is a collision and also break into multiple smaller puddles when colliding with a solid object. Do you really think Cocos2d is suited for this type of app better than SIO2?

Thanks very much!!

If I were you, I would look for C++ fluid dynamics libraries, and integrate that into SIO2, Cocos, or whatever you settle on.


Best,
-j

I was afraid of something like that. Thanks for the advice.

iisystem: Actually I was you what I would do is use SIO2 (still 3D but using a 2D ortho. perspective) with softbody physic using really low value... when you are talking about lava lamp you are almost talking about softbody physic... not really fluid physic from a certain point of view.

Softbody within Bullet can be cut (check the Bullet SDK for more info), for the "merging" I would simply write my own algorithm based on the vertex when a collision within a certain treshold of force happen merging the objects vertices together create a new softbody... This routine can be fairly easy to implement if you have a bit experience in 3D programming.

Thanks for the advice on softbodies. I will definitely look into this. I really want a true 2-D game however as what I'm doing is a hybrid puzzle/coordination game. I think you've done amazing work here and definitely want to use SIO2! I'll keep you updated and if you think of anything else, please let me know.

Thank you!!

Well, thank you sir for your 2d addition. I could defiantly use this in my app.

Have a nice day!

For anyone interested, I updated the sprite additions (p31 Sprite Additions) with a few new features:

- p31spriteLayers now have their first action available: SLIDE. You can slide up, down, left or right. Works good for animating menus and such.
- Support for PVR compressed textures has been added. It works transparently for any sprite images. Ex: p31spriteLayerSetBackgroundImage( secondLayer, "bg2.pvr" );
- Added a spriteLayer action complete handler
- A few bug fixes

The demo has been updated so that if you double tap you will see a slide transition from one p31spriteLayer to a second one. Code to slide from one layer to another is pretty simple:

Code:


                        int easingFunction = rand() % 9; // random easing function

         // Slide right or left depending on where are layers are currently
         unsigned int slideType = ( mainLayerIsOnLeft ) ? P31_SPRITE_LAYER_ACTION_SLIDE_LEFT : P31_SPRITE_LAYER_ACTION_SLIDE_RIGHT;
      
         P31spriteLayerAction *layerAction = p31spriteLayerActionSlideInit( 0.6f, slideType );
         layerAction->easingFunction = easingFunction;
         layerAction->_P31spriteLayerActionComplete = spriteLayerActionCompleteHandler;
         
         P31spriteLayerAction *secondLayerAction = p31spriteLayerActionSlideInit( 0.6f, slideType );
         secondLayerAction->easingFunction = easingFunction;
         secondLayerAction->_P31spriteLayerActionComplete = spriteLayerActionCompleteHandler;
         
         // Add the two layer animations
         p31spriteLayerRunSpriteLayerAction( layer, layerAction );
         p31spriteLayerRunSpriteLayerAction( secondLayer, secondLayerAction);
         
         mainLayerIsOnLeft = !( mainLayerIsOnLeft );

Hi,

Thanks for the sprite code; very useful.

Am I correct in that I can't use the p31 code to render the sprites on top of a 3d scene?

I have incorporated the p31 code into the tutorial 6 code (as an example) though I can't 'see' the 3d scene underneath.

Thanks,
FK

FK,

There are a few ways to do what you are looking to do. The easiest is to not give the P31Layer a background image and then must make a quick change to the p31_spriteLayer.cc file: just comment out the the glEnableClientState( GL_VERTEX_ARRAY ) and //glDisableClientState( GL_VERTEX_ARRAY ) lines. The full function is below:

Code:


unsigned char p31spriteLayerRender( P31spriteLayer *_P31spriteLayer, SIO2window *_SIO2window )
{
   if( sio2IsEnabled( _P31spriteLayer->flags, P31_SPRITE_VISIBLE ) )
   {
      // Render any actions before proceeding
      p31spriteLayerRenderActions( _P31spriteLayer );
      
      // Setup GL state
      glBlendEquationOES( GL_FUNC_ADD_OES );
      glBlendFunc( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA );
      glEnable( GL_BLEND );
      
      //glEnableClientState( GL_VERTEX_ARRAY );
      glEnableClientState( GL_TEXTURE_COORD_ARRAY );
      glEnable( GL_TEXTURE_2D );
      glColor4f( 1.0f, 1.0f, 1.0f, 1.0f );
      glBindBuffer( GL_ARRAY_BUFFER, 0 );
      

      glPushMatrix();
      {
         // Always applying the transforms first
         sio2TransformApply( _P31spriteLayer->_SIO2transform );
         
         // If we have a background image, render it
         if( _P31spriteLayer->_SIO2image != NULL )
         {
            p31spriteRenderTexture( _P31spriteLayer->_SIO2image, _P31spriteLayer->alpha );
         }
         
         // Render children
         int i = _P31spriteLayer->n_children;
         
         while( i )
         {
            p31spriteRender( ( P31sprite * )_P31spriteLayer->children[ i - 1 ], sio2->_SIO2window );
            --i;
         }
      }
      glPopMatrix();
      
      
      // Teardown state
      glColor4f( 1.0f, 1.0f, 1.0f, 1.0f );
      glDisable( GL_TEXTURE_2D );
      //glDisableClientState( GL_VERTEX_ARRAY );
      glDisableClientState( GL_TEXTURE_COORD_ARRAY );
      glDisable( GL_BLEND );
      
      
#ifdef SIO2_DEBUG_GL
      
      sio2ErrorGL( __FILE__, __FUNCTION__, __LINE__ );
#endif      
      
      return 1;
   }
   
   return 0;
}


Hi,

Thanks for the quick reply!

I tried your method- inserting the code into various tutorials- and it works brilliantly in the emulator.

However I am having problems running this on the actual device.

I have simply added the following to templateLoading() to set up a background with a sprite:

layer = p31spriteLayerInit( "myLayer" ); // Create a layer so we have somewhere to put our sprites
p31spriteLayerSetBackgroundImage( layer, "bg1.png" );
sprite = p31spriteInit( "mySprite", "a_4.pvr" ); // Create a sprite with it's default image
sprite->_SIO2transform->loc->x = 100;
sprite->_SIO2transform->loc->y = 100;
p31spriteLayerAddChild( layer, sprite ); // Add the sprite to our layer

and this to templateRender()

p31resourceRenderAllSprites( p31->_P31resource, sio2->_SIO2window ); // Render our sprites

This works fine on the emulator- I get a background and sprite- however when running on the device it appears to have a problem when it tries to load an image:

p31spriteLayerSetBackgroundImage( layer ,"bg1.png" );

I get the unusual error: 'Error from Debugger: Previous frame inner to this frame (gdbd could not unwind past this fame)'

The 'WidgitTest' demo works fine on the device, btw.

Have you any idea what could be causing this problem?

Thanks,
FK

Ah. I see this problem has already been addressed here:

https://sio2interactive.forumotion.net/sio2-engine-f3/sio2imageload-error-from-debugger-previous-frame-identical-to-this-frame-t453.htm?highlight=previous+frame+inner+to+this+frame

All working now!

Ta,
FK