Spriteloq Tutorial: Applying Physics Shapes

Applying Physics Shapes
Hey Everyone, This is Don from Loqheart
in this video I want to show you, how you can use the latest version of Spriteloq
in order to create shapes
for your sprites
so you can get them into your Corona® apps
and apply physics to them
you can find out more about this feature on
our new Spriteloq subforum on the Corona® forums
and you can also head over to our website
and check out our video and docs section
for information on the API
in the API Library Docs
you can head over to the loq_sprite module and there is an example in here
adding physics properties with
the addPhysics method
that we added to the
SpriteGroup instance
and here you can find a little bit of sample code
that that walks you through
how to get physics for your sprites into your Corona® app really fast
but in this video
I'm going to show you sample app that I put together
And it'll show you how to get
your shapes out of flash
into Spriteloq
get some collison boundaries on them
and create a simple application
so the first thing is I created a whole bunch of different shapes here you
can see I have a
box
circle
a long, rectangle. I'm calling it a plank
star
a red triangle and a purple triangle
and see if you look carefully
the reference points
or the registration points
for each of these objects is a little bit different
this is going to be really important when we
bring these into Spriteloq to create shapes for them as you'll see
how they will eventually
affect the position
of the object in the application
so
as always first thing you want to do
is you want to go to 'Commands' and 'Export Library as SWFs'
and
then we'll get all of these into Spriteloq
so I'm going to load up
all of our shapes here
and I'm going to walk-through all the new tools we have for drawing shapes
I want to draw a box for this box
and we access the shape tools by dragging down the controls panel here
notice we have a new 'Shape Controls' section
and this first tool
basically switches us into 'shape mode'
where we can draw shapes and view the shapes
on our sprites
so first thing you always want to do is click on that
and then in this case I want to draw a a box polygon
for this box shape
so I just click there notice my cursor changed
and I'm going to
draw a box over my box
and let go
and there I have my box
notice that the delete icon here lights up so you can remove that
and I'll go ahead and do that and draw it one more time
ok, and so we have a box
now for our circle
I'm going to enter 'shape mode' again
click on the circle polygon tool
and to try to center this
and then click and drag
to create a circle that matches
and what you notice over here is that
in Corona® when you create a circle it's centered around your reference point
sometimes that that's not useful sometimes you actually want to have your
circle off-center in this case
our reference point is in the upper left corner over here
and so
what Spriteloq does is when it creates a circle it actually generates a polygon
so all these circles that you see around here are anchor points for a polygon
and when this gets exported it actually
gets triangulated this will be explained
more clearly when we see application
but basically all these points give us a circle
for this plank
i'm not actually going to create a physics body for it but i want to show
what I want to show is that if you don't
draw anything on a rectangular .. or if you don't draw anything on your sprite
it'll end up using
this bounds rectangle to create
a physics body for it
a collision body for it
and so i'm gonna leave it as is
and go to the star
and with the star I'm going to draw
our polygon
with the polygon tool
and with this tool you can create a convex or concave polygon
in this case the star is a concave polygon
so I'm just really quickly going to
click on the vertices
and notice is how
with three clicks a triangle formed
with a fourth click now we have this intersecting polygon
and I'm going to continue to click
until we get our star
ok, and so I have my star but it's not quite finished yet
the thing about the polygon tool is that
in order to close off your polygon you have to
click on the 'Create Polygon' tool again
and then you see the delete button light up so that means
that the shape has been saved
notice that this tool has circles like the cicle tool
and that means you can actually click and drag these anchors
and you can adjust the position
of the vertices
of this polygon
you might have noticed these anchors didn't appear on the box tool
because the box tool is a special case
the only way to resize the box now is to delete the box
and redraw it
there we have our star
next thing I want to do is take a look at this purple triangle
but what I'm going to do is skip drawing a shape for the
purple triangle
and I'm just going to do it for the next one
the red one
I'll show you an interesting
thing about this later on I'm going to
use the collision shape of this red triangle
for the purple triangle
so this will be an example of how you can basically use one shape and apply
it to a lot of different sprites
so three clicks and so I have my triangle
and click there and I save it. but I'll just do a little quick adjustment here
ok I think that'll be pretty good
now can just right click and select everything in the asset list and pack it
and i'm going to export my sheet
into my project folder
and save it
So I'm going to show you the project now
so there you go that was really quick
and you can see we have a bunch of physics
going on
the circle
is kind of rolling around like a circle the triangles a trianglle but
purple triangle is a little weird the star bounced off stage really quick
I'm going to reposition things a little bit and slow the physics
to get a better look at what's going on
I'm going to set the scale to just 60
to slow things down a little bit
and maybe I'll
adjust it to 80 ok there you go
with the star I'm going to lower it a little
see what that does
so you can see that a little bit better
so what I'm going to do now is switch from the normal drawing to hybrid mode
so can see the polygons
that were created
basically all the shapes are as you would expect
notice that the plank
also has
a physics body and that the triangle does as well even though
specify them
and I'm going to walk you through some of the code here
real quick for this project
the first thing is I just draw blue background and then i'm going to
require the physics module
start it up
setup its gravity here
and here I set the scale
and here I'm drawing it as 'hybrid'
and here I'm loading up 'loq_sprite'
but I'm not saving the module I'm just going to create a factory out of it and
and load in the spritesheet
and I'm going to call that SpriteFactory 'sf' for short
then I
create a whole bunch of physics bodies here
but the first thing I do is
create a sprite for a circle
once I have that circle I can call 'addPhysics'
and I pass in the physics module
the type of
physics body it is and its 'dynamic' and its properties: density, friction, bounce
basically the spritesheet that we loaded up contains the
shape data for the circle
and so when I call 'addPhyics' it automatically looks that up
and applies it to the SpriteGroup
and here I do some positioning
I do the same thing for the triangle, purple triangle, box, star, and the plank
and so
the interesting thing here is that for the purple triangle
it's actually a 'kinematic' body meaning that's not affected by gravity
or
and it's not like
it's velocity is not going to be affected when something collides with it
but the physics body
looks kind of weird right it matches the
the frame of the sprite and that's not exactly what we want. we want it to behave like
a triangle
remember it back in Spriteloq we never specified a physics body for it
here we did it for the red triangle
but not the purple one
so what I'm going to show you is a way to reuse a physics body
we're going to pass in another parameter here
at the end of the purple triangle 'addPhysics' call, add a comma and then
I want to
give it the triangle's
physics body
I'm basically taking the red triangle's
physics body that we specified here and I'm going to apply it to purple triangle
so I'm going to save that
and back in our application
notice that
the red triangle slid off
because this purple triangle now has a proper
physics body applied to it
the last thing
to note for this plank it also had no
physics body
but it ended up getting a rectangular body
the interesting thing to note about that
if you
if you do this 'addPhyics' call and you don't specify anything
then it'll automatically have
the bounds rectangle
shape applied
to the sprite for its physics body
the last thing I have in this demo is
since
this purple triangle is a 'kinematic' body I added a touch event handler to it
here 'onTouch'
so you can drag around and see how this triangle will affect
the other physics bodies
one thing to note is that
since the circle is a really complex. It's basically a combination of
a lot of triangles as you can see in this hybrid mode
if you get other really complicated bodies colliding with other complicated bodies
or complex bodies
you might end up getting objects stuck inside each other
and that's really a side effect of Box2D
so you should just be careful with
complex objects in general try to keep your objects simple if you can
the last thing i want to talk about is the profiler you see up here
you've probably seen this
in the source code but I just want to give it a quick mention
basically you can instantiate that here at the bottom
calling loq_profiler
well requiring loq_profiler 'createProfiler'
and what does is it gives you a
frames per second graph as well as an
application memory usage graph
here you can see the memory and
texture memory for any spritesheets that you've loaded
the instant frames per second as well as the average frames per second
and you can see min and max for these here
there you go there's an example of physics
done really quickly using Spriteloq
with the circle stuff
it works even though the reference point is off center
I hope you enjoy this feature
let me know what you think of it
on the forums and
please the checkout
our twitter feed as well
and thanks for watching!