Search the Community

Showing results for tags 'camera'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Found 326 results

  1. Hi, ArcRotateCamera is a really greate camera. I'm wondering if it can be made around some other axes instead of world X and Y. Because I mainly work in a Z-up coordinate system, and sometimes, I need to align the viewport to an arbitrary rectangle in 3D and do some panning. Using a parent for the camera can make rotation work but seems not panning: http://www.babylonjs-playground.com/#12WBC#139 What I did was hacking the rebuildAnglesAndRadius and _getViewMatrix methods code, changing the computation of alpha, beta and target. This works for me but is too hacky. What's your suggestion? It's appreciated if there's a convenient way. Thanks @Deltakosh for responding here https://github.com/BabylonJS/Babylon.js/issues/3392#issuecomment-351732710 . Yes I did try to set the upVector to `new BABYLON.Vector3(0, 0, 1);` but it did not work. http://www.babylonjs-playground.com/#12WBC#140 To what value should I set upVector? Thank you very much!
  2. Quick Camera Changes

    Hello, so what I am trying do is quite simple I think I just don't know the best way to execute it. I want the camera to follow the bullet up until it dies/takes impact to the enemy or boundary then the camera is handed back to the player. I tried an if statement about the bullet being alive and else it would return to the player and that caused the bullet to be stuck on itself. I have additional code as well in the beginning to tell it to follow the player as well as this code in the beginning not too sure if this is causing an overlap or what. game.camera.follow(player(); //weapon systems laser = game.add.weapon(10, 'bullet'); laser.bulletKillType = Phaser.Weapon.KILL_CAMERA_BOUNDS; laser.bulletSpeed = 600; laser.fireRate = 250; // set bullet collision area to match its visual size laser.setBulletBodyOffset(24, 12, 6, 6); fireSound = game.add.audio('gun', 0.1); laser.onFire.add(function(bullet) { fireSound.play(); game.camera.follow(bullet); });
  3. Hi, Simple demo of the problem - http://www.babylonjs-playground.com/#MJRGPB Try to move to the box from the front or side - camera's ellipsoid (with size 1.5) works as expected. Now try to move to the box from below - you can go a little inside the box and see the internals. You can notice that camera's ellipsoid from above is missing or it's size is 0. According to this - https://doc.babylonjs.com/babylon101/cameras,_mesh_collisions_and_gravity - ellipsoid should be symmetrical. Is this fixable? Bug exists only when moving from below the box. UPDATE Another funny thing is with planes - http://www.babylonjs-playground.com/#MJRGPB#1 ... when moving through it from one side - there are normal collisions, but from another - you are able slowly go through it like something is wrong with collisions detection.
  4. Get camera view

    Hi, have a question, is it possible to get coordinates in 3d space of arcRotatinCamera (width, height and leftTop corner vector) of visible area ? I need to zoom on area and than move out all not needed objects out of camera view and align mesh to topRight corner of visible area
  5. Recently I am building an io game like agar.io. But I encounter 2 problems now. First, after reading up some articles in this forum about the camera on pixi.js.I found the best way is to set pivot to the container. I try this and work greatly. But I just wonder can I create another container called camera to perform the functionality of camera instead of using app.stage as a map and camera at the same time? Secondly, what is the best way to get my circle bigger when I eat a food? The only way I think of is using PIXI.Graphics to draw a new circle and replace the old one with it.But it seems time-consuming and stupid. Are there any better solutions? Thx everyone! Below is my test code on pixi. import * as PIXI from 'pixi.js'; // SOME ALIAS const Application = PIXI.Application; const Graphics = PIXI.Graphics; const Sprite = PIXI.Sprite; const ObservablePoint = PIXI.ObservablePoint; const Container = PIXI.Container; const Point = PIXI.Point; // CREATE A NEW PIXI APP const appConfig = {width: window.innerWidth, height: window.innerHeight,antialias: true, view: document.querySelector('#root')}; const app = new Application(appConfig); // CREATE NEW SPRITES const spriteMove = Circle(0xffffff,30); app.stage.addChild(spriteMove); const spriteStop = Circle(0xe83a30,50); app.stage.addChild(spriteStop); // SET CAMERA // FIXME CAN'T NOT BUILD A INDEPENDENT CAMERA MAYBE BECAUSE OF THE PIXI ORIGINAL DESIGN const camera = new Container(); app.stage.position.set(app.screen.width/2,app.screen.height/2); // ANIMATION app.ticker.speed = 0.1; app.ticker.add(()=>{ spriteMove.x += 0.5; spriteMove.y += 0.5; // GROW BIGGER // app.stage.children[0] = Circle(0xfff,r++); // IT DOES NOT ASSIGN REFERENCE SO IT HAS TO BE PUT IN ANIMATION LOOP app.stage.pivot.copy(spriteMove.position); }) // GRAPH FUCNTION function Circle(c, r){ const g = new Graphics(); g.lineStyle(); g.beginFill(c); g.drawCircle(0, 0, r); g.endFill(); const s = new PIXI.Sprite(g.generateCanvasTexture()); s.anchor.set(0.5,0.5); return s; }
  6. hello, just started with babylon and got an fbx file exported from blender to .babylon. using `BABYLON.SceneLoader.Load` to get my object. The camera is rotation around its axis and instead I would like it to rotate around the object. Playground: http://www.babylonjs-playground.com/#JR2HVU don't know how to use an external file for the car, but I hope you guys can at least look at the code and maybe spot something i'm doing wrong. thank you
  7. Hey All, When you set inertia to 0 on the ArcRotateCamera, you can't rotate on a single mousedown/mousemove a great distance. You have to reset your mouse towards the center and drag again to turn a large degree. Can someone tell me what parameter makes it so that moving the mouse traverses more rotation? I've tried neither of these seem to do anything: camera.moveSensibility = 50; camera.angularSensibility = 50;
  8. Hi guys, I finished the movement algorithm and now I have questions about camera, how can I make camera to follow character when character moving with animation? now my camera is not following, it just looking at object: is it a correct way to create another animation for camera?
  9. Hi Been working on a top down car game for quite a while and creating my own render using 2d canvas. Looked at pixiJS and decided to update the render with that to get the benefit from webGL and perhaps other nice useful features that I don't know about yet. I create tiles in photoshop, draw the map in many layers in Tiled and then in my game I pre render all background layers and my foreground layers into 2 large canvases stored in memory which I then use to draw what the player sees based on my camera that is tracking the hero. Now that I'm switching to pixiJS I'm confused about a couple of things. I've been searching, and going through some great tutorials, explanations and documentation but still feel I want to ask for some help here. My current setup is that I do the same prerender as before and then add my background and foreground as sprites like this: this.layers[zLevel] = new pixiJS.Sprite(pixiJS.Texture.fromCanvas(this.offScreenCanvas[zLevel])); if (zLevel === 'background') { this.layers[zLevel].zOrder = 20; } else { this.layers[zLevel].zOrder = 10; } this.pixiApp.stage.addChild(this.layers[zLevel]); Question 1: Is this approach recommended (I know this consumes memory and if the map is too big I'll need to split into smaller chunks) ? I'm also confused about sprite vs texture. I could not get my background to show up unless I turned it into a sprite. Question 2: How do I control which layer is on top of the other? I tried in this example to place background above foreground but that didn't work. My cars should be positioned between background and foreground, how do I accomplish that? In my old version I draw my layers like this: this.ctx.drawImage( this.preRender.offScreenCanvas[zLevel], // image camera.x, // source x camera.y, // source y camera.width, // source width camera.height, // source height 0, // target x 0, // target y camera.width, // target width camera.height // target height ); Question 3: How should I approach the camera in pixi? It seems like I should just change x and y of my background sprites to accomplish the same effekt. Is that the right approach? Question 4: When looking at the examples in pixijs: http://pixijs.github.io/examples/#/basics/basic.js or kitty kat attack tutorial: https://github.com/kittykatattack/learningPixi#introduction I keep seeing thing things done different all the time. is one of them out of date? For example in kittykatattack they call renderer.render at the end of each example. /piranha
  10. Hi! I'm having a problem with my camera alignment on the alpha axis. I would like that when I click on a box my camera is aligned in the axis. It works on small variation of rotation but if I pass on rotations higher than about 180 ° on my dome my camera makes a complete turn on itself and aligns itself. Would anyone have a solution to fix the problem. I probably do not use the good method I put you a playground with my code used: http://www.babylonjs-playground.com/#XCGI1K Thank you!
  11. How to camera go upstairs !

    Hi, I created stairs using CreateBox , i'm asking if it's the right way ! And i'm asking also , how can i make the camera go upstairs ! Thank you for your answers.
  12. Hello , It's my first post in the forum. I need your help. When i click in a mesh , i need the camera get in front of the Mesh. Thanks for your answers.
  13. So I have the following code to draw my UI. var ui = { menuBar: null, drawMenuBar: function() { var bar = new Phaser.Graphics(game, 0, 0); bar.beginFill(0xFF0000); bar.drawRect(0, 0, 600, 40); this.menuBar = game.add.sprite((window.innerWidth/2) - (bar.width/2), 0, bar.generateTexture()); this.menuBar.fixedToCamera = true; }, updateMenuBar: function() { this.menuBar.fixedToCamera = false; this.menuBar.x = ((window.innerWidth/2) - (this.menuBar.width/2)); this.menuBar.fixedToCamera = true; }, updateUi: function() { this.updateMenuBar(); } }; As you can see, to move the sprite in updateMenuBar I have to set fixedToCamera to false first, and then back to true. Is there a more elegant way to do this? If I just try to set menuBar.x to something, it wont move. The above code solves my problem, I just thought it would be interesting to see if anyone else has a better solution (as Google has yielded me no satisfying answers) :). Cheers!
  14. So I'm currently using Phaser 2.9.1 and had a weird issue I've been struggling with today. If I use scaleMode RESIZE, then whenever the window resizes, the camera gets stuck at 0,0 and wont move anymore. Debugging reveals that the update function is called and the camera x,y are changed whenever the buttons to move the camera are pressed. However, it's like they are changed back right away again. One theory I had was that the world gets resized to the browser innerWidth and innerHeight upon resizing with that scaleMode. I found a thread after a while that fixed my problem. The problem now is that I want to know why it works.... So, doing the following in my create function: game.world.resize(5000, 5000); game.world.setBounds(0, 0, 5000, 5000); works, for some reason. Only doing resize does not work and I have to use setBounds there. But according to the docs, resize sets the size of the world and setBounds sets the camera to 0,0 and then sets the size of the world. Why would that make a difference when the browser is resized after the game has been created and the update function is running? If anyone could shed some light on this, I would greatly appreciate it :-). Also creds to Zekko and Carlos in the post above, for solving the issue 2 years ago
  15. 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...
  16. 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.game); this.playerController = new PlayerController(this.game, this.player); this.cameraTarget = this.game.add.sprite(this.player.x, this.player.y, "cameraTarget"); this.cameraTarget.anchor.setTo(0.5, 0.5); this.camera.follow(this.cameraTarget); } 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 : https://github.com/JohnyBro/Platformer If someone can help me with this it will be appreciated.
  17. 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.
  18. 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.... sceneState.camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 0, 0.8, 1000, new BABYLON.Vector3(0,0,0), sceneState.scene); sceneState.camera.speed = 5; sceneState.camera.checkCollisions = true; sceneState.camera.ellipsoid = new BABYLON.Vector3(2, 5, 2); sceneState.camera.upperBetaLimit = Math.PI/2; sceneState.camera.wheelPrecision = .1; sceneState.camera.lowerRadiusLimit = sceneState.togScene.gridSize * 2; Fails... but... sceneState.camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 0, 0.8, 1000, new BABYLON.Vector3(0,0,0), sceneState.scene); sceneState.camera.speed = 5; sceneState.camera.upperBetaLimit = Math.PI/2; sceneState.camera.wheelPrecision = .1; sceneState.camera.lowerRadiusLimit = 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)
  19. Hello! How can I the movement of the camera over the map, as with wildsavagekingdom? Look http://www.wildsavagekingdom.com Someone a Playground Example ? Thanks.
  20. 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.
  21. Hi, Here is a basic scene to what I have so far: http://www.babylonjs-playground.com/#ZR4JTA#1 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.
  22. 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 game.camera.follow(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) } this.animations.play('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) { this.animations.play('fall') } else { this.animations.play('walk') } } } _jump () { this.body.velocity.y = this.jumpVel this.animations.play('jump') } _crouch() { // stop all movement and crouch the player this.body.velocity.x = 0 if(this.animations.currentAnim.name != 'down'){ this.animations.play('down') } } _decelerate(airborne) { this.body.velocity.x = this.body.velocity.x / 2 if(airborne){ this.animations.play('fall') } else { this.animations.play('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! phaser_wtf.zip
  23. 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. http://www.babylonjs-playground.com/#ECI1NR Any help will be appreciated.
  24. 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: https://www.babylonjs-playground.com/#41N19L#3 @Deltakosh @Wingnut @JohnK Any incites Guys?
  25. 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