iOS: CAEmitter Layer and EmitterCell Flips Image on iOS 6 - ios

Was playing around with CAEmitterLayer and discovered something really weird.
I set up the CAEmitterLayer at the lower left corner, positioned at 45 degree (pointing towards the top right corner) and tried to shoot some arrows toward the top right corner.
Everything worked, except the image that I set via the content property of the cell.
Here is the original image on iOS 7 device:
When run on iOS 6, it becomes like this:
Has anyone experienced this and do you know why this is so? Having two sets of images and check whether the device is iOS 6 or iOS 7 and set the image up accordingly is not a problem for me, but my curiosity urges me to find out why this is so. Thanks in advance.
I am using Xcode 5.

This is normal behaviour in CAEmitterLayer. It uses a different coordinate system than the rest of iOS. As it was a technology derived from MacOS its origin (0,0) is located at the bottom left, while in iOS the origin is located at the top left. When the picture gets drawn it causes the image to get flipped. CAEmitterLayer was not really designed to use images like that, mostly made for particle systems that do not require a specific orientation.
The simplest solution to this would be to flip the image yourself so when CAEmitterLayer flips it again it will appear like you want it. This might have gotten changes in iOS7 so you would have to do a version check and apply the correct image.
You could also flip it in code if you wanted. This is a short code that does it:
UIImage *flippedPicture = [UIImage imageWithCGImage:picture.CGImage scale:1.0 orientation:UIImageOrientationLeftMirrored];
Source: http://www.vigorouscoding.com/2013/02/particle-image-gets-mirrored-by-uikit-particle-system/

Related

Scaling SVG past unknown threshold causes elements to disappear

I'm using openseadragon with the excellent svg overlay plugin.
On Chrome, the app behaves as expected: users can tap to zoom in until a table rendered in SVG is fully visible, the note on the table is legible.
Here's the link to the demo. Zoom out to see the SVG version of the table appear, overlaying the fuzzy raster version of the background.
On Safari on iOS or OSX when zooming past a seemingly arbitrary threshold the table and everything on it start to disappear. The point of disappearance seems to depend on other factors I don't understand, hence this question for insight. For example, a orange circle drawn with two.js will disappear when the scale transform is precisely 51201 (at 51200 the circle is there). For the more complex table SVG, elements on the table will disappear at different scale levels, between ~23000 to 50000. Sometimes they'll disappear and then reappear upon a slight zoom in. Sometimes they'll disappear on zoom and then reappear as I pan around, the objects nearing the edge of the viewport.
IE 11 has a very similar issue.
Has anyone dealt with this before or solved it?
That's a really slick project!
In my experience, that kind of problem with SVG disappearing has to do with extreme amounts of zoom. The good news is you should be able to work around it by changing your viewport coordinates. By default the width of the image is a viewport value of 1, but you can set your image to be width 10,000 or some such, which will look exactly the same on the screen, but it means that the SVG thinks it's zoomed out a lot at first, so when you zoom in you can go a lot further.
If you're using two.js, another possible fix would be to switch over to canvas rendering and use https://github.com/altert/OpenSeadragonCanvasOverlay.
Btw, I'd love to share your project when it's done... please file a ticket at https://github.com/openseadragon/site-build/issues when you're ready and we can add it to http://openseadragon.github.io/examples/in-the-wild/.

iOS9: Tiled images from asset catalog are repeating edge pixels (Xcode, Objective C)

Here's a fun one: in iOS8, repeating an image was as simple as using 0px edge insets and setting the center to "Tiles." On iOS9 however, the images do not tile. Instead, the blank space copies the edge pixel forever - and not from the sides I would expect:
Perhaps I'm doing this wrong? Is there a better way to achieve a tiled background?
I found a workaround. For some reason, if you only slice the image horizontally, the image tiles correctly. I DO NOT recommend this to anyone here looking for a quick fix, as I do not know how this affects previous versions of iOS. Or why it even works in the first place. If anyone can provide a better answer, I'll accept it instead.

Specific position of WKInterfaceImage alignment (Watch OS 2)

I just bought the Apple Watch and I want to create a super simple game for it.
It is simple enough to only use monochrome color scheme, but advanced enough to have an object moving in real-time.
I am trying to figure out how to position an object on my Apple Watch with Watch OS 2.
I want to place my object somewhere on the screen (anywhere I'd like to) but there are absolutely
no way to do that, I think.
But, in the following library: https://github.com/shu223/watchOS-2-Sampler
the developer can actually animate the alignment of the image so I guess
that itself suggests it should be possible to somehow specify a point of where to position an object.
And the animation is pretty smooth as well.
I have tried to generate frames on-the-fly CGContext which uses Quartz 2D, but it's way too slow and the app on my Apple Watch just crashes.
I don't necessarily think that the watch itself is too weak, but some clever programming should solve my problem, but I just cant figure out how to do it.
As you already said there is no way to directly position an WKInterfaceObject on your watch. You can change the alignment of an object but that leaves exactly 3 positions: left, center and right. Probably not enough for your game.
What you could do: You can set a background image on a WKInterfaceGroup. So you could draw your game objects into an UIImage and set that as background image of that group. That background images can also be animated. So maybe you can draw the movement of your game object into several UIImages and then set those as animated background image.
One way that I have found to have a little more control over where a WKInterfaceObject is on the screen is to add it to a parent WKInterfaceGroup, and center your item (vertically and/or horizontally depending on how you want to move it). Then you can tweak the group's relative height / width (setRelativeHeight and setRelativeWidth) and it's alignment (setVerticalAlignment and setHorizontalAlignment) to get your item positioned where you want.
This doesn't give you the ability to tweak frames or give the item a particular coordinate, but it does give you the ability to programmatically move a WKInterfaceObject anywhere on the screen.
For example if you want your object in the exact center of the screen vertically, you leave the group's relative height to its container as 1, with your item centered. To get the object at 40% from the top, you can change the group's relative height to 0.8 and it's alignment to .Top. If you want it 60% from the top, the relative height would still be 0.8, but the group's vertical alignment should be .Bottom etc.
I know this is kind of a confusing way to have to accomplish this, but this worked for me in getting items positioned exactly how I wanted.

Graphics glitch in the transparent regions of a ImageView rotated with CGAffineTransformRotate

Im writing an application for the iPad and I have a strange graphics problem.
I have a UIImageView, with transparent regions, that is being rotated using CGAffineTransformRotate.
My problem is that a lot of the graphics behind the image view (in the transparent regions) is repainted and appears to move very slightly from side to side, creating a very noticeable and annoying glitch. It only occurs in the transparent regions and everything outside of the rotated image view is looking still.
Anyone know what might be causing this bug? And is there a way to fix it? (I could maybe convert the entire thing to Open GL, but that would be a big work around...)

iOS 7 Camera.app horizontal 3d transform

I'm really interested in this effect introduced in iOS 7 Camera app:
http://i41.tinypic.com/2a0hwk8.jpg
Notice, how "Pano" option is transformed - as if it is goes on a circular path to the right and dissappears. What kind of transformation can achieve this effect? Any help would be appreciated.
Thanks
It is probably a transform that is applied and adjusted when the view in question (the label) reaches a certain position (which would normally be done with KVO or similar).
However, a good place to start would be the iOS 7 picker view, which has a similar 3D effect, but in the vertical rather than the horizontal. They are probably achieved the same way, and the advantage with the picker is you can inspect its view hierarchy in your own apps.

Resources