Cocos2D: How to use Mask Image - cocos2d-iphone

I am using cocos2d for a game which uses sprite sheets for my character animations. I created these images using TexturePacker. Now, I want to use PVRTC 4 format for reducing memory consumption due to some reasons. But as the PVRTC Texture Compression
Usage Guide suggests, I need to add extra border of 4 pixels in each character to produce proper results. Even if I add border, I will have to mask this image with alpha image to remove border at run time. I am using Texture Packer to create a sprite sheet with PVRTC4 format and created alpha masking image matching it. I am ready with these 2 images in hand which are of same width and height.
Now my question is, how can I mask my PVRTC texture with alpha image in Cocos2D?
It will be more helpful if the solution provided works with Batch Nodes!
Thanks in advance for any solutions!

Why don't you just make the border/padding area completely transparent?

I was having the same problem, and after reading ray wenderlichs page about masking, I made a little ccsprite subclass which allows you to mask by 2 images.
CCMaskedSprite

Related

Resizing images to 2x2

I've got a texture I'm using in OpenGL 4.6 that I want to scale to 2x2, but I'm not sure how. Is there any way to resize an image in a way so that each pixel in the original image is basically duplicated to create a 2x2 in the resized image? I've tried using photoshop to do this, but the image quality always seems to drop significantly. Or do I have to manually create the image myself?

Replace white background of image with transparent using C++ / OpenCV or Matlab

Using C++ / OpenCV or Matlab I'm trying to find a method to replace the white background of an image from file with a transparent background and then save the image for further use elsewhere. (The image is similar to something like this: http://www.psdgraphics.com/file/monitor-on-white-background.jpg)
I understand this task can be completed easily with simple image editing software but I need to do this for a large batch of images. I've tried methods such as Make white background transparent png matlab as well as a bunch of others with no luck.
Thanks!
Load the image. Loading images in OpenCV
Convert it to a 4 channel image. OpenCV: transforming 3 channel image into 4 channel
Determine where the background is adjust the alpha channel of those pixels accordingly. I don't know what your images look like, but if there is no other white in your images, it's a fairly simple task. (If a pixel is white, then it should be transparent.) Otherwise, if there is other white in your images, then you need to look for the contiguous region(s) of white that make up the background. See Flood Fill Algorithm
Save the image (See the link from 1.)

What's the best way to fix Pixel Aspect Ratio (PAR) issues on DirectShow?

I am using a DirectShow filtergraph to grab frames from videos. The current implementation follows this graph:
SourceFilter->SampleGrabber->NullRenderer
This works most of the time to extract images frame by frame for further processing. However I encountered issues with some videos that do not have a PAR of 1:1. These images occur stretched in my processing steps.
The only way to fix this I have found for now is to use a VMR9 renderer in windowless mode that uses GetCurrentImage() to extract a bitmap with the correct aspect ratio. But this method is not very useful for continuous grabbing of thousands of frames.
My question now is: what is the best way to fix this problem? Has anyone run into this issue as well?
Sample Grabber gets you frames with original pixels. It is not exactly a problem if there is aspect ratio attached and the pixels are not "square pixels". To convert to square pixels you simply need to stretch the image respectively. It would be easier for you to do this scale step outside of DirectShow pipeline, and you have all data you need: pixels and original media type. You can calculate the corresponding resolution with square pixels and resample the picture.

C++ Image Manipulation

So I have made this program for a game and need help with making it a bit more automatic.
The program takes in an image and then displays it. I'm doing this over textures in OpenGL. When I take the screenshot of the game it is usually something about 700x400. I input the height and width into my program, resize the image to 1024x1024 (making it a POT texture for better compatibility) by adding blank space (the original image stays at the top left corner and goes all the way to (700,400) and the rest is just blank; does anyone know the term for this?) and then load it into my program and adjust the corners so only the part from (0,0) to (700,400) is shown.
That's how I handle the display of the image. Now, I would like to make this automatic. So I'd take a 700x400 picture, pass it to the program which would get the image's width and height (700x400), resize it to 1024x1024 by adding blank space and then load it.
So does anyone know a C++ library capable of doing this? I would still be taking the screenshot manually though.
I am using the Simple OpenGL Image Library (SOIL) for loading the picture (.bmp) and converting it into a texture.
Thanks!
You don't really have to resize by adding blank space to display image properly. In fact, it's really unefficient way to do it, especially because you store images in .bmp format.
SOIL is able to automatically add the blank space when loading textures - maybe just try to load the file as-is, without doing any operations.
From SOIL Documentation:
Can automatically rescale the image to the next largest power-of-two
size
Can load rectangluar textures for GUI elements or splash screens
(requires GL_ARB/EXT/NV_texture_rectangle)
Anyway, you don't have to use texture to display pixels on the screen. I presume you aren't using shaders for rendering - if it all goes through fixed pipeline, there's glDrawPixels function, which will be much simpler. Just remember to change your SOIL call to SOIL_load_image.

Using color images as particle images in cocos2d (using Particle Designer)

I want to use a full color PNG image as a particle in cocos2d with an emitter designed in ParticleDesigner.
I dragged in the image I want to use and set-up everything how I want it in ParticleDesigner and it looks good.
Problem is when I import into cocos2d, the particles appear to have grey squares over them (a small bit of the yellow image is visible on the side, but they gray covers the rest including transparent areas).
Code:
CCParticleSystemQuad* particleSystem = [CCParticleSystemQuad particleWithFile:#"coin magnet.plist"];
particleSystem.position = ccp(320, 320-16);
[self addChild:particleSystem z:1000];
I'm guessing it might be an issue with blending options...
I've tried GL_SRC_ALPHA to GL_SRC_MINUS_ALPHA (set by the normal button in ParticleDesigner), additive combinations, and trying different things with GL_ZERO and GL_ONE
Why are the particles appearing grey? Does cocos2d support using full color images as particles?
Figured it out!
Turns out the image didn't embed properly in the plist (bug in ParticleDesigner) so that's why it was appearing grey.
Exporting with the png separate solved the issue.
And yes, you can definitely use color images as particles in cocos2d!