UIView Subclass with Rotation & 3D Flipping

[McCarron]

Here is a first version of a code sample snippet of a class that has both 2D rotation and 3D flipping of the view. It also handles some basic form of moving the view, in this case moving the view off the screen so it can also be removed from it's superview.

It's something I tweaked with a lot and eventually got working to the level I was happy with for iBlackjack. I made some changes to that class before posting it here, no need for my logic for displaying what card it is, etc to clutter up the example.

I'm not 100% happy with the results of the rotation, because it makes the view distort when being moved after being rotated. But hopefully I can find a solution to this.

Here is a line of code to add it to another view:

McView *myMcView = [[[McView alloc] initWithFrame: CGRectMake(10.0f, 10.0f, 60.0f, 80.0f) showFace:YES] autorelease];
[myUIView addSubview: myMcView];

[stlcaddie]

can't wait....

[McCarron]

Originally Posted by stlcaddie

can't wait....

wait is over, posted it early. I can't claim it compiles, but it should.

[drunknbass]

you know there are alot easier ways to move a view and flip a page etc.
i posted code a lonnnng time ago on idevdocs.com and its also on my site here

http://www.monsterandfriends.com/?q=node/36

[McCarron]

Originally Posted by drunknbass

you know there are alot easier ways to move a view and flip a page etc.
i posted code a lonnnng time ago on idevdocs.com and its also on my site here

http://www.monsterandfriends.com/?q=node/36

I tried the oglflip method, and it was generating some nasty effects for me. Anything I was flipping with transparent or alpha blended pixels in my views were turning black when flipping.

Also using oglflip I have to create two image views to do the transition. So each playing card in my game then takes up 2x the memory than a single card would using the method I went with.

I tried to post up a question on idevdocs.com about it, but the admins wont validate my account.

Also, I don't see a way in that website to move the image. How would you do it other than altering the rectangle's origin point using CoreAnimation? I can't see it being much easier than that, but I want to try something else to see if it works after doing a rotate on an image without distorting.

[NetMage]

If you send them an email, they'll fix your account.

They were having trouble with validation.

Why do you need to create another view of each card for oglFlip?

[McCarron]

Originally Posted by NetMage

If you send them an email, they'll fix your account.

They were having trouble with validation.

Why do you need to create another view of each card for oglFlip?

I did, no response from them. I sent emails and PMs via the forum, no dice. I've decided to contribute here instead, much larger community so I think it's got more promise.

As far as the memory issue. There is maybe another way to be more optimized, but I never looked into it since the effect is so crappy with the black replacement of alpha transparent pixels. After I couldn't fix the graphical glitch and confirmed with another developer he saw the same problem, I never looked into optimizing it.

For the OGLFlip it's a transition animation, it has to go from one uiview sub-class to another. So I need to transition from one image (back of the card) to the other image (front of the card). So each instance of the class has to have two UIImageViews to perform the flip.

Instead the method I used here, is it only changes the layer image's contents when requested. So it does it while the card is flipped flat and unviewable, by calling to reset the layer's contents during a call to animationDidStop. This takes far less memory, and doesn't require two extra UIImageViews to transition between.

Sure OGLFlip takes care of the whole "reversed" image problem without having to use CoreGraphics to flip the image around, but the ugly graphical glitch is not worth it. Depending on the card theme I was using, some were just horrible looking when being flipped.

[drunknbass]

well you dont have to follow my code 100%. for animations like that you should be using layerkit to handle the animations.
also you even having both images in memory till the animation is finished should be fine as long as you release what you dont need after youre done with it.

[McCarron]

Yeah as I stated, I never worked on optimizing it since the effect was garbage. If I had pictures of the nasty black artifacts I'd show you, oglflip is obviously not perfect. I'd prefer to use CoreAnimation transforms for flipping. Gives me much more control over what happens after the animation.

Also the animations I'm doing in the class for moving, etc is a simple CoreAnimation (LayerKit) animator proxy. It's the same thing as working directly with the layer, works great for simple effects like moving, scaling, etc.

BUT because the iPhone uses an early version of CoreAnimation it may be buggy and may be causing my corruption issue when moving a view after it's been rotated. I'll have to try direct Layer manipulations instead to see if it fixes the problem.

[CyberGreg]

Originally Posted by drunknbass

you know there are alot easier ways to move a view and flip a page etc.
i posted code a lonnnng time ago on idevdocs.com and its also on my site here

http://www.monsterandfriends.com/?q=node/36

...and it looks awesome in my new iSwitcherAE, many many thanks!!!!!

[drunknbass]

Originally Posted by CyberGreg

...and it looks awesome in my new iSwitcherAE, many many thanks!!!!!

cool. glad it helped

Originally Posted by McCarron

I did, no response from them. I sent emails and PMs via the forum, no dice. I've decided to contribute here instead, much larger community so I think it's got more promise.

As far as the memory issue. There is maybe another way to be more optimized, but I never looked into it since the effect is so crappy with the black replacement of alpha transparent pixels. After I couldn't fix the graphical glitch and confirmed with another developer he saw the same problem, I never looked into optimizing it.

For the OGLFlip it's a transition animation, it has to go from one uiview sub-class to another. So I need to transition from one image (back of the card) to the other image (front of the card). So each instance of the class has to have two UIImageViews to perform the flip.

Instead the method I used here, is it only changes the layer image's contents when requested. So it does it while the card is flipped flat and unviewable, by calling to reset the layer's contents during a call to animationDidStop. This takes far less memory, and doesn't require two extra UIImageViews to transition between.

Sure OGLFlip takes care of the whole "reversed" image problem without having to use CoreGraphics to flip the image around, but the ugly graphical glitch is not worth it. Depending on the card theme I was using, some were just horrible looking when being flipped.

you can use regular affine transforms, but layerkit/CA supposedly works in opengl and other things to help accelerate the animations.

[McCarron]

Originally Posted by drunknbass

you can use regular affine transforms, but layerkit/CA supposedly works in opengl and other things to help accelerate the animations.

Yeah I used those regular affine transforms in older versions, before I got my hands on CoreAnimation documentation, I agree they are very sluggish.

I'm hoping it's a problem with the version of LayerKit we're using on the iPhone, since it's clearly not the final version of CoreAnimation.

Having a slight rotation on my iBlackjack playing cards and betting chips makes the game look much better and more "natural."