Cocos2d - hiding, clipping or masking sprite like in game Candy Crush - cocos2d-iphone

I have a problem and I saw it also in the game Candy Crush Saga, where they successfully dealt with it. I would like the sprite to show only when it is in the board (see image link below). The board can be of different shapes, like the levels in the mentioned game.
Has anyone some ideas how can this be achieved with Cocos2d?
I will be very glad if someone has some tips.
Thank you in advance.
image link: http://www.android-games.fr/public/Candy-Crush-Saga/candy-crush-saga-bonus.jpg

In Cocos2d you can render sprites at different z levels. Images at a lower z-level will be drawn first by the graphic card and the images (sprites) with a higher z-value will be drawn later. Hence if an image (say A) is at the same position of the other but has a higher z-value you will see only the pixels of image A where the two images intersect.
Cocos2d uses also layers so you can decide to add Sprites to a layer and set the layer to a specific z value. I expect that they used a layer for the board (say at z=1) with a PNG image containing transparent bits in the area where you can see the sprites, and a second layer at z=0 for the sprites. In this way you can only see the sprites when they are in the transparent area.
Does this help?

I found out Cocos2d has a class CCClippingNode which does exatclly what I wanted. First I thought it can clip only rectangular areas, but after some research I found it can clip also paths.

Related

SFMLtexture shaped like player

So I've been making my own shooter in C++ using SFML library. I couldn't find a proper answer to a problem I've encountered. Is there any function in SFML that would set player and enemies sprites not to the size of their textures (just rectangles), but to the "colored" areas of the source png file so the sprite would match the shape of player?
So from what I understand you probably want to create a sprite with the same bounds as your texture assuming your player is "colored" and the rest in you texture is transparent. First, your texture and the sprite (sf::Sprite) will have the same bounds as the image (png) and the scale you set, depending on the image size. However, the only thing that will be drawn onto the screen will be your "colored" part since the rest of the image has 0 as the alpha value (transparent). So there is no actual need to create a sprite which has the same "bounds" as it's visible parts. Unless, you are handling collisions.
If you are indeed handling collisions, please look into something called pixel perfect collision detection. (SFML "intersect" function uses Bounding Box detection, if you're using that.)
If this is not an answer you seek, please elaborate the question and I'll help out :)

Inkscape: How to have many shapes with exactly the same gradient

I created a flowchart in InkScape in which each shape is filled with a linear gradient.
Some shapes share the same gradient tones but when I created them via copy&past did not know that gradients could be transformed during edit, I thought that copy&pasting a shape simply copy the entire object and each colors.
Anyway, it resulted in shapes that changes background gradient during re-positioning. After several searches I discovered that this is caused by a wrong position of "Gradient Editor Tool" of each one. In other words I moved objects but start/end of each gradient remained in place.
Please, how to quickly reposition gradient direction/start/end of each shape, maybe centering it on each one? I would avoid to manually reposition each one...
Thanks
Inkscape provides a toggle button to move the gradients along with the objects.
Activating this button during any coying or moving carries the gradient with it to the new location. (Actually it copies the gradient.)

How to keep a drawn rectangle in the same place as the camera moves around

I have this application where a rectangle is drawn in the initial frame. I wanted to know if it is possible to make the rectangle a part of the image from the next frame onwards.
For example in my first frame I would draw something like this but a bit darker
http://imgur.com/zACIiHJ
I want it to become a part of the environment, so that the next time my camera accesses that frame I should see a rectangular box. How to do this using OpenCV?
Edit: My algorithm finds and draws the rectangle in the first frame. I'm trying to keep the rectangle in the same place as the camera moves around and the rectangle need not be always on the white board.
What what you are trying to achieve is possible, but its going to take some research and work on your part. One possible solution to your problem is to use Optical Flow (http://en.wikipedia.org/wiki/Optical_flow) analysis to monitor the apparent motion of objects in your cameras view. You could use the resulting optical flow field to apply a "correction" to the positions of the corners of your rectangle between each frame. Here is a link to the OpenCV documentation for their optical flow functions:
http://docs.opencv.org/modules/gpu/doc/video.html
If the particular device you are using has a gyroscope, and gps/ins you might also use this data to supplement the optical flow data. Let me know how it goes, sounds like a really fun project!
You need a static rectangle that has nothing to do with what is in the image? Just draw a rectangle on every frame you capture.
Rect r = Rect( .. );
rectangle( imageFromCam, r, Scalar( .. ) );
cv::rectangle( )
Rect

Find ROI in a webcam image

I have a video sequence of which one frame is shown below as shown below.
I was trying to use corner detection to find the edges of the rectangle on the sheet of paper.
I am using the Shi-Tomasi corner detector for the same. However it detects a number of other things that I don't need from the background of the image. How can I narrow down my ROI to only the sheet of paper.
Second Question:
In the video sequence upon detecting The corners I need to play another video inside the rectangle. I was trying to do this using a single thread but it lead to a lot of lag and jerks. What can I possibly do to improve my processing speed. Do I need to use multiple threads for each video. One video is from the webcam while the other is from the hard-drive.
Here is what I did for one of previous projects.
Find all contours in your picture and approximate each with 4 corner shape
Find right rectangle with your own condition such as rectangle with area > 1000000
(optional) you will notice that your rectangle is not real rectangle because of 3D world. You might want to do perspective transformation to get correct rectangle
Paint green or whatever texture on the found rectangle since you already have 4 corners from above
As for jerky playing, you might want to use not only multithreading with GPU but also encryption to improve speed.

Creating foreground background array in QT

I'm having a problem with creating an array that gives me the information about 2 images that are drawn upon each other.
What I have is 1 image as background (the sea) and 1 image as foreground (landscape) the landscape is not so big as the sea, so when drawn upon each other you can see the sea as well as the landscape on it.
Now I want to make an array that sets me an 0 if it is the sea and a 1 if it is the landscape. So I could use
this array to do some collision detection later. The problem is I don't find how to make a bytearray from it.
off length * width of the images.
I have both images in an QImage, but I don't find how to create the array with a for loop or something.
Both images are drawn upon each other with the QPainter function.
Can someone help me?
Kind regards,
If you draw the two images upon each other with the QPainter class, you loose any information about them, they are just drawings now. you must create methods and objects to implement your school project. I know that you can't use the QGraphicsView, but what you need is to look how qgraphicsview works so you will have a bit of information on how to implement your own collision system.
1 - you need to keep the Retangle of your drawings ( all of them ) saved somewhere. a QList will do.
2 - you need the Positions of your Drawings too, so y ou know where they are, besides the retangles.
with the positions, and the rectangles, all you need to do is check if one rectangle intersects another.
I did it with 2 forloops and used black and blue to determine the fore and background. So I can only use black and blue.