I am trying to animate a figure and adding a health bar over it. I created the figure from a sprite (new PIXI.sprite()) and the health bar from a graphics object (new PIXI.Graphics()).
I am able to move the sprite by setting its X,Y coordinates, but when I do the same with the Graphics object it is always displaced, it looks like its origin is the current position of the sprite. See the following picture. The health bar should be above the figure.
var app = new PIXI.Application(windowWidth, windowHeight, {backgroundColor: 0x1099bb});
var prey = new PIXI.Sprite(texturePath);
var healthBar = new PIXI.Graphics();
healthBar.beginFill(0x00BB00);
healthBar.lineStyle(1, 0x000000);
healthBar.drawRect(prey.x - spriteLength, prey.y - spriteLength, spriteLength, 5);
prey.energyBar = healthBar;
app.stage.addChild(prey);
app.stage.addChild(healthBar);
prey.energyBar.position.set(prey.x,prey.y);
How can I set the position of the health bar to be right above the figure?
A better way to do this would be to have the healthbar as a child of the prey Sprite itself. As an example (bits you've already solved missed out)
var prey = new PIXI.Sprite( texturePath );
var heathbar = new PIXI.Graphics();
healthbar.y = -100;
prey.addChild( healthbar );
app.stage.addChild( prey );
Now, that the health bar is a child of your prey Sprite, when you move the prey Sprite around, the healthbar will move with it (which I presume is what you would want in your situation).
Setting the initial coords of the health bar to (0,0) fixed the issue.
healthBar.drawRect(0, 0, spriteLength, 5);
Related
I'm working on a game in Xamarin. I have a plane that I want to fly from one side of an arc to the other while rotating the plane so the plane stays parallel to the arc.
Any suggestions?
Update
I was able to get this to work using a combination of CCBezierTo and CCRotateTo.
As I mentioned in my update I was able to accomplish this by using a combination of CCBezier and CCRotateTo.
var duration = 5.0f;
mysprite.RunActionAsync(new CCBezierTo(duration, new CCBezierConfig()
{
ControlPoint1 = new CCPoint(180, 200),
ControlPoint2 = new CCPoint(650, 600),
EndPosition = new CCPoint(1130, 200)
}));
mysprite.RunActionAsync(new CCRotateTo(duration, 90));
The ControlPoint2 is the top of the arc.
How can i achieve THREE.js pointerlock controls example functionality but move around programmatically (values from accelerometer device) instead of mouse movement?
THREE.PointerLockControls (next: Module) works this way:
Module makes a construction yawObject -> pitchObject -> camera (pitchObject is a child of yawObject and camera becomes a child of pitchObject).
You add yawObject (which you could get from Module with yourControls.getObject() function) to your scene (to keep transforms updated).
Module adds 'mousemove' event listener and updates yawObject.rotation.y and pitchObject.rotation.x when you move mouse if yourControls.enabled !== false.
Next if you are interested in actually locking cursor you could do it in your client code as in example.
And to update your camera position you could manipulate yawObject's position (yourControls.getObject().position).
So to manipulate controls without mouse you could setup Module this way:
camera.position.set(0, 0, 0);
camera.rotation.set(0, 0, 0); // THREE.PointerLockControls does this too
var myControls = new THREE.PointerLockControls(camera);
var controlsObject = myControls.getObject();
controlsObject.position.set(myEntryX, myEntryY, myEntryZ); // set starting point
controlsObject.rotation.y = myEntryYaw; // rotate yaw obj
controlsObject.children[0].rotation.x = myEntryPitch; // rotate pitch obj
scene.add(controlsObject);
and then keeping myControls.enabled = false manipulate controlsObject.position, controlsObject.rotation.y, controlsObject.children[0].rotation.x.
I'm new in THREE.js.
I'm trying to get 3D coordinates of point on mouse click on the object (not simple objects: Box, Sphere,..) in Canvas.
In detail, I'm working with 3D objects viewer - I have camera (THREE.PerspectiveCamera), mouse controls (rotate, zoom, move), add/remove objects (my own object, loaded using loaders for THREE.js) in scene,.. And I want to add a function, which gets 3D coordinates for clicked point in 3D.
Exactly, I want coordinates of the end point of a ray - begining from mouse click on the camera_near_window and ending to the object's point, I've clicked on..
I tried a lot of ways to do it:
Getting coordinates of point on z=0 plane -- It works fine, but it is on z=0 plane and it is not that I need, cause I have OrbitControls..
THREE.js example - clickable objects -- It uses CanvasRenderer (not WebGLRenderer) and works for a little objects (but works for my project): browser crashes when I load many objects (CanvasRenderer needs 5x more memory then WebGLRenderer).
"How to get object in WebGL 3d space from a mouse click coordinate" - I tried this one too, but raycaster.intersectObjects found nothing, intersects was an empty array (maybe it works for only simple objects like box, sphere,..).
Can anyone show me the demo code which gets 3D point coords for clicked point of clicking object in 3D, please..?
So, as I think this question is useful for someone, I'll answer it myself (I'll write my resolve):
var renderer, canvas, canvasPosition, camera, scene, rayCaster, mousePosition;
function init() {
renderer = new THREE.WebGLRenderer({ antialias: false });
canvas = renderer.domElement;
canvasPosition = $(canvas).position();
camera = new THREE.PerspectiveCamera(20, $(canvas).width() / $(canvas).height(), 0.01, 1e10);
scene = new THREE.Scene();
rayCaster = new THREE.Raycaster();
mousePosition = new THREE.Vector2();
scene.add(camera);
var myObjects = new THREE.Object3D();
// myObjects.add( your object );
// myObjects.add( your object );
// myObjects.add( your object );
myObjects.name = 'MyObj_s';
scene.add(myObjects);
};
function getClicked3DPoint(evt) {
evt.preventDefault();
mousePosition.x = ((evt.clientX - canvasPosition.left) / canvas.width) * 2 - 1;
mousePosition.y = -((evt.clientY - canvasPosition.top) / canvas.height) * 2 + 1;
rayCaster.setFromCamera(mousePosition, camera);
var intersects = rayCaster.intersectObjects(scene.getObjectByName('MyObj_s').children, true);
if (intersects.length > 0)
return intersects[0].point;
};
I have a sphere model along with html text labels overlayed onto it at fixed positions. How can I hide them when they are behind the object when i am rotating my sphere using orbit controls?
Anyone knows about any references on stackoverflow or any examples which can solve my issue?
See this example how you could do it: http://jsfiddle.net/L0rdzbej/194/
I have put the relevant code in the updateLabelVisibility()-function, it looks like this:
var meshPosition = mesh.getWorldPosition();
var eye = camera.position.clone().sub( meshPosition );
var dot = eye.clone().normalize().dot( meshPosition.normalize() );
//IS TRUE WHEN THE MESH IS OCCLUDED BY THE SPHERE = dot value below 0.0
var ocluded = dot < -0.2;
if ( ocluded ) {
// HIDE LABEL IF CAMERA CANT SEE IT (I.E. WHEN IT IS BEHIND THE GLOBE)
label.style.visibility = "hidden";
}
else {
// DISPLAY LABEL IF MESH IS VISIBLE TO THE CAMERA
label.style.visibility = "visible";
}
Where mesh is the marker where your label is attached to. The dot is basically telling you how far around the sphere it is, within a certain distance of 90 degree. Simply said by values below zero the label is longer visible by going further around the back.
To be fair I based this off some code from: https://zeitgeist-globe.appspot.com/
i want to show a mesh (like gunshot) in front of my perspective camera(with first person controls) i wrote this code in the render function of my page:
var pos = camera.position;
var rot = camera.rotation;
shot.rotation.x = rot.x;
shot.rotation.y = rot.y;
shot.rotation.z = rot.z;
shot.position.x = pos.x;
shot.position.y= pos.y;
shot.position.z = pos.z + 500;
if i just change the position of my camera its good, but if i change the camera's rotation i don't see the shot in front of that.
how can i do this?
It would seem that you need to make the "shot" a child of the camera. It's not clear from your example whether you're doing that already, but this should make the shot move around with the camera properly.