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 312 results

  1. I'm still in the early prototyping phase so I suspect (hope?) my issue is one of overlooking a core tenant of Phaser... Also, I'm coding with Phaser CE 2.8.7 using Typescript/ES6. My primary game state is comprised of two classes: A combat class extending Phaser.Sprite which serves as a container for the 4 character atlases within, and, beneath, a UI Class extending Group which contains a few buttons and, to the right, a mini-map group comprised of a Tilemap and its lone TilemapLayer. (The star icon is a simple sprite on top of the tilemap layer which will later represent the player, but that is currently inactive.) The problem: as the characters advance to the right there's no problem until the camera kicks in. It "follows" the sprites just fine... BUT while advancing the camera seems to erase the tilemap layer as it goes, removing it entirely. When the characters return to the start position, however, the mini-map is restored as the camera passes from right to left. If I remove the camera altogether this never occurs, so it seems I've mismanaged the camera or the mini-map somehow. I've attached two screenshots: the first displaying the mini-map before the camera begins to erase it, the second as the camera begins to pass above the mini-map, erasing the image as it passes. I'll gladly provide any relevant code if needed...
  2. I want to make the camera follow my sprite around. (so my sprite is always in the center of the screen) What's the best way to go about this? Does Pixi have built-in camera functions? I thought about just moving everything else relative to my sprite, but I thought this wouldn't be the best way. I googled around a bit, but with no luck. Any tips or resources would be much appreciated. Thanks.
  3. Camera following with delay

    Hi guys, First excuse me for my english. I want the camera to follow a sprite and I set the position of this sprite every frame. function create(){ this.player = new Player(; this.playerController = new PlayerController(, this.player); this.cameraTarget =, this.player.y, "cameraTarget"); this.cameraTarget.anchor.setTo(0.5, 0.5);; } function update(){ this.playerController.move(); this.cameraTarget.x = this.player.x; this.cameraTarget.y = this.player.y; } This work but the camera have a small delay, here is some picture of this (red = player, yellow = cameraTarget). Not moving : Moving to the right : Moving to the left : You can see the delay of the camera with the yellow box's offset (Trust me the yellow box is always centered on my screen). The stranger thing is when I set the follow of the camera on the player it work well, no delay. Don't tell me to set the follow of the camera on the player plz, I need this cameraTarget for later calculations. Here is the gitHub if you want the code : If someone can help me with this it will be appreciated.
  4. Can anybody explain me how can I setup VRDeviceOrientationArcRotateCamera with gamepad controller. Is this already done or not? How can we attach gamepad with VRDeviceOrientationArcRotateCamera? Greetings Ian
  5. Hey guys... it's been a while, but things have been going pretty smooth with BJS. That is, until I upgraded to 3.0. My scene just up an disappeared! Digging into it, I found that it was when I set checkCollisions to true, the scene for that camera would just lock up the camera.... unable to move it at all. So.... = new BABYLON.ArcRotateCamera("ArcRotateCamera", 0, 0.8, 1000, new BABYLON.Vector3(0,0,0), sceneState.scene); = 5; = true; = new BABYLON.Vector3(2, 5, 2); = Math.PI/2; = .1; = sceneState.togScene.gridSize * 2; Fails... but... = new BABYLON.ArcRotateCamera("ArcRotateCamera", 0, 0.8, 1000, new BABYLON.Vector3(0,0,0), sceneState.scene); = 5; = Math.PI/2; = .1; = sceneState.togScene.gridSize * 2; ... is just fine. Thoughts? Did I miss some other setting or change with regard to moving to 3.0? (Actually, v3.1-alpha)
  6. Hi, Here is a basic scene to what I have so far: What I am trying to do: I am trying to make a camera that rotates around a parent object (sphere in my scene) without centering the target(what the camera looks at) to the parent. Desired outcome: When click and moving the mouse button, the parent object will be placed in the location "clicked" and the camera and target will rotate around the position of the parent object. What I tried: My idea's was to solve this were to find a way to remove the camera looking at the target, but been able to move and rotate around the target's position without the camera focusing on the target's position. This could still be the easier way, but I just cant figure out how to do this. Note: The zoom would still zoom in/out to the target, the same way as google maps zooms in on the mouse point, rather then the center of the screen. any help would be helpful. Thanks.
  7. 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.
  8. Hello! How can I the movement of the camera over the map, as with wildsavagekingdom? Look Someone a Playground Example ? Thanks.
  9. 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:
  10. Hello! I'm not well versed in game development but I write a lot of JS for my classes and my job, so I'd like to think I have some semblance of knowing what I'm doing, but the issue I'm having with Phaser right now is completely beyond me. It's hard to accurately describe my problem in words, so I've left the entire project as an attachment for you to see for yourself. (Cursor keys to control.) Essentially, I'm trying to write a simple platformer using a tilemap larger than the screen. However, when the camera is set to follow an object, and that object crosses the center of the window in a given direction on either axis, the camera slides in that direction at high speed - it seems to depend on how far you've crossed the threshold - until it reaches the stage boundary. The most difficult part is that the object seems to move properly relative to the camera - meaning it moves across the stage itself at very high speeds, confusing the arcade physics system and causing clips and zips galore if you're in the wrong places (try jumping under the spawn platform, for instance - you'll zip to the left or right) The problem doesn't happen at all when the stage size is equal to the game window size, nor does it happen if the camera is not following an object. Here are some things I've tried to resolve the issue: Removing game window scaling code Rewriting of Tilemap import code & use of different maps and tilesets Refactoring/simplification of the Player object (as well as forgoing the use of a class and extending Phaser.Sprite) Applying "layer.fixedToCamera = false" and "layer.fixedToCamera = true" Restarting the project and rewriting all code (this happened on a prior test project as well) Rolling back to some prior versions of Phaser I'm not certain whether the issue is with my Tilemap setup, my use of the camera, the general jankiness of the arcade physics system, or maybe something else I haven't taken into account, but given half of my Google searches lead here, I'm sure someone's got some kind of answer for me. For convenience, here's the important bits of my code, in case anything looks off at first glance: (game.js, the main game code) 'use strict' /* global Phaser, Player */ var game = new Phaser.Game( 161, // width 145, // height Phaser.AUTO, // idek 'game', // game name { create: create, update: update, preload: preload, render: render } // functions ) game.antialias = false function preload () { game.load.tilemap('mapTest', 'assets/map/testmap.json', null, Phaser.Tilemap.TILED_JSON) game.load.image('tileGrass', 'assets/img/grass.png') game.load.image('bgClouds', 'assets/img/bg.png') game.load.spritesheet('spritePlayer', 'assets/img/player.png', 9, 9) } let bg, player, map, layer function create () { // display background bg = game.add.image(1, 1, 'bgClouds') bg.fixedToCamera = true // instantiate the map map = game.add.tilemap('mapTest') map.addTilesetImage('tileGrass', 'tileGrass') layer = map.createLayer('terrain') map.setCollisionBetween(1, 10, 'terrain') layer.resizeWorld() layer.debug = true // initialize physics and set gravity game.physics.startSystem(Phaser.Physics.ARCADE) game.physics.arcade.gravity.y = 257 // set up the player player = new Player(game, 33, 49) game.physics.arcade.enable(player) // set game scale game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE game.scale.setUserScale(6, 6) game.renderer.renderSession.roundPixels = true Phaser.Canvas.setImageRenderingCrisp(game.canvas) // camera: follow the player } function update () { game.physics.arcade.collide(player, layer) } function render () { game.debug.body(player) game.debug.body(layer) game.debug.text(Math.round(player.body.position.x), 9, 17) } game.antialias = false (player.js, the Player object file) /* global Phaser */ class Player extends Phaser.Sprite { constructor (game, x, y) { // set up the player super(game, x, y, 'spritePlayer') // physics game.physics.enable(this, Phaser.Physics.ARCADE) this.velCap = {x: 64, y: 150} this.jumpVel = -100 this.acceleration = 500 // units per second // animations this.anims = { 'idle': this.animations.add('idle', [0, 1, 2, 3], 6, true), 'walk': this.animations.add('walk', [8, 9, 10, 11, 12, 13, 14, 15], 15, true), 'down': this.animations.add('down', [21, 22], 15, false), 'jump': this.animations.add('jump', [16, 17, 18, 19], 15, false), 'fall': this.animations.add('fall', [19], 20, true), 'land': this.animations.add('land', [20, 21, 22, 23], 10, false) }'idle') this._facing = true this.anchor.setTo(0.5, 1) this.body.setSize(6,8,1,0) this.body.tilePadding.x = 12 this.body.tilePadding.y = 12 // input this.keys = game.input.keyboard.createCursorKeys() // add the player to the stage game.stage.addChild(this) } // facing code set face (bool) { if (bool) { this.scale.x = 1 } else { this.scale.x = -1 } this._facing = bool } get face () { return this._facing } update () { let airborne = !(this.body.blocked.down || this.body.touching.down) let dt = game.time.physicsElapsed if(this.keys.right.isDown) { this._move(dt, true, airborne) } else if(this.keys.left.isDown) { this._move(dt, false, airborne) } else{ this._decelerate(airborne) } if(this.keys.up.isDown && !airborne) { this._jump() } else if(this.keys.down.isDown && !airborne) { this._crouch() } this._capMovement() } _move (dt, right, airborne) { if(this.face != right){ this.face = right if(!airborne){ this.body.velocity.x = -this.body.velocity.x } } else { this.body.velocity.x += Math.floor(this.acceleration * (right ? 1 : -1) * dt) if (airborne) {'fall') } else {'walk') } } } _jump () { this.body.velocity.y = this.jumpVel'jump') } _crouch() { // stop all movement and crouch the player this.body.velocity.x = 0 if( != 'down'){'down') } } _decelerate(airborne) { this.body.velocity.x = this.body.velocity.x / 2 if(airborne){'fall') } else {'idle') } } _capMovement () { if(this.body.velocity.y > this.velCap.y){ this.body.velocity.y = this.velCap.y } else if (this.body.velocity.y < -this.velCap.y) { this.body.velocity.y = -this.velCap.y } if(this.body.velocity.x > this.velCap.x){ this.body.velocity.x = this.velCap.x } else if (this.body.velocity.x < -this.velCap.x) { this.body.velocity.x = -this.velCap.x } } } Thanks in advance!
  11. Hi, Need some help with scene, skybox and camera adjustments. Scene not covering skybox. My working area 10000,10000,10000. Just rotate scene and you will see what I mean. Any help will be appreciated.
  12. Sprite Movement

    Hey Guys, I'm currently moving my camera around a series of sprites but the movement is painful to look at and jerky when moving the sprites and especially with higher speeds, is there anything you can do to fix/help the lag/poor performance as it isn't really usable as a build in this current state. I also as @Wingnut said have the issue that the transparent background is still clickable. Here is my current playground: @Deltakosh @Wingnut @JohnK Any incites Guys?
  13. Hello, I'm currently building a scene where a person walks through a room. There are several objects in the room. When I run and run against a large mesh, I collide and can't get through (it's wanted). When I walk towards a low (low height) mesh, I'm suddenly reset, probably to the old position. Camera position: [0.1.2, -2.25] Camera ellipsoid: [0.5,0.59,0.5] Scene gravity: [0, -9.81, 0] Bottom is at y = 0 How do I set the camera's collisionsbox correctly to run on the floor and not get the effect of low meshes? Thank you.
  14. Hey Guys! I have a video demo of what my build, What i'm struggling with is how to make it seem flatter when panning from left to right and hiding the fact you can see the edges or the circle the sprites are positioned in and can tell they are coming round in a circle not across a flat image, which is the effect i'm after. Here is a youtube video of my current build, and a babylon playground with broken textures (sorry!) to view how i'm going about the build! Playground: Youtube:
  15. How can we lock arc camera so we can not set camera with mouse up or down ? gretings Ian
  16. Editor bug with Editor camera

    When I've tried to load .babylon model to the editor, I've receive a message: "ERROR: Cannot insert node with id=EditorCamera (text: EditorCamera) because another node with the same id already exists." Then I've checked the .babylon file but haven't found any object with id "EditorCamera" office.babylon
  17. Tilemap gets clipped

    Hello all, if i display a tilemap and then move the camera the tilemap gets clipped. When i first load the tilemap everything is rendered properly (red border is the canvas size) but then when i move the camera a bit it looks like this The tilemap is still in the canvas but it doesn't get fully rendered. Here is also a modified example from to demonstrate that problem: just draw some tiles and then move the camera with the arrow keys Any help would be appreciated.
  18. 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.
  19. 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); }
  20. 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:
  21. 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.
  22. 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);
  23. 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,
  24. 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.
  25. 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!