Tuesday Teaser: How Did I Do This Animation?

[J_A_Whye]

There’s a video at the following link that takes less than 2 minutes to watch:

http://instantvideowebpages.com/play/?m=664

It shows a piece of my upcoming game, Roly-Polies HD, and I want your best guess on how I’m making the mushroom bounce in the video.

Watch the clip and tell me which method you think I’m using, movieclip, sprite, etc. And if you have a reason why you think it’s done a specific way, go ahead and include your reasoning if you want.

I’ll let you know who’s right by the end of the day (end of the day in Alaska, which will be tomorrow morning in some parts of the world, I know).

Jay
[import]uid: 9440 topic_id: 10690 reply_id: 310690[/import]

[cl-apps]

By altering the newImageRect height?

[import]uid: 33866 topic_id: 10690 reply_id: 38781[/import]

[peach_pellen]

Hey J.A.

I’m going to guess it’s a transition using yScale - although seeing how complex your app looks (also awesome, by the way!) I’m thinking it will be somewhat more elegant than that

Peach [import]uid: 52491 topic_id: 10690 reply_id: 38785[/import]

[aaaron]

To me it looks like the image is somewhat compressing. I would have no idea how to do that so I guess I’m with cl-apps on this one. Glad you posted this though. As soon as you tell me, I’m gonna use it in my game [import]uid: 31262 topic_id: 10690 reply_id: 38807[/import]

[cl-apps]

Just done a little messing around, its not quite the same but similar, with further messing I’m sure I could replicate but I’m assuming there is something really simple we are all missing??

Anyway:

[lua]local dispObj_1 = display.newImageRect( “Icon.png”, 57, 57)
dispObj_1.x = 144
dispObj_1.y = 151
physics.addBody( dispObj_1, “static”, { density=1, friction=0.3, bounce=0.2 } )
local function squish(e)
function unsquish()
transition.from( dispObj_1, { time=500, height = 57 } )
end

if e.phase == “began” then
transition.from( dispObj_1, { time=500, height = 40, onComplete= unsquish } )
end
end
dispObj_1:addEventListener ( “touch”, squish )[/lua] [import]uid: 33866 topic_id: 10690 reply_id: 38820[/import]

[cl-apps]

Update, this looks better:

[lua]local dispObj_1 = display.newImageRect( “Icon.png”, 57, 57)
dispObj_1.x = 144
dispObj_1.y = 151
physics.addBody( dispObj_1, “static”, { density=1, friction=0.3, bounce=0.2 } )
local function squish(e)
if e.phase == “began” then
transition.from( dispObj_1, { time=300, yScale = 0.5 } )
end
end
dispObj_1:addEventListener ( “touch”, squish )[/lua] [import]uid: 33866 topic_id: 10690 reply_id: 38822[/import]

[amigoni]

You used magic!!! [import]uid: 8192 topic_id: 10690 reply_id: 38824[/import]

[cl-apps]

Full example:

[lua]display.setStatusBar( display.HiddenStatusBar )

local physics = require( “physics” )
physics.start()
–physics.setDrawMode( “hybrid” )
–physics.setDrawMode( “debug” )

local dispObj_1 = display.newImageRect( “Icon.png”, 50, 50)
dispObj_1:setReferencePoint( display.BottomLeftReferencePoint )
dispObj_1.x = 134
dispObj_1.y = 160
physics.addBody( dispObj_1, “static”, { density=1, friction=0, bounce=1 } )

local dispObj_2 = display.newImageRect( “Icon.png”, 57, 57)
dispObj_2.x = 204
dispObj_2.y = 68
physics.addBody( dispObj_2, { density=0.1, friction=0, bounce=1, radius=28 } )

local function squish(self, event)
if event.phase == “began” then
transition.from( dispObj_1, { time=600, yScale = 0.7 } )
end
if event.phase == “ended” then
dispObj_2:removeEventListener ( “collision”, dispObj_2 )
end
end
dispObj_2.collision = squish
dispObj_2:addEventListener ( “collision”, dispObj_2 )[/lua]

Ok, how’s it done? lol

[import]uid: 33866 topic_id: 10690 reply_id: 38823[/import]

[J_A_Whye]

Wow, if nothing else, cl-apps gets honorable mention for being thorough!

I have to run to the bank and do some errands, so in a few hours I’ll be back with the answer. If anyone else wants to guess before then, feel free!

Jay

PS - Telling people to keep guessing is NOT me implying that current guesses are wrong. Or right. [import]uid: 9440 topic_id: 10690 reply_id: 38844[/import]

[cl-apps]

I did a little downloadable version too: Link [import]uid: 33866 topic_id: 10690 reply_id: 38856[/import]

[awinograd]

I haven’t used the joints before, but it looks like that could be done with a distance (or maybe piston) joint that has a compressing force acting upon it b/c of the weight of the roly poly. the bottom of the mushroom would then have to be welded in place or something. [import]uid: 49205 topic_id: 10690 reply_id: 38866[/import]

[DVD_Guy]

I’m guessing that cl-apps has it right, except that the transition is two-phase (for a realistic bounce) rather than one. [import]uid: 5742 topic_id: 10690 reply_id: 38873[/import]

[cl-apps]

So what was the solution to this mind bender? [import]uid: 33866 topic_id: 10690 reply_id: 38992[/import]

[aaaron]

it’s now the next day. You Alaskans aren’t that far behind are you? [import]uid: 31262 topic_id: 10690 reply_id: 39026[/import]

[J_A_Whye]

Nobody guessed movieclips.

Nobody guessed sprites.

Why is that? Those are the most obvious ways to do animation.

But no, I didn’t use those. Simply because I had a single picture and didn’t want to hire someone to create multiple frames for the animation. So while I wish the solution was more elegant, as Peach said, most people guessed the answer…

…I changed the yScale with transition.to() to compress the image, and then called it again to expand it.

The “secret” to doing that and making it look good is to set the reference point of the object to the bottom, otherwise you get both the top and bottom compressing toward the middle.

If you had a bumper that needed to boing from a hit on the side, you could do the same thing – set the reference point to the side that should stay anchored, and then do an xScale on the object.

While I used two transition.to() calls for making the boing, one to compress and one to expand, @cl-apps example code shows just a single call to transition.from(), so there are multiple ways you can use this technique to tweak things so it works best for your situation. I was looking for more control over each phase of the animation which is why I went with separate calls.

Using a compression for animation may not work well in all cases, but for this quick animation on a smaller object, it fit the bill perfectly.

Thanks to everyone who played along.

Jay
[import]uid: 9440 topic_id: 10690 reply_id: 39052[/import]

[cl-apps]

Good explanation

Any chance there will be a weekly Tuesday Teaser? That was pretty fun…

[import]uid: 33866 topic_id: 10690 reply_id: 39066[/import]

[awinograd]

Does changing the yScale of the mushroom also change its physics body? That doesn’t happen for me. [import]uid: 49205 topic_id: 10690 reply_id: 39079[/import]

[J_A_Whye]

Hmmm…good question. For my purposes it didn’t matter whether the physics body changed or not so I can’t tell you one way or the other. I just use the spring animation for looks, the Roly-Poly bounces off the shroom before the spring actually happens, but it’s so close that it looks like they’re happening at the same time.

Jay
[import]uid: 9440 topic_id: 10690 reply_id: 39090[/import]

[egypt]

I would suggest stretching it out in the X axis a little bit as you squash it on the Y; this will make it feel much more visceral. If you want it to feel extra-rubbery you could even do Y1 X1, Y.7 X1.3, Y1.1 X.9, Y1 X1 to give it a little springiness. Maybe even throw in Y.9 X1.1 before going back to Y1 X1.

In general, when you scale things in only one direction, you lose visual mass. Take a rubber ball and squish it; it not only compresses in the direction you’re squeezing, but will squish out to the sides. (For a really visceral demonstration of this, ask Youtube for videos of slow-mo jello.) By modeling or caricaturing this behavior, you can make everything feel a lot more solid. [import]uid: 66150 topic_id: 10690 reply_id: 39291[/import]

[gibsonpa]

J. A. Whye,

Your game looks AWESOME!!

One of the many amazing things about your game are the graphics (like the background images, etc). You also mentioned “not wanting to hire someone to your mushroom example”

As a beginning Corona users, I am finding the hardest part to be getting good graphics for my ideas. Currently I am using istockphoto and depositphoto…but your stuff looks so amazing.

Do you have any tips for a struggling developer =) Do you do them all yourself or buy from some website then modify or use tool xyz, or ???

Any help would be much appreciated.

Thanks,
Paul [import]uid: 39506 topic_id: 10690 reply_id: 39330[/import]