I am interested in creating a blending effect for a screen transition that takes the current view and pixelates the view and fades out.
The blueprint would be from Super Mario World on the Super Nintendo / Super Famicom.
I attached a YouTube video of this effekt. You can see it at 0:50 before "Mario Start" is shown.
https://www.youtube.com/watch?v=naD6mNeHIsE
I wanted to implement this blending effect in an iOS game in Objective-C or Swift. That does not matter at the moment. I am interested in how this effect can be achieved.
Anyone got a hint or an idea?
I think this can be done with next steps:
1) Take image that you want to mosaic
2) Read it pixel data colors
3) Calculate average colors based on tile size
4) Draw tiles with average color on new image
5) Display new image
6) Change tile size and repeat from step 2)
I think this scenario with using CoreGraphics will have performance problems.
Another choice - use awesome GPUImage and GPUImageMosaicFilter. Check sample code - it have GPUImageMosaicFilter implemented.
Related
i wonder how the following effect could be made in Swift (SpriteKit).
I think about adding some ShapeNodes and fill them with the background image with -yscale 1.
But i think this effect was made somehow different, because the background image isn't just mirrored horizontally - it also has some graphics effects on it (it is mirrored in the shape the water pearl has and so on).
Was it done with a ShaderNode?
Does someone has an idea how i could create a same effect in SpriteKit - like water pearls which looks like they are on the "camera" and they mirror the background "waterpearl like"?
Thank you.
Hmm well you could create a bunch of water images and have them displayed randomly on the screen at some z position, however I think this effect was made in another program like unity or something of the sort, Your best bet is to create transparent water droplets as images and have them displayed randomly on your screen.
Can I do this?
My question arises from the need of a button that I'm animating when a user touches it.
This animation has been made with a set of 30 png images (half a second of animation # 60FPS). This totals 60 images for regular and retina screens. It works quite well this way, but I'm not happy about it.
My goals are:
1 - Drastically reduce the size of my app (e.g my background is a 400KB png file, but with quartz I can do it with a dozen lines of code).
2 - Do with it with a perfect, smooth animation, as light on the CPU/GPU as I can.
So, is there anyway I can do this?
I have the images in pure vector, and I can draw them with Quartz. But not animate it without having to redraw everything for every frame. (Well, the animation is a "2 way street", it's the coming back that would be problematic to redraw)
Are there any APIs/Frameworks that would help me do this? How would I go about it?
Thank you!
Take a look at CAShapeLayer. It's path property is animatable. For an animation to look good it's important that the from & to shape in the animation have the same amount of points. So depending on your shapes this might or might not work.
We are building an iPad kids application in which a kid is requested to color different shapes with specific color. For example, consider an image with sky and trees , etc. all overlapping and a kid has selected a color for example "Blue" and then he taps the sky , the sky should turn to blue otherwise it should say "wrong color"
My questions are:
1- How to implement the coloring of the sky only with the selected color. We have implemented a Coco2d Floodfilling but it is too slow.
2- How to tie each part of the image with a specific right color. We suggested loading a fully colored image in a background layer and testing it at the tap .... BUT how to implement it.
Thanks
Are the shapes originally vectorial? If so, a solution would be to work directly with them as vectors, parsing them into CoreAnimation shapes.
You can give a try to SVGKit or get some inspiration from it. You'll get CAShapeLayers where you can change the fillColor property.
I believe that this way would be much more responsive (and the app size much more lighter) than doing tricks with images ;-)
I am looking into making an iOS app that has little creatures. I plan on having these creatures grow and change shapes based on user interaction. So the creatures could end up looking very different based off what the user does.
My problem is animating these creatures. I have dealt with simple animations in the past with cocos2d, but nothing like this.
How can I animate these creatures being different sizes and shapes without having my graphic designer draw every possible image that could be used. In the game spore a user can create an animal of whatever shape or size they want and these animals animate. My question is how can I do something similar in 2d? I know this can't be a simple answer, but a point in the right direction is all I am looking for.
You could use some CGAffineTransforms to scale your drawing and custom filters with Core Image maybe to change the color.
Im starting with XNA and i need an advice about the following.
I have a .jpg file with my space ship game background with the following size:
width: 5000px
height: 4800px
When i try to load the texture i get the following error:
Texture width or height is larger than the device supports
What is the most used technique to move the background at the same time that your ship is moving?
Thanks a lot.
Kind Regards.
Josema.
One way would be to separate your image into smaller tiles and draw the visible ones.
However this technique suffers from a problem when bilinear sampling is used, because the colors bleeds from the one side of the texture to the other. You can probably compensate by disabling texture WRAP sampling or by grabbing a single of pixels from the tiles next to.
For example if you want 256x256 textures, you would only display 255x255 tiles, because one line (right and bottom) is a copy from the tiles next to it.
Hope it makes sense, otherwise I'll have to paint a picture :-)
The texture limit is determined by graphics card, I believe.
You want to break the texture down to smaller images.
Try something like this. He's tiling a simple 40x40, but you might use it a a guideline on how to tile yours.
http://forums.xna.com/forums/p/19835/103704.aspx
To move the background at the same time that your ship is moving you can implement a camera.
The following links might help-
http://adambruenderman.wordpress.com/2011/04/05/create-a-2d-camera-in-xna-gs-4-0/
http://www.dreamincode.net/forums/topic/237979-2d-camera-in-xna/