I've got an image that im trying to add to the current camera location of the Screenview ARSCNView session. Whatever I do it seems to put the image behind the current location of the phone camera and i have to move it back to see it. I have the following code:
var currentFrame = SceneView.Session.CurrentFrame;
if (currentFrame == null) return;
var threeVector = new SCNVector3(currentFrame.Camera.Transform.Column3.X + 0.005f,
currentFrame.Camera.Transform.Column3.Y - 0.02f,
currentFrame.Camera.Transform.Column3.Z - 0.05f);
var scaleFactor = imgToAdd.Size.Width / 0.05;
float width = float.Parse((imgToAdd.Size.Width / scaleFactor).ToString());
float height = float.Parse((imgToAdd.Size.Height / scaleFactor).ToString());
var box = new SCNPlane {
Width = width,
Height = height
};
var cubeNode = new SCNNode {
Position = threeVector,
Geometry = box
};
var mat = new SCNMaterial();
mat.Diffuse.Contents = imgToAdd;
mat.LocksAmbientWithDiffuse = true;
cubeNode.Geometry.Materials = new[] { mat };
SceneView.Scene.RootNode.AddChildNode(cubeNode);
Just trying to execute a simple idea of the ARKit paint apps that you see all over the app store now. So the imgToAdd is a snapshot of the scribble that the user has already put onto the screen and this event is fired at the touchended after an image is created from the view scribbled on.
Any ideas on what I need to change to get it to line up with the current view of the camera on the phone?
Related
i am new in cocos2d-js here, i just created this code:`
var that = this;
that._dice
// add player
// create sprite sheet
cc.spriteFrameCache.addSpriteFrames(res.dice_plist);
var spriteSheet = new cc.SpriteBatchNode(res.diceRed_png);
that.addChild(spriteSheet, 2);
// init runningAction
var animFrames = [];
for (var i = 1; i < 7; i++) {
var str = "dieRed" + i + ".png";
var frame = cc.spriteFrameCache.getSpriteFrame(str);
animFrames.push(frame);
}
var animation = new cc.Animation(animFrames, 0.1);
that.runningAction = new cc.Repeat.create(new cc.Animate(animation), Math.random()*10);
var diceSprite = new cc.Sprite("#dieRed1.png");
diceSprite.visible = true;
console.log(this.getContentSize(diceSprite));
diceSprite.runAction(this.runningAction);
that._dice.push(diceSprite);
var size = cc.winSize;
spriteSheet.setPosition(size.width/6.5, size.height/1.20);
spriteSheet.setAnchorPoint(0.5, 0.5);
spriteSheet.addChild(diceSprite, 2);
`
and i would like to use the getFrames() feature to return the array of ccanimation frames. i'm just thinking to get the information of which picture are being animated on the screen there, for example, if the #dieRed1.png is being animated or visible on the screen, it would show value or return value of 1. i have tried to googled around and cannot find any other clue there. if there is any better method, i would love to see that as well. sorry for the english anyway, a bit confused how to arrange the words. thank you :)
Ok, so refering to
the official docs
{Array} getFrames()
Returns the array of animation frames
Which means you can just do:
var frames = animation.getFrames();
To get the array. And then you'll receive an array of cc.AnimationFrame.
To get sprite link do:
var frame = frames[0];//cc.AnimationFrame
var spriteFrame = frame.getSpriteFrame(); //cc.SpriteFrame
var texture = spriteFrame.getTexture(); // cc.Texture
And the texture itself should have the name attribute which may do the job.
I've tried everything I can find suggested elsewhere and I've also tried every permutation of the code you can see below and I just cannot crack this.
The plot itself is working great there isn't an issue there. I have a certain screen in my application that I want to draw an OxyPlot onto this view but rotate 90 degrees to suit the data better (for various reasons the application is currently locked to portrait).
The code in the view is:
private void CreatePlotChart()
{
var normalRect = new CGRect(0,0, View.Frame.Width, View.Frame.Height);
var rotatedRect = new CGRect(0, 0, View.Frame.Height, View.Frame.Width); // height and width swapped
var plot = new PlotView();
var radians = -90d.ToRadians();
plot.Transform = CGAffineTransform.MakeRotation((nfloat)radians);
// plot.Frame = normalRect;
plot.Model = ViewModel.Model;
// plot.InvalidatePlot(true); // no discernable effect
Add(plot);
// plot.Draw(rotatedRect); // context error
View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
View.AddConstraints(
plot.AtTopOf(View),
plot.AtLeftOf(View),
plot.WithSameHeight(View),
plot.WithSameWidth(View),
plot.AtBottomOf(View)
);
}
The code above results in a chart as shown below, I also get this exact same chart if I pass in the rotatedRect to the constructor new PlotView(rotatedRect):
If I remove the use of constraints and pass in the rotatedRect like this:
private void CreatePlotChart()
{
var normalRect = new CGRect(0,0, View.Frame.Width, View.Frame.Height);
var rotatedRect = new CGRect(0, 0, View.Frame.Height, View.Frame.Width); // height and width swapped
var plot = new PlotView(rotatedRect);
var radians = -90d.ToRadians();
plot.Transform = CGAffineTransform.MakeRotation((nfloat)radians);
// plot.Frame = normalRect;
plot.Model = ViewModel.Model;
// plot.InvalidatePlot(true); // no discernable effect
Add(plot);
// plot.Draw(rotatedRect); // context error
// View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
//View.AddConstraints(
// plot.AtTopOf(View),
// plot.AtLeftOf(View),
// plot.WithSameHeight(View),
// plot.WithSameWidth(View),
// plot.AtBottomOf(View)
// );
}
I get a lot closer to the desired effect, as can be seen below:
If I go another step and "reset" it's frame to the cached normalRect I get even closer, with this:
All of these attempts feel too hacky. What is the best way of achieving the chart manipulation I need and maintaining the use of constraints to make sure things are positioned properly?
Update
If after the first chart is drawn and I kick off another select of data, the exact same code rendered the chart exactly correctly:
This is also 100% repeatable so I think this might be a bug in OxyPlot or some odd side effect of the way I'm using it.
I am trying to update the current rotation (and sometimes the position) of a CALayer.
What I am trying to in a couple of simple steps:
Store a couple of CALayers in an array, so I can reuse them
Set the anchor point of all CALayers to 0,0.
Draw CALayer objects where the object starts at a position on a circle
The layers are rotated by the same angle as the circle at that position
Update the position and rotation of the CALayer to match new values
Here is a piece of code I have:
lineWidth is the width of a line
self.items is an array containing the CALayer objects
func updateLines() {
var space = 2 * M_PI * Double(circleRadius);
var spaceAvailable = space / (lineWidth)
var visibleItems = [Int]();
var startIndex = items.count - Int(spaceAvailable);
if (startIndex < 0) {
startIndex = 0;
}
for (var i = startIndex; i < self.items.count; i++) {
visibleItems.append(self.items[i]);
}
var circleCenter = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));
/* Each line should move up and rotate accordin to this value */
var anglePerLine: CGFloat = (360 / CGFloat(visibleItems.count)).toRadians()
/* Starting position, 270 degrees is on top */
var startAngle: CGFloat = CGFloat(270).toRadians();
/* Lines default rotation, we rotate it to get the right side up */
var lineAngle: CGFloat = CGFloat(180).toRadians();
for (var itemIndex = 0; itemIndex < visibleItems.count; itemIndex++) {
var itemLayer = self.itemLayers[itemIndex];
itemLayer.opacity = 1 - ((0.9 / visibleItems.count) * itemIndex);
/* Calculate start position of layer */
var x = CGFloat(circleRadius) * cos(startAngle) + CGFloat(circleCenter.x);
var y = CGFloat(circleRadius) * sin(startAngle) + CGFloat(circleCenter.y);
var height = CGFloat((arc4random() % 80) + 10);
/* Set position and frame of layer */
itemLayer.frame = CGRectMake(CGFloat(x), CGFloat(y), CGFloat(lineWidth), height);
itemLayer.position = CGPointMake(CGFloat(x), CGFloat(y));
var currentRotation = CGFloat((itemLayer.valueForKeyPath("transform.rotation.z") as NSNumber).floatValue);
var newRotation = lineAngle - currentRotation;
var rotationTransform = CATransform3DRotate(itemLayer.transform, CGFloat(newRotation), 0, 0, 1);
itemLayer.transform = rotationTransform;
lineAngle += anglePerLine;
startAngle += anglePerLine;
}
}
The result of the first run is exactly as I want it to be:
The second run through this code just doesn't update the CALayers correctly and it starts to look like this:
I think it has to do with my code to update the location and transform properties of the CALayer, but whatever I do, it always results in the last picture.
Answered via Twitter: setting frames and transform is mutually exclusive. Happy to help. Finding my login credentials for SO is harder. :D
Found the answer thanks to #iosengineer on Twitter. When setting a position on the CALayer, you do not want to update the frame of the layer, but you want to update the bounds.
Smooth animation FTW
I have a moveTo sprite action and I am trying to have the sprite animate while moving. It is a waling animation.
My trouble is I can make the sprite moveTo or animate but not both together so that when the sprite stops moving the animation goes back to the standing frame.
I am using cocos2d-js v3.0
this.sprite = new cc.Sprite.create("#player-stand-f-0");
this.sprite.setPosition(new cc.Point(300,300));
this.addChild(this.sprite);
var animFrames = [];
var str = "";
for (var i = 0; i < 5; i++) {
str = "player-walk-f-" + i;
var spriteFrame = cc.spriteFrameCache.getSpriteFrame(str);
var animFrame = new cc.AnimationFrame();
animFrame.initWithSpriteFrame(spriteFrame, 1, null);
animFrames.push(spriteFrame);
}
var animation = cc.Animation.create(animFrames, 0.025);
var animate = cc.animate(animation);
sprite_action = cc.MoveTo.create(2,cc.p(x,y));
this.sprite.runAction(sprite_action);
this.sprite.runAction(animate);
I have also tried the following but the walking would animate once and not continue until moveTo stops.
var seq = cc.sequence(animate, sprite_action);
If you use "cc.sequence" action it will animate first then move. But if you want to animate the sprite sheet while moving it, there are two ways to achieve that:Look into "cc.Spawn" action. It is used for the purpose just like you need. Another convenient method is to run two actions concurrently.. Below mentioned code will give you the idea.
// create sprite sheet
cc.SpriteFrameCache.getInstance().addSpriteFrames(spritesheet_plist); // add Spritesheet Plist
var SpriteSheet = cc.SpriteBatchNode.create(spritesheet_png); // add Spritesheet Png
this.addChild(SpriteSheet,1);
// Push the frames for animation
var animFrames = [];
for (var i = 0; i < 6; i++) {
var str = "sequence_" + i + ".png";
var frame = cc.SpriteFrameCache.getInstance().getSpriteFrame(str);
animFrames.push(frame);
}
// taadaa ...!! Animate the sprites
var animation = cc.Animation.create(animFrames, 0.06);
var sprite = cc.Sprite.createWithSpriteFrameName("sequence_0.png");
sprite.setAnchorPoint(0.5,0.5); // optional
sprite.setScale(1.0,1.0); // optional
sprite.setPosition(widhthPostion, heightPosition);
sprite.runAction(cc.RepeatForever.create(cc.Animate.create(animation)));
SpriteSheet.addChild(sprite,1);
// Move the sprite
var actionMove = cc.MoveTo.create(duration, cc.p(destinationX, destinationY));
sprite.runAction(actionMove);
I create stage walls and a box inside on my mobile app using starling + as3.
Ok, now when I test the app the box falls but it does not match the walls, as if there
was an offset:
https://www.dropbox.com/s/hd4ehnfthh0ucfm/box.png
Here is how I created the boxes (walls and the box).
It seems like there is an offset hidden, what do you think?
public function createBox(x:Number, y:Number, width:Number, height:Number, rotation:Number = 0, bodyType:uint = 0):void {
/// Vars used to create bodies
var body:b2Body;
var boxShape:b2PolygonShape;
var circleShape:b2CircleShape;
var fixtureDef:b2FixtureDef = new b2FixtureDef();
fixtureDef.shape = boxShape;
fixtureDef.friction = 0.3;
// static bodies require zero density
fixtureDef.density = 0;
var quad:Quad;
bodyDef = new b2BodyDef();
bodyDef.type = bodyType;
bodyDef.position.x = x / WORLD_SCALE;
bodyDef.position.y = y / WORLD_SCALE;
// Box
boxShape = new b2PolygonShape();
boxShape.SetAsBox(width / WORLD_SCALE, height / WORLD_SCALE);
fixtureDef.shape = boxShape;
fixtureDef.density = 0;
fixtureDef.friction = 0.5;
fixtureDef.restitution = 0.2;
// create the quads
quad = new Quad(width, height, Math.random() * 0xFFFFFF);
quad.pivotX = 0;
quad.pivotY = 0;
// this is the key line, we pass as a userData the starling.display.Quad
bodyDef.userData = quad;
//
body = m_world.CreateBody(bodyDef);
body.CreateFixture(fixtureDef);
body.SetAngle(rotation * (Math.PI / 180));
_clipPhysique.addChild(bodyDef.userData);
}
The SetAsBox method takes half width and half height as its parameters. I'm guessing your graphics don't match your box2d bodies. So either you will need to make your graphics twice as big or multiply your SetAsBox params by 0.5. Also the body pivot will be in the center of it, so offset your movieclip accordingly depending on its pivot position.
Note that box2d has a debugrenderer which can outline your bodies for you to see what's going on.