Cocos2d-x v3 Change Sprite texture with animation slide in/out - cocos2d-x

I have a Sprite init with file name "blue.png", this is just create a simple rect with blue color.
mySpriteOne = Sprite::create("blue.png");
mySpriteOne->setPosition(Vec2(0,0));
mySpriteOne->setAnchorPoint(Vec2(0,0));
this->addChild(mySpriteOne,-1);
I will change Sprite image with this code
mySpriteOne->setTexture("red.png")
Now i want when change image it also has a transition slide to right or slide to left.
I just learning cocos3d for a few days, so this problem seems too hard for me.
Thank for any answers!

The best way to do what you want to do would be to run a moveTo or moveBy action, then to do a callback to change your texture, and run a moveTo action back to your original Position.
float slideTime = 2.0f; // Time taken for slideIn/Out animation
auto originalPosition = mySpriteOne->getPosition();
auto slideOutChangeSequence = Sequence::create(
MoveTo::create(slideTime, vec2(-100, 100)),
callfunc_selector(MainScene::swapTextureCallback),
MoveTo::create(slideTime, originalPosition,
NULL);
mySpriteOne->runAction(slideOutChangeSequence);
It's bit late, but you have no answer yet, I hope this helps.

Related

flash actionscript 3.0 hide part of an image

I am working on a flash sound mixer application with multiple sound channels, and I am having trouble with the lights beside the volume knob.
Is there a way to hide just a part of an image?
On the image below, image-2 is on top of image-1 to create some kind of volume level indicator effect, and how much of image-2 is shown depends on the value of the volume.
image-url: http://s30.postimg.org/r3ow1g5bl/volume_lights_level.png
I've tried by just reducing the height of image-2, but it looks awful and distorted.
Is there something in flash that works closely the same as CSS's behavior.
example: I'll just make image-2 a background of a shape, and when I reduce the shape's height, the image-background does not get distorted or changes it's height as well.
By searching for solutions, I have come across the mask property, but I don't quite understand how it works, and most of the examples shown are images placed inside circles.
Is the mask property applicable in this situation?
I'm quite new to flash so I don't know a lot of things yet.
You can indeed use a mask.
How to programmatically create your mask
Put an occurrence of your image named myImage on the stage, and put over this occurrence a mask named myMask with the same dimensions. You can apply myMask mask to myImage using it's mask property like below:
Main Timeline
myImage.mask = myMask;
function mouseMoveHandler(e:MouseEvent):void {
myMask.height = myImage.y - e.stageY;
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
You have just to adapt this code to your animation, in the function where you click your button.
I got it working now, many THANKS #VC.One. heres how I did it.
Imported img-2 to stage, converted it into symbol(type:Movie Clip), assigned instance name: img2_mc.
I created a new layer for the mask, drawn a rectangle using rectangle tool, converted it also to symbol(type:Movie Clip), assigned instance name: mask_mc.
Then applied the mask to img2_mc.
/* the code */
img2_mc.mask = mask_mc;
function onEnterFrame(event:Event):void{
var volumeKnob_y = volSliderKnobOn.y + 12; // adjust it to the center of the knob
mask_mc.height = volumeKnob_y;
}

Change scene after few seconds in Cocos2d-x

I'm a newbie. At this time, I want to change scene after a few seconds (about 3-5 seconds). But I don't know how to do. I know schedule but I don't want it loops. I mean it just works only once.
Thanks!
For example, running a main menu scene after a 2.0s delay from the splash screen.
// In the init()
this->schedule(schedule_selector(CSplashLayer::RunMainMenu), 2.0f);
// function in the splash layer class
void CSplashLayer::RunMainMenu(float dt) {
// tell CCDirector to run main menu
}
You can do like this
CCScene *pScene = GameLayer::scene();
CCTransitionPageTurn *crosssfade = CCTransitionPageTurn::create(3,pScene, true);
CCDirector::sharedDirector()->replaceScene(crosssfade);
You can use any Transition effect to change the scene with any time to take this transition to complete
You can use this this->scheduleOnce(<#SEL_SCHEDULE selector#>, <#float delay#>). This way you can acheive what you want.

Rotating a Model in Away3D

Here's what i want to do:
I want to load a model (most likely .3ds) into my .swf and be able to rotate it with the mouse.
This works fine at first glance, but there's problem, the rotations 'switch' over. Or to say it differently:
Imagine we have a model in the shape of a pipe.
If we drag the mouse to the right, the model rotates along its X-Axis to the left, mouse to the left, X-Axis rotation to the right, moving the mouse up, Y-Axis rotation downward, mouse down, Y-Axis rotation upward.
Now, lets say we turn the pipe to the right or left, until we face the (former) 'backside' of the pipe, and then we move the mouse down. The model will rotate downward instead of upward.
I hope you understand what i mean with this. I've been looking around for a good while now and never found a satisfying solution. There was talk about quaternions, but i can't grasp them.
Another suggestion i read somewhere is the following:
create a Matrix3D object, apply rotation on it, then multiply it with the desired Matrix3D of my 3d-Model.
I tried to do it, but the result stays the same, the directions of rotation switches depending on what side i'm facing.
private function update(e:Event):void
{
xCalc = (0.3*(stage.mouseX - lastMouseX));
yCalc = (0.3*(stage.mouseY - lastMouseY));
if(move)
{
var objTransform:Matrix3D = new Matrix3D();
objTransform.prependRotation(xCalc, Vector3D.Y_Axis, objC.pivotPoint);
objTransform.prependRotation(yCalc, Vector3D.X_Axis, objC.pivotPoint);
mesh.transform = multiply3DMatrices(mesh.transform, objTransform);
}
lastMouseX = stage.mouseX;
lastMouseY = stage.mouseY;
view.render();
}
multiply3DMatrices simply multiplies two 4x4 Matrices together.
objC is the ObjectContainer3D that holds my model. For some reason i cannot rotate it properly, unless i manipulate the rotationX/Y/Z properties.
mesh is the mesh inside of the Model (which is very simple, a single mesh).
Also, i'm aware that i could try another Framework for this (like papervision) but this project requires me to use Away3D.
Solved it by myself, the problem was that i created a new Matrix3D Object every time. The fixed code looks like this:
private function update(e:Event):void
{
...
if(move)
{
var objTransform:Matrix3D = mesh.transform;
objTransform.appendRotation(xCalc, Vector3D.Y_Axis, objC.pivotPoint);
objTransform.appendRotation(yCalc, Vector3D.X_Axis, objC.pivotPoint);
mesh.transform = objTransform;
}
...
}
And yes, the user bwroga was actually right, i should've used appendRotation instead of prependRotation, as well.

AS3 button to move movie clip in a mask

I am new to AS3 scripting. I have a wide image (movie clip "preform_mc") that I am masking and would like for right button ("right_mc") to dynamically move the image.
The code below moves the image to the right, but its not a dynamic movement (would like an animation effect) and I cant control when the image should stop moving, basically a max amount for the x coordinate.
any help is greatly appreciated!
right_mc.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2);
function fl_MouseClickHandler_2(event:MouseEvent):void
{
preform_mc.x += -100;
}
Take a look at Greensock Tweening Library. Using that library you'll be able to easily make a smooth animation of a moving image. For the control of max X you should write an if statement to check whether preform_mc.x is more than the max amount you want.
Code will look something like this:
var min_x:int = -500;
function fl_MouseClickHandler_2(event:MouseEvent):void
{
if(min_x < preform_mc.x)
TweenLite.to(preform_mc, 0.5, {x:preform_mc.x - 100}); // using the library I provided a link to
}

AS3 Tween class and pan effects

I'm trying to make a "pan" effect (I'm not sure if this is pan) in flash (as3) where you have an image bigger than the mask where it is displayed (just horizontally). It´s a very simple effect, but I'm having trouble with the tweens.
First, I tried with the tween class. But it ended up a mess with the speed of the tween (the parameter where you set the frames or seconds of the tween). The "begin" parameter is easy, is the x value of the object, no matters where is it. The "end" parameter is easy too, is 0 or the end of the image, depending if you are on the left or right button (the tween begins when you are over those buttons and end with a stopTween when you are out of them or when the tween is over). The problem I'm facing it's the "duration" parameter: I want the same speed in all the tweens, no matters where it begins. Obviously, if I put a static value, if I'm in the middle of the image, the speed reduces to half.
So I'm trying to figure out how to create an algorithm to do this. I first tried something like calculating which percent of the image is the current "x" value:
If I am at 50%, make the tween in 50 frames.
If I am at 90%, make the tween in 10 frames.
If I am at 20%, make the tween in 80 frames.
But I think there should be a way to make it easier. Maybe I'm getting it wrong, and the tween class is not what I need... I'm just trying to make an displacement effect, always at the same speed (although an ease in and out until the speed is reached would be greater).
Any idea or useful link about this? I saw a lot of tutorials but with different behaviour, mostly related with mouse position.
thanks in advance!
You want:
duration = (end - begin) / pixels_per_ms
Why not use the ease property of a tween class? Take a look at http://www.greensock.com
There is a useful example widget you can experiment with on the TweenMax page.
The betterway to Achieve this effect is to measure speed/over/distance this formula will be easier and a lot less code.Doing it this way you wouldnt need any tween library's.
var MaskCenter=100;
var speed=1/10;
var distance=boxdummy.mouseX-MaskCenter;
if(mouseX<250){
box.x-=(distance*speed);
}
if (mouseX>250)
{
box.x -= speed + accel;
}
Something like that!
If you cant work it, let me know i will make up a (fla) file for you