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
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 382 results

  1. lucasg07

    Custom camera when falling down

    Hi, I'm basically making a doodle jump based game, but since I'm really new to Phaser and barely find any examples on how to handle a custom camera, I'm asking for help on this forum. I want the camera to follow the player when it goes up, but stop following the player as it goes down. I've looked at a lot of Phaser 2 examples but these confuse me only more. This is my code for the camera, right now it basically follows the player up and down. (the clouds are removed below the camera view, so the player keeps falling when it misses a cloud) cameraMovement() { this.cameras.main.setBounds(0, - this.player.yChange, 500, 800); this.cameras.main.startFollow(this.player); }
  2. I'm using the Babylon toolkit for Unity and I'm trying to use the script 'CameraRig.cs'. I've attached the script at the main camera, but nothing happen. Can someone help me to figure out how to add an orbit camera ? I'm developing a 3d viewer so the camera should only orbit around the object. I know how to do it babylonjs alone, but I don't understand how I can use the script in the toolkit. thanks
  3. Good day, Sir. First, I want to say Thanks to everyone, who spent time to read this, I will be glad and happy to hear any advices or notes about this issue. Here is a PG: Please, hide the SetEnviroment(), getPointsArray() and cameraMoveAnimation() functions bodies to make code more readable, I specially out them from main code. As you can see, there is 2 important lines: 82 and 83. Each points from "points" array is a real data from real project, that is not random numbers. So, the camera should move from: point1 to point2, then point2 to point3, then point3 to point4, and so on. There is no problems in start points, it's moving smoothly, but at point7 to point8 (and some others) camera rotates around itself. (Playground setted by default to reproduce this). It look like... flipping possible. I am using pivot method to create camera, and I can not use ArcRotateCamera in real project, because in some points it's broken because of gimbal look, for example, at point8 as I remember, it will dispose, and then appear, ArcRotateCamera was first, what I tried. So, the question is: how to prevent camera flipping around itself? ===================== upd: I tested a little more, if I am using lookAt method without animation and just setting new quaternion, it reproduces the same problem, but I don't have any idea why it happens and why it's changing rotation angle. ======================= upd2: I made additional example, which shows problem from outside: As you can see, big red sphere doing strange movement but if you change animation arguments in lines 82 and 83 from points[7], points[8] to points[6], points[7], sphere will do exactly what I needed, so what is it? Why it happens? How can I prevent this?
  4. Howdy friends, Got an issue I'm trying to sort out with how I want to customize the input controls for the ArcRotate Camera. I'd like to take the existing ArcRotate Camera and keep the Alpha inputs standard, but update the Beta inputs to move the lockedTarget of the camera. So imagine "scrolling" the canvas would move the camera and instead of move the Beta of the camera. Unclear where to begin on this. @Deltakosh I'd setup a playground but given it wouldn't be much more than the default ArcRotate template I've not done that here. Thanks for any help/suggestions! JPS
  5. Hi, I would like when I start the device orientation camera that the orientation is as a real world? For example, if I create 4 cubes around me with north, east, west and south, I want to see the north cube when my smartphone is facing north. Thank you very much in advance for your help. Stephan
  6. Not sure if it's a bug but it seems like camera property idleRotationWaitTime is not working. Look at this playground, whatever the time you put, it always wait 2-3 seconds before starting moving again :
  7. wantafanta

    Exclude graphics from Camera Shake

    I am using the "camera.main.shake()" function How to do make sure that certain graphics like the UI ignore the shake? For example if had this box var newGraphic ={ lineStyle: { width: 2, color: 0x555555 }, fillStyle: { color: 0xeeeeee } }); var rect = new Phaser.Geom.Rectangle(); rect.width = 500; rect.height =500; rect.x = 0; rect.y = 0; newGraphic.strokeRectShape(rect); Thanks
  8. The title says it all. I have a room with PBR walls\floor\ceiling. I have a mirror on the wall and I want to make some object inside the room invisible unless you look at it through a mirror. How can I make this work using BJS?
  9. Hi, how do I make a UniversalCamera rotate on mouse move without the user having to click and drag on the canvas? Sorry for such a noob question, I just can't figure it out. Thanks.
  10. Today I got a headache from how... why... phaser3 handles the camera.setZoom(); - First thing I learned: all bodies need to be recalculated after .setZoom. - in WebGL works as expected. - in Canvas, Tilemaps are huge, the zoom isn't on point and even by recalculating the bodies, collision is way off. This could be reproduced by using this code and setting WebGL / Canvas. The code behaves differently depending on which you choose, and neither of both has a valid result. Am I missing something? Game config: // Game config type: Phaser.WEBGL, width: WIDTH, height: HEIGHT, scene: Level, resolution: 1, pixelArt: true, antialias: false, hidePhaser: true, roundPixels: true, backgroundColor: '161C22', zoom: 1, physics: { default: 'arcade', arcade: { gravity: { x: 0, y: 250 }, debug: true } }, tilemaps and camera: // Tilemap method setMap() { // # Add Tilemap = this.make.tilemap({ key: 'map', tileWidth: 8, tileHeight: 8 }) const tileset ='tilemap'); // # Add Tilemap Layers this.config.layers.background =, tileset); this.config.layers.midground =, tileset) this.config.layers.ground =, tileset); this.config.layers.forground =, tileset); this.config.layers.water =, tileset); // # Configure Tilemap Layers // replace with array of actual bodies this.config.layers.ground.setCollisionBetween([]);[0].objects.forEach((obj)=>{this.setMapObject(obj)}); // # Configure z indexes this.config.layers.background.setDepth(0); this.config.layers.midground.setDepth(1); this.config.layers.ground.setDepth(2); this.config.layers.objects.setDepth(3); this.config.layers.enemies.setDepth(4); this.config.layers.player.setDepth(5); this.config.layers.effects.setDepth(6); this.config.layers.water.setDepth(7); this.config.layers.forground.setDepth(8); this.config.layers.overlays.setDepth(9); this.config.layers.ui.setDepth(10); this.setTransition(); } // # Configure main camera const m =;, 0, m.widthInPixels, m.heightInPixels, true, true, true, true); this.cameras.main.setBounds(0, 0, m.widthInPixels, m.heightInPixels); this.cameras.main.setZoom(8); this.cameras.main.setRoundPixels(true); this.cameras.main.useBounds = false; this.config.layers.ground.setCollisionBetween(0, 8000); // add sprites this.config.player = new Player({ scene: this, x: 20, y: 30}); this.cameras.main.startFollow(this.config.player); this.physics.add.collider(this.config.player, this.config.layers.ground); Any thoughts, on this, would be helpful.
  11. This is the order in which the cameras (relevant to me) extend each other, but also often override each other: UniversalCamera extends TouchCamera extends FreeCamera extends TargetCamera [extends Camera.] How come FreeCamera doesn't use rotationQauternion and allow rotation around its Z (roll) axis by default? After all, TargetCamera does use quaternions, even though it ignores the Z axis by design. But a FreeCamera should be that much free, right? Wrong? I saw that FreeCamera abstracts its inputs. It would make sense for the mouse input to use quaternions for full freedom of rotation in all axis. Desu ne? I'm itching to make a pull request that, while keeping backwards compatibility, adds more freedom to rotation (Z axis roll) and movement (QE for In/Out.) But I'm new, so I don't want to code stuff and then get denied. Visualization aid:
  12. Need some help. I try to find what I am missing hear for days. But I don't get it.. Maybe someone of you can point me in the right direction. A moving sprite, that is followed by the camera, disappears on "certain" areas. For example in one scene: it disappears in the upper left and most left areas of the scene. In some others on all areas around the borders of the world. - Tilemaps and every other object are still visible. 1. The moving sprite does not involve any alpha 0 / 1 settings 2. The moving sprite does not die/destroy 3. The moving sprite does not set any kind of BlendMode 4. The moving sprite does not set any visibility 5. There are NO overlays that could cover up the moving sprite 6. Worldbounds and main cameras bounds are set (code below), 0, * SCALE, * SCALE, true, true, true, true); this.cameras.main.setBounds(0, 0, * SCALE, * SCALE); I also tested adding a second camera, it is the same behavior, but here I can see, any time the moving sprite disappears, the camera background is set to a different color... and I don't know why this is happening. The game's code is too much to post it all. But basically, the only thing with bounds that is set, are the two lines, I posted here. At this time it is quite confusing and I already spend days investigating in it. I got no clue, why this is happening. Any hint is highly appreciated! cheers
  13. I apologize in advance if this should be obvious... Regarding destroying / removing cameras that I don't need anymore, I came across these two descriptions in the documentation that sound a bit contradicting to me: Camera.destroy(): CameraManager.remove(camera): So for destroy() it says that I should use CameraManager.remove(). However for remove() it says that I need to call Camera.destroy() to clear all references. @rich What's the "clean" way to do it? Call remove() first and then destroy() after? Or just one of the two?
  14. I'm working on a camera that behaves as if tracking a spaceship. The Z axis rotation shouldn't affect looking up/down and right/left, as if I'm the pilot in the cockpit of the ship in space, up is always my local up. I tried the FollowCamera, but it only lets me rotate the target mesh so the camera yaws, but doesn't roll or pitch. I tried the Free/Universal cameras, but rotating the camera to roll skews the yaw and pitch, as if they're in global dimensions - instead of local. I couldn't find a local/global rotation option, or figure out using quaternions/matrices with it, no matter how much I read about those and tweaked the code. I know I could make this spaceship camera from scratch, using an empty/mesh as a pivot, but I don't want to miss on using the quality code that comes with the engine already. Any suggestions?
  15. Whether Camera is the parent of a Mesh (in example below), or the other way around (in my personal project), when moving "fast" at speed = 1000, eventually there is some (discrepancy) jitter visible on the mesh - although it's probably the camera that isn't set correctly (some matrix?) Just click, rotate some, then hold Up and Left arrows and wait til the jitters come, at a few seconds in. Just an example of keys used. Even after stopping, if you try to move a bit or look-around, the jitter is already there. A painful bug for my space sim, where I need to move sonic faaaaast!
  16. Hello Is it possible to display only part of the rendering of a camera? For example a fixed camera that films a scene by far and we just re-frame a small part and move the frame. Thank you
  17. Hi, I would like to prevent the headset from changing the position of the camera, and keep only the device's rotation. Did I miss something ? Here's a PG of what I've tried: Tested on Firefox + HTC Vive. Thanks !!
  18. Hi All I have a 3D scene (a house) and I am wanting to navigate the scene using mouse inputs that similar to that used in other 3D CAD software applications. Specifically I am trying to acheive the following:- MIDDLE MOUSE BUTTON: PAN LEFT / RIGHT / UP / DOWN MIDDLE + RIGHT MOUSE BUTTON: ROTATE X/Y/Z MOUSE WHEEL: ZOOM IN / OUT Using the above controls you will see it is not possible to move/pan the camera position IN/OUT however it is possible to rotate, pan and zoom on the object of interest. Effectively the PAN mouse inputs will enable the focal point of the camera to be repositioned in 3D space, all ROTATE and ZOOM actions are performed around this 3D point. Hopefully the explanation of what I am trying to do is understable. I have tried using ArcRotateCamera (e.g.) var camera = new BABYLON.ArcRotateCamera("camera1", -90*Math.PI/180, -180*Math.PI/180, 100, new BABYLON.Vector3(0, 0, -0), scene); camera.lowerBetaLimit = -Math.PI; camera.upperBetaLimit = Math.PI; camera.allowUpsideDown = true; camera.checkCollisions = false; camera.panningSensibility = 20; This camera is a good starting point but it does not achieve my goal (as above) - i.e. panning and rotations do not work as I desire. I wanted to know if it was possible to override the inputs for a given instance of a camera (i.e. so I can remap the mouse inputs and override how rotations and panning is handled). However, I have not found a post that explains this ability. I am slowly coming to the conclusion that you have to create your own custom camera. I have read [ ] but it is not clear to me what I am supposed to do... I did a Frankenstien experiment (I literally created a monster) by creating a new custom input based off the "class FreeCameraMouseInput implements ICameraInput<FreeCamera>". To do this I did the following: (a) extracted the TypeScript code, (b) converted it to JavaScript, (c) referenced it as a new input for my camera - NOTE: I did not make any changes to the TypeScript file. Here is the result (see lines 9~10): The inputs seem to be working - but I am not sure what I am supposed to do next to configure the input configuration as defined at the beginning of this post. If you look at lines [ 101~103 ] you will see I added some logic to capture the mouse wheel event - but I do not know how to obtain the wheel delta (e.wheelDelta). I also do not know how to detect the middle + right mouse button press event... If anyone can guide me (or possibly tweak the playground code) I would very much appreciate. Thanks Rolento
  19. What is the BEST way to move a camera by position... When using one of the built-in cameras ... you get good smooth movement... If I try to manually move the camera around using camera.position I don't get the desired effect. I can move the camera around using code like this (delta movements from input): public updateCameraPosition(camera: BABYLON.FreeCamera, horizontal: number, vertical: number, speed: number): void { if (camera != null) { var local = camera._computeLocalCameraSpeed() * speed; var cameraTransform:BABYLON.Matrix = BABYLON.Matrix.RotationYawPitchRoll(camera.rotation.y, camera.rotation.x, 0); var deltaTransform:BABYLON.Vector3 = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(horizontal * local, 0, vertical * local), cameraTransform); camera.cameraDirection = camera.cameraDirection.add(deltaTransform); } } but when I just try set camera position... its funny (I know that vague)... But it would hard to show with all the "Test Project Code" I am using to learn how to move a camera around "Unity-Style" Just wondering of simply setting camera.position (on a universal camera) should give me free range movement like a unity camera.
  20. Hello, I am looking for camera examples that can run on mobile and use touch events to implement rotation, zoom operations. Any help will be appreciated.
  21. Hi, Not sure if it's a bug (rather an observation), but when I'm using BABYLON.DefaultRenderingPipeline(), it remove cameras from the given array. I think the function should make a copy of the given array, because if I give scene.cameras, the function remove cameras from the scene. Here's the PG: Thank you !!
  22. Playground demonstrating the issue: Explanation: I'm trying to create a simple walk around scene and the built in collision system seems to work pretty darn well (Who needs a physics engine anyway?) but I've noticed that when I add any kind of slope the camera will slide down it -- in a real hurry too if gravity is set realistically! I noticed that this doesn't happen with the stairs in the Espilit demo, but looking at the scene file and demo.js I can't figure out how it's managing that. Is there a friction setting or something that I can set for objects like stairs and ramps?
  23. kurhlaa

    Incomplete camera's FadeIn effect

    Hi, It seems something is not finishing in the camera's fadeIn effect. If I use this code: var camera = scene.cameras.main; scene.time.delayedCall(5000, function() { camera.fadeOut(250); }, [], scene); camera.on('camerafadeoutcomplete', function() { camera.fadeIn(250); }); ... after the end camera stays a little dark, like not fully transparent. I've compared 2 screenshots. At the moment I'm forced to call camera.resetFX() to make colors brighter again. Can this be fixed?
  24. Simple: I need the Rotation Matrix from the default Arcrotate Camera. I read somewhere in the forum, i need to decompose the Camera Matrix, i can' t find it anymore. Subquestion: It is possible to grab the data via mouseevents ? Thanks' Playground:
  25. juanmajr93

    Universal camera

    Hi all, I am using new UniversalCamera to allow access of application web from pc or mobile devices. However It doesnt work so good. I have been testing example of @davrous and It is perfect!. Maybe I need to reprograme some tips of this camera. Now I can only turn camera in my tablet but i cant move. The version of BabylonJS that I am using is v 2.6 alpha Params of my camera: var camera = new BABYLON.UniversalCamera("universalCamera", new BABYLON.Vector3(600, 200, -500), scene); camera.setTarget(new BABYLON.Vector3(0,0,0)); camera.speed = 5; camera.checkCollisions = true; camera.ellipsoid = new BABYLON.Vector3(2, 3, 2); camera.attachControl(canvas); Thanks you very much!!!