I am doing a magnifying glass effect?
I have a working version. However the performance is not good enough on the tablet.
What i have done so far:
I had a ENTERFRAME event on a mouseDown
So it start capture the screen when the mouse click down, and follow the mouseX and mouseY
It works, but the only problem it keep draw the whole stage rather than maybe (300px * 300px) around the mouseX and mosueY. is there a way i can make the draw area according to your mouseX and mouseY. I guess that would help the performance as well. :)
e.target.removeEventListener(Event.ENTER_FRAME, startCapture);
function startCapture(e:Event):void{
var glassWidth:uint=80;
var glassHeight:int=80;
var curBd:BitmapData;
var curBmp:Bitmap;
var posX:int = _parentStage.mouseX - 40;
var posY:int = _parentStage.mouseY - 40;
//-------------------------------------------------------------
//var subArea:Rectangle = new Rectangle(0,0,500,500);
//var newBmp:Bitmap = new BitmapData(500,500);
//var cutoutBmp:Bitmap = new Bitmap( newBmp, PixelSnapping.ALWAYS, true );
//cutoutBmp.bitmapData.draw( jpgSource, new Matrix(1, 0, 0, 1, -357, -341) , null, null, subArea, true );
//-------------------------------------------------------------
bd = new BitmapData(1024, 768, true, 0);
var subArea:Rectangle = new Rectangle(_parentStage.mouseX, _parentStage.mouseY, 500, 500);
// bd = new BitmapData(500, 500);
bd.draw(_parentStage.mc_mainContainer);
// bd.draw(_parentStage.mc_mainContainer);
curBmp=new Bitmap(new BitmapData(glassWidth,glassHeight), PixelSnapping.ALWAYS);
curBmp.bitmapData.copyPixels(bd,new Rectangle(posX,posY,_parentStage.mouseX,_parentStage.mouseY),new Point(0,0));
curBd=curBmp.bitmapData;
var ma:Matrix = new Matrix(1, 0, 0, 1, -40, -40);
glass.name = 'glass';
glass.alpha = 1;
glass.graphics.clear();
glass.graphics.beginBitmapFill(curBd, ma);
glass.graphics.drawCircle(0, 0, 35);
//glass.graphics.drawCircle(0, 0, 35);
glass.graphics.endFill();
//var imageCircle:Bitmap = new _magGlass();
//trace(_magGlass);
//glass.addChild(_magGlass);
if(!_parentStage.contains(glass))_parentStage.addChildAt(glass, _parentStage.numChildren - 2);
glass.x = _parentStage.mouseX;
glass.y = _parentStage.mouseY - 75;
}
Where your performance problem is coming from is where you're creating new bitmaps and bitmapdatas and rectangles on every frame. Instead, just create one or two in the constructor or on click and then reuse them. Since you already have a BitmapData, you can probably just put that on the stage and mask it, rather than using the graphics object in glass. At least pick one approach or the other. Doing both is killing you, performance wise.
Related
It seems that if a display object has a perspective projection applied to it, calling localToGlobal gives you the wrong coordinates. In the following code, I draw a rectangle, rotate it slightly about its X axis, then draw an oval inside it using coordinates derived from localToGlobal. It works fine, until I try to apply a perspective projection, then the coordinates are all wrong. Anyone know how to get around this problem?
var w:uint = 300, h:uint = 150;
var s:Sprite = new Sprite();
s.graphics.beginFill(0x000000);
s.graphics.drawRect(-w/2,0,w,h);
s.graphics.endFill();
s.x = 275; s.y = 200; s.z = 600;
s.rotationX = -45;
addChild(s);
var point00:Point = new Point(0,0);
var point0h:Point = new Point(0,h);
var midL:Point = new Point(-w/2,h/2);
var midR:Point = new Point(w/2,h/2);
/*var VP:PerspectiveProjection = new PerspectiveProjection();
VP.fieldOfView = 55;
var p:Point = new Point(275,100);
VP.projectionCenter = p;
s.transform.perspectiveProjection = VP;*/
var o:Shape = new Shape();
o.graphics.beginFill(0x00ff00);
o.graphics.drawEllipse(
s.localToGlobal(midL).x,
s.localToGlobal(point00).y,
s.localToGlobal(midR).x - s.localToGlobal(midL).x,
s.localToGlobal(point0h).y - s.localToGlobal(point00).y
);
addChild(o);
It seems that setting perspectiveProjection does not force the player to redraw the object, and localToGlobal depends on redraw for correct results. You can wait 1 tick like you found (setTimeout for 0ms or enterFrame for 1 frame will do it) or you can force the player to redraw using BitmapData/draw():
// ...
s.transform.perspectiveProjection = VP;
new BitmapData(1, 1).draw(s); // forces player to redraw the sprite
var o:Shape = new Shape();
o.graphics.beginFill(0x00ff00);
o.graphics.drawEllipse(
s.localToGlobal(midL).x,
s.localToGlobal(point00).y,
s.localToGlobal(midR).x - s.localToGlobal(midL).x,
s.localToGlobal(point0h).y - s.localToGlobal(point00).y
);
addChild(o);
I found a workaround that isn't terrible. All you have to do is put a slight delay before the localToGlobal calls and then they will return the right coordinates. That also fixes local3DToGlobal.
I'm drawing bitmaps of movieclips which I then feed into my hittest function to test for collisions. However, I'm not quite sure how i would add to the code below to take into account and draw bitmaps for movieclips which have been scaled and/or rotated. The below code obviously only works for non-transformed movieclips. I've included in comments code which i've already tried but to no success.
When adding the drawn bitmap to the stage, no matter whether the movieclip in question is transformed or not, the drawn bitmap is "cut off" and incorrectly drawn - it appears to only draw a section of it. However, this does not particularly affect the collision testing for the non-transformed movieclips, but has an adverse effect on transformed movieclips.
All of the movieclips I want to be drawn have been created through the graphics property.
//for example:
var mymc:MovieClip = new MovieClip();
var g:Graphics = mymc.graphics;
g.moveTo(0,0);
g.lineTo(17.5,0);
g.lineTo(8.75,17.5);
g.lineTo(-8.75,17.5);
g.lineTo(0,0);
main code:
for each(var mc:MovieClip in impassable) {
//var bMatrix:Matrix = new Matrix();
//bMatrix.scale(mc.scaleX, mc.scaleY);
//bMatrix.rotate(mc.rotation * (Math.PI/180));
var bData:BitmapData = new BitmapData(mc.width, mc.height, true, 0);
//bData.draw(mc, bMatrix);
bData.draw(mc);
var bitmap:Bitmap = new Bitmap(bData);
bitmap.x = mc.x;
bitmap.y = mc.y;
var HitTest:Number = newCollision(bitmap, centerX, centerY, 13.7);
Any thoughts? thanks
This function will create a BitmapData clone of a DisplayObject, taking into account its transform matrix, though it doesn't take into account bitmap filters. (Based on this answer.)
function createBitmapClone(target:DisplayObject):BitmapData {
var targetTransform:Matrix = target.transform.concatenatedMatrix;
var targetGlobalBounds:Rectangle = target.getBounds(target.stage);
var targetGlobalPos:Point = target.localToGlobal(new Point());
// Calculate difference between target origin and top left.
var targetOriginOffset:Point = new Point(targetGlobalPos.x - targetGlobalBounds.left, targetGlobalPos.y - targetGlobalBounds.top);
// Move transform matrix so that top left of target will be at (0, 0).
targetTransform.tx = targetOriginOffset.x;
targetTransform.ty = targetOriginOffset.y;
var cloneData:BitmapData = new BitmapData(targetGlobalBounds.width, targetGlobalBounds.height, true, 0x00000000);
cloneData.draw(target, targetTransform);
return cloneData;
}
When you call successive transforms on a Matrix, the ordering is very important and can really mess things up.
Luckily there is a helper method that allows you to specify translation, rotation and scaling in one go and avoid those issues - createBox
For your case, something like this:
var matrix:Matrix = new Matrix();
matrix.createBox(mc.scaleX, mc.scaleY, mc.rotation*Math.PI/180, 0, 0);
(the two zeros are for x and y translation)
I'm having a bit of a problem copying the masked only pixels from one bitmap onto another. Basically I'm masking bitmap A with bitmap B, which is working fine, but I'm unsure how to copy just the masked pixels onto Bitmap C which is the only one I want to keep.
//all this works fine
var _texture:Bitmap = new Bitmap(new Dirt_Bitmap);
var _mask:Bitmap = new Bitmap(new Mask_Bitmap);
var _planter:Bitmap = new Bitmap(new Planter_Bitmap);
_texture.cacheAsBitmap = _mask.cacheAsBitmap = true;
_texture.mask = _mask;
//This is where things get weird :[
var newBitmap:Bitmap = new Bitmap(new BitmapData(50, 50, true));
newBitmap.bitmapData.copyPixels(_texture.bitmapData, _texture.bitmapData.rect, new Point());
_planter.bitmapData.copyPixels(_newBitmap.bitmapData, _newBitmap.bitmapData.rect, new Point());
how would I go about just copying or drawing or maybe merg() just the masked texture so its copied over the planter graphic where the dirt should be? Any and all help will be greatly appreciated! :]
When you use copyPixels, you are actually copying the content of a bitmap without anything that's added by environment (no masking or transforms).
Use draw() instead.
Here's a sample:
var texture:Bitmap = new Bitmap(new BitmapData(200, 200, false, 0xFFFF0000));
var imageMask:Bitmap = new Bitmap(new BitmapData(200, 200, true, 0));
var rect:Rectangle = new Rectangle(0, 0, 10, 10);
imageMask.bitmapData.fillRect(rect, 0xFF000000);
rect.x = 50;
rect.y = 50;
imageMask.bitmapData.fillRect(rect, 0xFF000000);
texture.cacheAsBitmap = true;
imageMask.cacheAsBitmap = true;
texture.mask = imageMask;
addChild(imageMask);
addChild(texture);
var planter:Bitmap = new Bitmap(new BitmapData(200, 200, true, 0));
// that's it
planter.bitmapData.draw(texture);
addChild(planter);
planter.x = 100;
There are some threads about textures which do not showing up. I have tried them all, but nothing helped.
I have spent a few hours on this now. Every time I end up looking at a black sphere.
I am working on Chrome v18 and Windows 7. I also tried Firefox, but this browser does not really support Three.js.
This is the body of the script:
<body>
<script src="../build/Three.js"></script>
<script src="js/Stats.js"></script>
<script src="../build/jquery-1.7.2.min.js"></script>
This is the script itself:
// stap1) camera, set the scene size
var WIDTH = 400,
HEIGHT = 300;
// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR );
// stap2) scene:
var scene = new THREE.Scene();
// the camera starts at 0,0,0 so pull it back
scene.add(camera);
camera.position.z = +300;
// get the DOM element to attach to
// - assume we've got jQuery to hand
var container = $('#container');
// stap3)create a WebGL renderer:
var renderer = new THREE.WebGLRenderer();
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
container.append(renderer.domElement);
// bol maken:
// create the sphere's material
// b.v: THREE.MeshBasicMaterial
var sphereMaterial = new THREE.MeshLambertMaterial(
{
map: THREE.ImageUtils.loadTexture("http://dev.root.nl/tree/examples/textures/ash_uvgrid01.jpg")
});
// set up the sphere vars
var radius = 50, segments = 16, rings = 16;
var sphereGeometry = new THREE.SphereGeometry(radius, segments, rings);
// create a new mesh with sphere geometry -
var sphere = new THREE.Mesh(
sphereGeometry,
sphereMaterial
);
sphere.position.x=0;
var s=1;
sphere.scale.set(s, s, s);
// add the sphere to the scene
scene.add(sphere);
// create a point light
var pointLight = new THREE.PointLight( 0xFFFFFF );
// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
// add to the scene
scene.add(pointLight);
// draw!
renderer.render(scene, camera);
You need to wait until the image used as texture is fully downloaded.
I have put your code on the web: http://jsfiddle.net/4Qg7K/ and just added a classic "render loop":
requestAnimationFrame(render);
function render(){
requestAnimationFrame(render);
sphere.rotation.y += 0.005; //rotation stuff, just for fun
renderer.render(scene, camera);
};
requestAnimationFrame function works like a timer, calling to the render function each time the browser is ready to update the web page.
BTW, Three.js works fine with Firefox.
I'm having toruble with an image that I zoom into in flash. I got everything to work, only I want the clicked X and Y coordinats to center to the stage. ( so that the area clicked on always zooms in and position the area clicked to the middle of the stage)
the image is a movieclip and it zooms with a tween, but i tried everything but the image wont center the stage..
does anyone have a clue for wich actionscript 3 code I can use to do this?
my code is:
const TWEEN_IN:String = "tweenIn";
const TWEEN_OUT:String = "tweenOut";
var tweenDirection:String;
var internalPoint:Point;
var externalPoint:Point;
var tw:Tween;
square.x = stage.stageWidth - square.width/2;
square.y = stage.stageHeight - square.height/2;
square.addEventListener(MouseEvent.CLICK, zoomIn);
function zoomIn($e:MouseEvent):void
{
square.removeEventListener(MouseEvent.CLICK, zoomIn);
//internalPoint = new Point(stage.width/2, stage.height/2);
internalPoint = new Point(square.mouseX, square.mouseY);
//externalPoint = new Point(500, 350);
externalPoint = new Point(stage.mouseX, stage.mouseY);
tweenDirection = TWEEN_IN;
tw = new Tween(null, "", Strong.easeOut, square.scaleX, 3, 1, true);
tw.addEventListener(TweenEvent.MOTION_CHANGE, _syncScale);
tw.addEventListener(TweenEvent.MOTION_FINISH, _cleanTween);
}
function _syncScale($e:TweenEvent):void
{
square.scaleX = square.scaleY = tw.position;
var matrix:Matrix = square.transform.matrix;
MatrixTransformer.matchInternalPointWithExternal(matrix, internalPoint, externalPoint);
square.transform.matrix = matrix;
}
function _cleanTween($e:TweenEvent):void
{
tw.removeEventListener(TweenEvent.MOTION_CHANGE, _syncScale);
tw.removeEventListener(TweenEvent.MOTION_FINISH, _cleanTween);
tw = null;
if(tweenDirection == TWEEN_IN)
stage.addEventListener(MouseEvent.CLICK, zoomOut);
else if(tweenDirection == TWEEN_OUT)
square.addEventListener(MouseEvent.CLICK, zoomIn);
}
function zoomOut($e:MouseEvent):void
{
stage.removeEventListener(MouseEvent.CLICK, zoomOut);
//internalPoint = new Point(0, 0);
//externalPoint = new Point(0, 0);
externalPoint = square.localToGlobal(internalPoint);
internalPoint = square.globalToLocal(externalPoint);
tweenDirection = TWEEN_OUT;
tw = new Tween(null, "", Strong.easeOut, square.scaleX, 1, 1, true);
tw.addEventListener(TweenEvent.MOTION_CHANGE, _syncScale);
tw.addEventListener(TweenEvent.MOTION_FINISH, _cleanTween);
}
Just do this as you're zooming in:
square.x = externalPoint.x - (internalPoint.x * square.scaleX);
square.y = externalPoint.y - (internalPoint.y * square.scaleY);
This assumes that the square has it's origin/registration point in the top left, and works by taking the distance between registration point and click (internalPoint) and then making sure that the same distance is kept, albeit scaled, after the scale is complete.
Explained in another way, it stores the center of the click in internalPoint (which is relevant to the top left of the square), and the stage position of that same point in externalPoint (which is absolute). This means that were you to instantly (before zooming) do the following, it would have no effect:
square.x = externalPoint.x - internalPoint.x;
After the scale however, the internalPoint no longer gives an accurate measurement of the absolute distance between the top left corner and the mouse click. Instead, you need to scale it the same amount that the square has been scaled, for that to be accurate, which is why my suggestion above should work.