I'm using a flip mechanism to navigate through my site (flip file & demo). The problem is, once it's flipped the content been displayed good just like I want it, but there's some offset from the flipped (right) parts en the solid left part (visible when you look closely). Also the right part is now a little blurred (which is the disturbing part of my issue). This all caused by the flip (I think the rotationY is causing the problem).
When I click a button I do the following:
flip=new Flip(currentPage,nextPage,richting);
content.addChild(flip);
currentPage=nextPage;
nextPage = new MovieClip();
there is a fix for it, consider the following:
// store original matrix
var origMatrix:Matrix = box.transform.matrix;
// set initial position
box.rotationY = -180;
// start animation
TweenLite.to(box, 1, {rotationY:0, onComplete:cleanBlur})
// execute after animation complete
function cleanBlur():void {
box.transform.matrix = origMatrix;
}
maybe you can find better results using other 3d library.
EDIT: sorry the "box" object, I was testing in flash, but box would be any of your pages to flip. Just apply the same logic.
Matteo at Flash & Math has an excellent solution for this. He actually found that when you bring an object into native 3D space it expands the object by one pixel in both the width and height. This can be counteracted by scaling your object back and then setting it's z to 0 which will scale it back up. Now the object is ready to play with without the blur.
http://www.flashandmath.com/flashcs4/blursol/index.html
adding: This fixes the scale issue, but not the blurriness. You will still need to use the matrix transformation fix posted above.
Related
I have some sprites, where the player character is facing to the right.
I can create an animation from those sprites just fine. The problem is, if I want the sprites to face to the left.
I do the following:
Sprite* p = Sprite::createWithSpriteFrameName("Jumping");
p->setPosition(Vec2(_visibleSize.width/2,_visibleSize.height/2));
this->addChild(p);
p->setFlippedX(true);
Vector<AnimationFrame*> animFrames;
float frameRate = 0.32f;
std::vector<std::string> frameNames = {"Running 0","Running 1","Running 2"};
for (int i =0; i<3;i++){
auto frameName = frameNames.at(i);
auto spriteFrame = SpriteFrameCache::getInstance()->getSpriteFrameByName(frameName);
ValueMap userInfo;
userInfo["frame_index"] = Value(i);
auto animFrame = AnimationFrame::create(spriteFrame, frameRate, userInfo);
animFrames.pushBack(animFrame);
}
auto animation = Animation::create(animFrames, frameRate);
auto animationAction = Animate::create(animation);
p->runAction(RepeatForever::create(animationAction));
p->setFlippedX(true);
The animation runs, but the animation still shows the player facing to the right. What is the problem? Why doesn't setFlippedX work in this case?
I am using Cocos2d-x 3.13.1. I can't find any bug, so I assume I am doing something incorrectly.
This seems to be a bug, and there doesn't seem to be a way to work around, short of using two sprite sets - one for all the sprites without flipping, and the other set for when the sprites are flipped.
What makes it worse - this means you can't use the animation code if you want flipping, and instead need to implement your own logic, to use the appropriate set of sprites, animations etc.
EDIT: It seems to be fixed in 3.16
Its because you are calling this twice on your code,
p->setFlippedX(true);
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;
}
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.
I have a canvas with the following size: 500x200. Inside this canvas i'm drawing some number of blocks (actually - table cells). Information about how much blocks i should draw i'm getting via AJAX, but size for every cell is fixed - 100x50. So, i can display inside my canvas only 5 blocks horizontally and 4 vertically. But what about other blocks? What if script return a table 30x30 cells. How can i side scroll (mouse preferred) my canvas so user can the rest of the cells (no zoom out, only scrolling).
If you need any more information, please, tell me and i will provide it.
Thank you.
The easiest way to accomplish this is to implement mouse-panning.
On the mouse down event, begin panning and save the mouse position
On the mouse move event, translate the context (ctx.translate(x,y)) by the difference between the current mouse position and the original position, then redraw the scene.
On the mouse up event, stop panning.
There are harder ways. You could implement scrollbars inside the canvas, as Mozilla Bespin has done (...which became Mozilla Skywriter which then merged with Ace and dropped all Canvas use). The code that they used was pretty good.
Or you could implement DOM scrollbars for use with your canvas, which isn't exactly easy to get right in all cases. This involves adding several dummy divs in order to give the appearance and function of real scrollbars. I have done this but the code remains unreleased for now. But thats no reason you can't give it a try if thats what you really want.
Check out a great tutorial at: http://www.brighthub.com/hubfolio/matthew-casperson/blog/archive/2009/06/29/game-development-with-javascript-and-the-canvas-element.aspx
It will give you an answer to your question and much much more...
I'm with Simon Sarris on this, but as an alternative, you could clone the canvas, and replace it with a blank canvas, and then render the original canvas as an image. I've some MooTools js that goes like this, which is fine for my use, by ymmv:
var destinationCanvas = this.canvas.clone()l
destinationCanvas.cloneEvents( this.canvas, 'mousemove');
var destCtx = destinationCanvas.getContext('2d');
destCtx.drawImage(
this.canvas,
(this.options.scrollPx)*-1,
0
);
destinationCanvas.replaces( this.canvas );
this.canvas.destroy();
this.canvas = destinationCanvas;
this.ctx = destCtx; // this.canvas.getContext('2d');
I'm wonderring if anyone can help me with making sure my... uhhh ... Z-index (bad pun, you'll see why in a moment) is in the wrong order. I've been doing this for a few hours straight now and my eyes are going buggy - but - maybe leaving a question on Stack overnight will help push this in the right direction.
I've been working on the code for https://github.com/AlexChesser/jsSprite and I'm as far as the 6th test. Use the W key to run, A and D to turn left and right: http://chesser.ca/jsSprite/06-brainnsss....php (Gettit? Z-Index?! Hilarious).
Anyways, You'll notice that if you run around the screen for a bit. the individual Zombies' white squares / dirty rectangles overlap the other zombies' squares. When working with multiple overlapping sprites, how does one go about making sure they all get drawn without upsetting any of the other sprites?
(You see z is for zombies, but z index like when you're dealing with overlapping in CSS - probably way funnier when you've been coding for a number of hours straight).
Thanks for your
Brainsss......
It's not a z-index issue, your zombies themselves are okay.
Your problem is really with the second line of drawFrame
drawFrame: function(){
Sprite.ctx.clearRect(0,0,Sprite.width,Sprite.height); //clear previous frame
// I am trouble:
MainContext.clearRect(Sprite.Xpos, Sprite.Ypos, Sprite.width, Sprite.height);
It is clearing a rectangle of the main canvas where the zombie once was every time you draw a zombie, which can affect nearby objects!
So instead you should be clearing the entire canvas each time.
Try commenting out the MainContext.clearRect in drawFrame, and instead add one in runloop like below. It should fix your problems.
runloop = function(m) {
// New clear put here!
MainContext.clearRect(0,0,canvas.width,canvas.height);
m.drawFrame();
for (Z in Zarr) { // For ZOMBIE in "Zombie Array" Aaaaarrrgghhh...
Zarr[Z].pointTo(m);
Zarr[Z].drawFrame();
MainContext.drawImage(Zarr[Z].canvas, Zarr[Z].Xpos, Zarr[Z].Ypos);
};
MainContext.drawImage(m.canvas, m.Xpos, m.Ypos);
};
How about sorting your array (Zarr) by the y coordinate Ypos of each zombie before rendering? Or are you getting at the problem with (a lack of) transparency?