i am using three layers of tiled map and i want to give parallax effect on these layers.
my code is:
CCTMXTiledMap *city = CCTMXTiledMap::create("City.tmx");
CCTMXLayer* ForegroundLayer = city->layerNamed("ForeGround");
CCTMXLayer* BackgroundLayer1 = city->layerNamed("Background1");
CCTMXLayer* BackgroundLayer2 = city->layerNamed("Background2");
CCParallaxNode* voidNode = CCParallaxNode::create();
// NOW add the 3 layers to the 'void' node
voidNode->addChild(BackgroundLayer2, -1, ccp(0.4f,0.5f), CCPointZero);
voidNode->addChild(BackgroundLayer1, 1, ccp(2.2f,1.0f), ccp(0,-200) );
voidNode->addChild(ForegroundLayer, 2, ccp(3.0f,2.5f), ccp(200,800) );
voidNode->runAction(temp); //some action temp
addChild(voidNode);
It gives assertion failed: child->m_pParent==0
Same code works if we use sprites instead of TMXLayers.
what I have done wrong in this code?
The layers are already child nodes of the CCTMXTiledMap. A node can only have one parent.
You can try removing each layer from its parent first, the add them to voidnode. However chances are this won't work because the layers may depend on their tilemap parent.
try this code
backgroundLayer->retain();
backgroundLayer->removeFromParentAndCleanup(false);
parallaxNode->addChild(backroundLayer, 0, Vec2(0, 0), Vec2(0, 0));//some points
backgroundLayer->release();
Related
I need to detect when MC2 is over MC1 that it is inside MC1's borders.
to do this I would usually use 4 separate if x y constraints,
and unfortunately .hitTestObject in my creations also seem to need 4 separate if x y + - constraints.
Does anyone know a more simplistic way to achieve this.
or is x y + - constraints still the only way to do this?
Thank you in advance.
The final solution for your problem to detect hit of two shapes, is to use bitmapData.hitTest(). you can detect hit between any shapes and not only Rectangles. for that, you have to draw both of your shapes on bitmapData like line belo:
var shape1Bitmap:BitmapData = new BitmapData(shape1MC.with,shape1MC.height,true,0x000000);
shape1Bitmap.draw(shape1MC);
var shape2Bitmap:BitmapData = new BitmapData(shape1MC.with,shape1MC.height,true,0x000000);
shape1Bitmap.draw(shape1MC);
shape1Bitmap.hitTest(new Point(),shape2Bitmap):Boolean;******
to continue usint BitmapData.hitTest(), folow the orders here : https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#hitTest()
http://dougmccune.com/blog/2007/02/03/using-hittestpoint-or-hittest-on-transparent-png-images/
It is a little complicated to add the bitmapData.hitTest() samples here. if any further questions left, please let me know to explain.
Good luck
I don't know of a built in way to do this, but it's easy enough using hitTestPoint with each corner of the square:
function isSquareInsideObject(square:DisplayObject, obj:DisplayObject):Boolean {
if(!obj.hitTestPoint(square.x, square.y, true)) return false;
if(!obj.hitTestPoint(square.x + square.width, square.y, true)) return false;
if(!obj.hitTestPoint(square.x + square.width, square.y + square.height, true)) return false;
if(!obj.hitTestPoint(square.x, square.y + square.height, true)) return false;
return true;
}
For more complex shapes than a square, you'd have to add more points to be accurate and it becomes a less elegant and less performant solution then.
You need that shape argument (third parameter for hitTestPoint) set to true if you want to test against the actual circle shape instead of the rectangular bounding box of the circle. If your circle is a bitmap (and not a shape), then I'd suggest putting a circular mask on the object to achieve the same result.
If your square isn't anchored at 0,0, or you don't mind the extra (small) performance hit, you could also use var bounds:Rectangle = square.getBounds(this) and then use the convenience properties of the rectangle object (bounds.bottomLeft, bottomRight, topLeft, topRight)
I am adding 2 vector layers.
this.mapport.vector = new OpenLayers.Layer.Vector();
this.mapport.inside_vector = new OpenLayers.Layer.Vector();
map.addLayer(this.mapport.vector);
map.addLayer(this.mapport.inside_vector);
and I am adding features of inside_buffer like
inside_vector.setZIndex(999);
var inside_feature = new OpenLayers.Feature.Vector(inside_geom, null,this.inside_buffer_style);
this.mapport.inside_vector.addFeatures(inside_feature);
and vector layer 1 features as
var feature = new OpenLayers.Feature.Vector(geom, null, this.buffer_style);
this.mapport.vector.addFeatures(feature);
this.request_select(feature, options, event, layers, behavior);
initially I want to show user inside_vector layer but when user will hover over it Its z-index must be 0. Can I do it in openlayer2 ? till now I tried 4,5 examples on stack overflow but they are about features not about layer itself. So my basic task is to show inside_buffer downside the vector layer
It was a while since I programmed AS3. Now I have a problem where I need to merge the two images where the upper image is a png that must retain its transparency. The upper image is an area that must pass through the lower image. A bit like a masked layer.
The result of this merge should result in a a display object. This object will later be sent to a method with the following signature:
public function addImage (
display_object:DisplayObject,
x:Number = 0,
y:Number = 0,
width:Number = 0,
height:Number = 0,
image_format:String = "PNG",
quality:Number = 100,
alpha:Number = 1,
resizeMode:String = "None",
blendMode:String = "Normal",
keep_transformation:Boolean = true,
link:String = ''
):void
Any advice is of the utmost interest. Thanks!
UPDATE;
After some struggling I've come up with this:
var bitmapDataBuffer:BitmapData = new BitmapData ( front.loader.width, front.loader.height, true );
bitmapDataBuffer.draw ( front.loader );
var bitmapOverlay:BitmapData = new BitmapData ( front.loader.width, front.loader.height, true );
bitmapOverlay.draw ( frontBanner.loader );
var rect:Rectangle = new Rectangle(0, 0, front.loader.width, front.loader.height);
var pt:Point = new Point(0, 0);
var mult:uint = 0x00;
bitmapOverlay.merge(bitmapDataBuffer, rect, pt, mult, mult, mult, mult);
var bmp:Bitmap = new Bitmap(bitmapOverlay);
pdf.addImage(bmp,0,0,0,0,ImageFormat.PNG,100,1,ResizeMode.FIT_TO_PAGE);
The problem is that my background image (represented by bitmapDataBuffer) will be totally overwritten by my upper image (the one I call overlay).
The overlay image is a png image. This image has a part of it that is transparent. Through this transparency I want to see my background image.
Any more suggestions?
You should be more specific about what kind of merge you want. You have a few options:
BitmapData.copyPixels - Provides a fast routine to perform pixel manipulation between images with no stretching, rotation, or color effects. This method copies a rectangular area of a source image to a rectangular area of the same size at the destination point of the destination BitmapData object.
BitmapData.merge - Performs per-channel blending from a source image to a destination image. For each channel and each pixel, a new value is computed based on the channel values of the source and destination pixels.
BitmapData.draw - Draws the source display object onto the bitmap image, using the Flash runtime vector renderer. You can specify matrix, colorTransform, blendMode, and a destination clipRect parameter to control how the rendering performs.
Each will work out for a different thing - the first will just copy some image over another (can keep/merge alphas). The second will merge channels data and modify them. The third one is the easiest and can draw one bitmap over another, as well as use blend modes.
Just chose one! :)
In order to make overlay image over the buffer image in your case, you are to use copyPixels() with mergeAlpha set to true.
bitmapDataBuffer.copyPixels(bitmapOverlay, rect, new Point(), null, null, true);
This will place data from bitmapOverlay to those parts of bitmapDataBuffer where overlay's alpha is above 0, blending semitransparent regions with the background.
I have a problem. I have a sprite added to library and I linked and named its class "CarriedHead_Normal". Now I want to display this sprite and make every black(000000) pixel invisible (just convert background to alpha).
I know I can use this
var bmpd:BitmapData = new BitmapData(width, height, true, 0x000000)
But how am I supposed to merge this with my function, so I call the class from the library and make it's bg transparent?
My current code:
var imageSprite = new Sprite();
addChild(imageSprite);
var libraryImage:Bitmap = new Bitmap(new CarriedHead_Normal(0, 0))
imageSprite.addChild(libraryImage);
Thanks in advance.
A number of ways you could do it, some working better than others:
On a side node, your question title has nothing to do with your actual question
1) Use blend modes
Depending on your graphics and background, you might be able to get away with a simple blendMode - check out BlendMode.SCREEN in particular. Note that some blend modes require that your parent container have a blendMode of BlendMode.LAYER
2) copyPixels() using an alpha BMD
copyPixels() lets you specify an alpha BitmapData to use when deciding which pixels to copy over (actually the alpha value of the pixels to copy over). If you have an alpha BitmapData that matches your black areas, you can remove it like that:
var b:BitmapData = new BitmapData( myImageBMD.width, myImageBMD.height, true, 0x00000000 );
b.copyPixels( myImageBMD, myImageBMD.rect, new Point, alphaBMD, new Point, false ); // copy our image, using alphaBMD to remove the black
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#copyPixels()
3) floodFill() the black areas
If your black area is continuous and you know a pixel that it starts on (e.g. it's a black frame around an image), then you can use floodFill() to remove the black areas
var b:BitmapData = new BitmapData( myImageBMD.width, myImageBMD.height, true, 0x00000000 );
b.copyPixels( myImageBMD, myImageBMD.rect, new Point ); // copy our image so we keep the original
b.floodFill( 0, 0, 0x00000000 ); // assuming the first pixel is black, floodFill() from here, replacing with transparence
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#floodFill()
This technique will work best on pixel art, where the edges are well defined.
4) threshold() to remove the black
threshold() takes pixel values and replaces them with the value you set if they pass a certain test (<, <=, ==, etc). You can use this to replace black with transparence.
var b:BitmapData = new BitmapData( myImageBMD.width, myImageBMD.height, true, 0x00000000 );
b.copyPixels( myImageBMD, myImageBMD.rect, new Point ); // copy our image so we keep the original
b.threshold( b, b.rect, new Point, "==", 0xff000000, 0x00000000 ); // test the pixels; if they're black, replace with transparence
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#threshold()
Again, this works best when the edges are well defined.
5) Use filters
You can use applyFilter() to create a new image, using a BitmapFilter to remove the black. Possibly only of the other filters will work, but ShaderFilter should definitely do the job (you write your own shader, so you can essentially do what you want). I don't have any real experience with filters, so I can't tell you how they work, but some googling should give you the necessary code
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#applyFilter()
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/ShaderFilter.html
6) Use photoshop (or equivalent)
The easiest method; just edit your image to remove the black; much less hassle :)
Try something like:
var libraryImage:Bitmap = spriteToBitmap(new CarriedHead_Normal());
imageSprite.addChild(libraryImage);
function spriteToBitmap(sprite:Sprite, smoothing:Boolean = false):Bitmap
{
var bitmapData:BitmapData = new BitmapData(sprite.width, sprite.height, true, 0x00000000);
bitmapData.draw(sprite);
bitmapData.threshold(bitmapData, bitmapData.rect, new Point(), '==', 0xff000000, 0x00000000);
return new Bitmap(bitmapData, "auto", smoothing);
}
I would like to write text on each faces of an IcosahedronGeometry
I'm able to generate the textures and apply the textures to all the faces :
for ( var i = 0; i < geometry.faces.length; i ++ ) {
geometry.faces[i].materialIndex = i;
materials.push( new THREE.MeshBasicMaterial( { overdraw: true, map: getTexture(i), wireframe: true, wireframeLinewidth: 1} ) );
}
// 3D element
element = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(materials) );
However each textures are overwriting the other ... And I can't align them correctly
http://jsfiddle.net/jzbf7/
Any idea ?
You need to understand how the UVs are set up for IcosahedronGeometry -- they are very similar to the UVs for SphereGeometry, in which a map of the world will cover the entire sphere.
This is very different from the UVs for CubeGeometry, where the texture maps to each face.
Experiment with the updated fiddle to see for yourself: http://jsfiddle.net/jzbf7/2/
(If the sphere renders too dark, render it again -- the colors are random.)
Also, there is a bug in the IcosahedronGeometry UV map. This can be seen at the "seam".
three.js r.56