Adding depth to a sprite in Cocos2d - ios

i have a 2d object, something like a square grid. I would like to add some depth to it so it looks like its going off into the distance so the top left and right points of the square should get closer together, something like looking down a long road. I currently have the square make on a 2d surface and it looks fine i was just wondering if theres a method in Cocos2d that will rotate the square and give that effect. I've tried using
CCFiniteTimeAction* action = [CCActionTween actionWithDuration:7 key:#"scaleY" from:.5 to:1.2];
[self runAction:action];
but that only seems to decrease the length and width of the square and not actually adds any depth to it. I found CCTransitionFlipY which seems like it would give a desired effect but it looks like that is only for Scenes. Any help into this would be awesome!

Found a nice solution here. I used CCOrbitCamera to get the desired effect!

Related

I need help to draw an icosahedron 3D object in an UIKit app

Although I am quite experienced with most frameworks in iOS, I have no clue when it comes to 3D modelling. I even worked with SpriteKit, but never with something like SceneKit.
Now a customer wants a very ambitious menu involving a 3D object, an 'icosahedron' to be exact. I want it to look something like this:
So I just want to draw the lines, and grey out the 'see-through' lines on the back. Eventually I want the user to be able to freely rotate the object in 3D.
I already found this question with an example project attached, but this just draws a simple cube: Stroke Width with a SceneKit line primitive type
I have no clue how to approach a more complex shape.
Any help in the right direction would be appreciated! I don't even need to use SceneKit, but it seemed like the best approach to me. Any other suggestions are welcome.
to build an icosahedron you can use SCNSphere and set its geodesic property to YES.
Using shader modifiers to draw the wireframe (as described in Stroke Width with a SceneKit line primitive type) is a good idea.
But in your case lines are not always plain or dotted — it depends on the orientation of the icosahedron. To solve that you can rely on gl_FrontFacing to determine whether the edge belongs to a front-facing or back-facing triangle.

Growing a visual tree with rectangles?

Given rectangle-shaped bars (say, of size 50x10), how would I grow-draw them to something that looks like a tree? A starting point is given where a semi-randomly bar is added, and then a new bar or two are added to every end of the old rotation, rotated by themselves, and with new bars added at their end, and so on to some point. I suppose it's a geometry question -- how do I find the correct bar ends to stick the new rotated bar too?
I'm using Lua, but any pseudocode would help, thanks!
Have a look at L-systems. They can be used to create plant-like structures. The Wikipedia article has many references to sites where you can toy with these.
Let's see if I understand well the core of your problem: you have a segment (bar) which you rotate around one of its sides by some angle and you want to know the position of the other end of the bar after that.
Isn't what you're looking for just the geometric definition of sine and cosine?
See below, sorry for my awful drawing skills :)
To make it "stick" just rotate around the right corner of the rectangle depending on the angle, like so:

Should I use a sprite(image) or should I draw?

Below is a screenshot from a famous structure building game.
As you can see rods are attached together with ball joints. I'm trying to achieve something similar with Cosos2d on iPhone. I've got two questions here:
Should I draw those ball joints or should I just add them as sprites?
I guess the rods are not drawn bur are rather images. But considering that the length of the rods will change depending on need, how do I make rods with different lengths from just one image?
I am not sure what would be the best approach for one. I would imagine that either way would be fine, but it would be harder to achieve whatever visual affect you want through drawing them. I think the hardest part would be making sure that they are anchored to vertices in a grid system that has the dimension that you want.
As for (2) you can always scale your image.
CCSprite *rod = [CCSprite spriteWithFile:#"rod.png"];
rod.scaleY = 2.0; //or scaleX
Then rotate and change its anchor points as needed.
Again I imagine the most difficult part would be anchoring them and positioning them correctly, so that align properly with the vertices.

Simple iOS particle emitter

Is there a simple way to do a bunch of 2d particle images using core animation like the star particle animation in Draw Something?
Particle animation in Draw Something
I found this link which get's me 90% of the way there. It shows how to emit particles using UIImage which is just what I need. I just need some help tweaking the particles so they spew out like the Draw Something button and not like their fire example and I want to randomize the colors of the particles and make them glow.
http://www.raywenderlich.com/6063/uikit-particle-systems-in-ios-5-tutorial
Okay, just found this which got me the rest of the controls I wanted. The variable I was looking for on the emitters was yAccelleration. Set it to a positive number to make it go down.
http://developer.apple.com/library/mac/#samplecode/Fireworks/Listings/AppController_m.html
Hope this helps someone else!

How to scale on-screen pixels?

I have written a 2D Jump&Run Engine resulting in a 320x224 (320x240) image. To maintain the old school "pixely"-feel to it, I would like to scale the resulting image by 2 or 3 or 4, according to the resolution of the user.
I don't want to scale each and every sprite, but the resulting image!
Thanks in advance :)
Bob's answer is correct about changing the filtering mode to TextureFilter.Point to keep things nice and pixelated.
But possibly a better method than scaling each sprite (as you'd also have to scale the position of each sprite) is to just pass a matrix to SpriteBatch.Begin, like so:
sb.Begin(/* first three parameters */, Matrix.CreateScale(4f));
That will give you the scaling you want without having to modify all your draw calls.
However it is worth noting that, if you use floating-point offsets in your game, you will end up with things not aligned to pixel boundaries after you scale up (with either method).
There are two solutions to this. The first is to have a function like this:
public static Vector2 Floor(Vector2 v)
{
return new Vector2((float)Math.Floor(v.X), (float)Math.Floor(v.Y));
}
And then pass your position through that function every time you draw a sprite. Although this might not work if your sprites use any rotation or offsets. And again you'll be back to modifying every single draw call.
The "correct" way to do this, if you want a plain point-wise scale-up of your whole scene, is to draw your scene to a render target at the original size. And then draw your render target to screen, scaled up (with TextureFilter.Point).
The function you want to look at is GraphicsDevice.SetRenderTarget. This MSDN article might be worth reading. If you're on or moving to XNA 4.0, this might be worth reading.
I couldn't find a simpler XNA sample for this quickly, but the Bloom Postprocess sample uses a render target that it then applies a blur shader to. You could simply ignore the shader entirely and just do the scale-up.
You could use a pixelation effect. Draw to a RenderTarget2D, then draw the result to the screen using a Pixel Shader. There's a tool called Shazzam Shader Editor that let's you try out pixel shaders and it includes one that does pixelation:
http://shazzam-tool.com/
This may not be what you wanted, but it could be good for allowing a high-resolution mode and for having the same effect no matter what resolution was used...
I'm not exactly sure what you mean by "resulting in ... an image" but if you mean your end result is a texture then you can draw that to the screen and set a scale:
spriteBatch.Draw(texture, position, source, color, rotation, origin, scale, effects, depth);
Just replace the scale with whatever number you want (2, 3, or 4). I do something similar but scale per sprite and not the resulting image. If you mean something else let me know and I'll try to help.
XNA defaults to anti-aliasing the scaled image. If you want to retain the pixelated goodness you'll need to draw in immediate sort mode and set some additional parameters:
spriteBatch.Begin(SpriteBlendMode.AlphaBlend, SpriteSortMode.Immediate, SaveStateMode.None);
GraphicsDevice.SamplerStates[0].MagFilter = TextureFilter.Point;
GraphicsDevice.SamplerStates[0].MinFilter = TextureFilter.Point;
GraphicsDevice.SamplerStates[0].MipFilter = TextureFilter.Point;
It's either the Point or the None TextureFilter. I'm at work so I'm trying to remember off the top of my head. I'll confirm one way or the other later today.

Resources