Search the Community

Showing results for tags 'camera'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 296 results

  1. I am building an application that has a lot of requirement of the user to understand the world coordinate system, so I want to add in the bottom left corner of the screen a widget that shows the world axes and their rotations. I've succeeded in attaching the axes lines to the camera however as expected the parenting caused the axes' rotation to be bound to the camera's local rotation, not the world coordinate system. So my question is how to I attach the axes to the camera, BUT make sure their rotation is locked to the world coordinate system? Demo here:
  2. At least in the case of an ArcRotateCamera, the scene objects are not visible if the initial position of the camera is Vector3(0, 10, 0), or directly above. If its Z position is set even a fraction off of zero, there is no problem.
  3. Camera shake black bars problem

    Hi, I have a problem with camera.shake(). It shakes the screen instead of moving the camera and black bars appear. In this example, it works fine. What am I doing wrong? Im using Phaser 2.8.3 CE if (player.weapon.canFire) { var bullets =;, 400); }
  4. Sprite Manager

    Hello! I am looking at around 40 sprites which are actually being replaced with HD Images, I was wandering if there are ways to animate or any alternative solution as i'm struggling to find a solution to the lag and drop in frames currently which makes it look bad, I will insert a playground here with my current working version, but the main issue being the playground doesn't lag as it won't be loading my images and the size and scale of my images is far higher than the can't load texture issue. Secondarily, if anyone could tell me how to add a small amount of movement to look up and down but I want to prevent the camera looking more than 10/20 degrees above or below the mid point to keep it focused. The example mouse movement camera rotation and general project i'm using as inspiration can be found here:
  5. I just want to know how to set it so my camera rotation wont look all the way up and down id like it to look about 10% above and below where my content is, there is a link to the playground at the end. I have tried setting beta/radius/alpha limits, I have tried inertia, I have tried the height map stuff, I have tried everything I can think of or find in the documents.
  6. I wanted to know how to recreate the mouse movement effect I have found in an online example I am trying to recreate, the example is found here: Currently I get Jerky movements and fast rotation, I'm looking for infinite gradual scrolling effect which increases depending on mouse position, this is what im using for my mouse movement are there any alternatives or changes I can make to fix this? var mouse = {x:0,y:0}; var cameraMoves = {x:0,y:0,z:-0.1,move:false,speed:0.03}; function mouseMove(e){ mouse.x = e.clientX; mouse.y = e.clientY; camera.rotation.x += Math.max(Math.min((e.clientX - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed); camera.rotation.y += Math.max(Math.min((e.clientY - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed);
  7. Camera Events

    Hi, I'm trying to detect when a Camera (ArcRotateCamera) is changing. Is there any event like OnChange,...? I was trying to find it in the documentation without success. Thanks,
  8. Locked Axis

    I am setting up some camera rotation things and I want to know how to lock the camera rotation, so when I move the mouse on the y axis (the camera is pointing at the mouse btw) it is locked to stay looking at part of the screen that for examples sake is above 30% from bottom and below 70% of the scene? Also i want to know if i can set up a mouse hover for movement the pseudo code would follow; -detect mouse position -if position is under 40% from left to middle rotate camera left, if position is between 40-60% rotation left at a slower speed if position is greater than 60% from left to right rotate camera right I currently have it spinning the scene following the mouse, as simple as; function mouseMove(e){ camera.rotation.y = scene.pointerX/1000; camera.detachControl(canvas); } note: the detach control removes the click to drag default feature that i do not want.
  9. Camera and Sprite

    I have been working tirelessly with this and really struggling to get anywhere, if anyone can offer some form of assistance I would be greatly appreciative. I have essentially set up a reel of characters (staff) as sprites organised by co'ords in three circles, 12 characters per circle, around the camera set at (0,0,0), (Radius of circles are 1.5/1.45/1.4 I have a scene built currently which is super buggy in movement as well. I need it to when the mouse hovers on the left or right side of the screen to rotate the camera continuously scrolling through the images on loop (Cant get working past following the mouse - no loop - no smooth movement as mouse movement on y axis also rotates the camera. This is my mouse movement code: var mouse = {x:0,y:0}; var cameraMoves = {x:0,y:0,z:-0.1,move:false,speed:0.03}; function mouseMove(e){ mouse.x = e.clientX; mouse.y = e.clientY; camera.rotation.x += Math.max(Math.min((e.clientX - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed); camera.rotation.y += Math.max(Math.min((e.clientY - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed); The second main issue i'm having is that the sprites keep disappearing when rotating the camera, I'm trying to create a constant panable image reel from inside to view members of staff, there is an example i'm trying to follow and recreate found here: If anyone could tell me how to solve me mouse hover to move issue (with infinite looping) or a fix for the rendering of sprites issue it would be great! If anyone thinks they can help and needs any more code of any kinds just let me know and i''ll sort it! Thanks!
  10. I am developing a cross-platform overhead game using Phaser. Is there a way to always fix the position of a camera to a sprite? The following function works great, but I want the camera to always be centered on the sprite - even when the sprite is nearing the edge of the tilemap.; The reason I would like this capability is because I am developing a mobile game, and the player sprite manages to get in the way of crucial UI elements. This could be fixed by providing a constant camera on the sprite. Areas without tiles can be filled with a black background. Here is my problem visualized. As you can see, when nearing the edge of the tilemap, the sprite is no longer centered and it is in the way of my joystick. Instead, I would like the sprite to be centered and the camera to display a black background past the tilemap when it gets near edges. Thank you in advance, Christopher
  11. Arrow pointing to off-screen sprite

    Hello, I have a game with a larger than camera sized game world and I would like to display an arrow to an off screen sprite. I'd like the arrow to be pinned to the edge of the camera and of course rotate so the tip of the arrow points towards the sprite. Bonus if the arrow also disappears when the target sprite is in the bounds of the camera. Has anyone got any help on how to implement this?
  12. So my code currently looks like:, 1500, true);, this); However this.goToZone() is fired immediately, not after 1500 miliseconds. The fade effect does not show at all. If I comment out the onFadeComplete line, the fading does happen successfully. I've tried putting the onFadeComplete line before the fade line, but it has no effect. Does anyone know what is missing here? I'm using Phaser CE 2.8.3.
  13. Hi, I have issue with model imported from 3d max. Its just plane with normal map and color on top. (Simple material is part of MultiMaterial and is applied to all models). When I try to launch it in the game, first two models that are in centre of scene work as expected, but for other color is not applied (they are black), but normal map is working as expected. I found out that if I set camera radius so that all models are in camera viewport at the beginning , than color is working, also changing some props on the material , bring color back. (probably because of re-render). Any ideas what could cause it? Thanks.
  14. I'm displaying some items in the "billboard" mode: The items would need to maintain the same color (or change it just a bit with the camera rotations). I believe it must be very simple to do, but, still bein a novice, I do not know how ....
  15. Tablet touch camera

    Hey guys, I want to navigate the camera with the touch features from smartphone/tablet. Neither ArcRotate,Free or Touch-Camera works. Is Hand.js necessary? <!doctype html> <html> <head> <meta charset="utf-8"> <title>Babylon - Basic scene</title> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> <script type="text/javascript" src=""></script> <script type="text/javascript" src="./hand.js"></script> </head> <body> <canvas id="renderCanvas"></canvas> <script type="text/javascript"> // Get the canvas element from our HTML below var canvas = document.querySelector("#renderCanvas"); // Load the BABYLON 3D engine var engine = new BABYLON.Engine(canvas, true); // ------------------------------------------------------------- // Here begins a function that we will 'call' just after it's built var createScene = function () { // Now create a basic Babylon Scene object var scene = new BABYLON.Scene(engine); // Change the scene background color to green. scene.clearColor = new BABYLON.Color3(0, 1, 0); // This creates and positions a free camera var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); // This targets the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // This attaches the camera to the canvas camera.attachControl(canvas, false); // This creates a light, aiming 0,1,0 - to the sky. var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); // Dim the light a small amount light.intensity = .5; // Let's try our built-in 'sphere' shape. Params: name, subdivisions, size, scene var sphere = BABYLON.Mesh.CreateSphere("sphere1", 10, 1, scene); // Move the sphere upward 1/2 its height sphere.position.y = 1; // Let's try our built-in 'ground' shape. Params: name, width, depth, subdivisions, scene var ground = BABYLON.Mesh.CreateGround("ground1", 3, 3, 2, scene); // Leave this function return scene; }; // End of createScene function // ------------------------------------------------------------- // Now, call the createScene function that you just finished creating var scene = createScene(); // Register a render loop to repeatedly render the scene engine.runRenderLoop(function () { scene.render(); }); // Watch for browser/canvas resize events window.addEventListener("resize", function () { engine.resize(); }); </script> </body> </html>
  16. BabylonJS 3.0 introduces an "issue" where fog is applied with a falloff aligned with the screen plane when using an orthographic camera. This wasn't the case in 2.5. In the playground example below, what was a completely black square in 2.5 displays a red gradient starting from the center in 3.0. Was this intentional?
  17. i want to zoom to player position using pixi features. According to this comment. A camera is as easy as setting container pivot point to user position and move the container position to the canvas center. How about do a little more and zoom to the user position and make it look natural? I am currently using this const scaleDelta = -0.1; const offsetX = - (user.x * scaleDelta); const offsetY = - (user.y * scaleDelta); const currentScale = container.scale.x; let nScale = currentScale + scaleDelta; container.position.x += offsetX; container.position.y += offsetY; container.scale.set(nScale); This works when I am not using a camera, but looks jumpy when I add a camera. What is the solution with a camera?
  18. I am working on a project that switches between a handful of scenes. To do this I load all of my scenes at the start so you can switch between them quickly. You start out in an overall view of the area and you can click markers to go into rooms. In the rooms are more makers that are hooked up to click events. However If one of the markers in the scene is in the bottom left of the screen per say and I move to a different scene, If I would click in the bottom left of the screen the click event of the previous room triggers. How do I make sure that click events are only active for the currently active scene?
  19. I'm trying to make game resize appropriately to size of the window/screen. Everything's working out great, except for the tilemap. It seems like the rendering bounds are not updated. (typescript) onResize() {; var newWidth = window.innerWidth / 3; var newHeight = window.innerHeight / 3;, newHeight); = Phaser.ScaleManager.SHOW_ALL; //need to call this to apply new size?, newHeight); for (var i = 0; i < this.tilemap.layer.length; i++) { this.tilemap.layer[i].width = newWidth; this.tilemap.layer[i].resizeFrame(this.tilemap, newWidth, newHeight); this.tilemap.layer[i].crop(new Phaser.Rectangle(0, 0, newWidth, newHeight), false); this.tilemap.layer[i].updateCrop(); }, Phaser.Camera.FOLLOW_TOPDOWN, 0.8, 0.8); } As you can see I've tried everything, I would've expected resizeFrame or crop to do something, but unfortunately they don't. Do note that the rest of the game updates the size correctly, as the fish get rendered in the widened area just fine. Any ideas how to update the tilemap to the new size? Thanks!
  20. Another 2.4 to 3.0 issue. I have assigned W, A, S, D to a camera for movement ( ). In my app I need to click before being able to use movement controls. I think I duplicated the issue in the playground linked, but it also seems like it is a focus issue, but I don't have a 2.4 playground to compare it against (this appears to happen in 2.5 also). Just to be clear, in my app, using 2.4, I can immediately press movement controls (W, A, S, or D) and move, but now with 3.0 I need to click before this is possible. Thank you, amorgan
  21. I'm wondering if there's a way I can determine the Y position of a camera so the mesh its looking at completely fills the viewport. Basically I have a camera above the ground which is looking down to the ground at a 45 degree angle and is focusing on certain objects on the ground. Is this possible?
  22. Hi all, is it possible to disable camera movement except rotation, so as to get a streetview-like camera ? I prepare a playground : Here we have a sphere, with a spherical texture mapped on it, camera is placed on its center, and all we want for now it that user can't move, but still can look around. Is their a way to override movement settings, or other tweaks ? Thanks for helping
  23. I am creating a script that will move a box along the vector in front of the center of the camera: Apart from the textures not loading, why does this script seem to not process the collision of the box falling onto the larger box in BJS Playground? The box upon which the smaller box falls seems to flicker, then disappear entirely after the smaller box lands. It works fine on my server. Also, is there a more elegant way to accomplish this in BJS?
  24. Hi, I have animation of camera target (works only if some other property like alpha is animated at the same time) PG. If I switch tabs and wait a bit and come back to playground, alpha animation jumps to last frame as expected but target is moved to correct position but focus of camera stacks at last target positon before tab swicth. probably related to the same issue described here: