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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 360 results

  1. Hey Guys, first of all, I want to thank you for your great work in this forum, you really saved me a lot of time wanting to flip tables But now i found something, what is driving me nuts for already two weeks. So I am trying to develop a viewer for 3D objects which has, broken down on the most important things, two cameras which you can change. Those cameras happen to be the ArcRotateCam and the UniversalCam. What I want to happen is, that if the user clicks a button the camera changes (this already works fine), I also want both cameras to have a default position where they "start" (which they already have) and I want the camera to always be at the right position with the right angle (the default position/angle i set with initalizing them) when the user changes to the selected cam (this is where something odd is happening). So let's take this case: - User uses ArcRotate Cam, moves the camera and wants to change to Universal Cam. - User clicks the button and changes to Universal Cam -> Universal Cam is set to default position and default angle as its supposed to be. - User moves Universal Cam - User wants to change to ArcRotate Cam again and clicks button -> result: camera is not in default mode but there is some odd camera movement going on and camera is somewhere else. - If the user now moves the ArcRotate Cam again and changes to the Universal Cam, the camera moves away from the target, instead of being directly on it. I hope I described my problem properly and I really hope you got some answers. I broke the problem down in a Playground for you: http://playground.babylonjs.com/#P5PWBB There may be something missing cause I really broke the camera module down on the most important things. So if something is not clear, let me know! All the best! xeroxM
  2. Hello, I'm new here, so firstly I want to greet with all of you. Regarding my question, or maybe problem - some background here: I want to create minimal for My 2D space shooter. I check tutorials on labs.phaser where I saw example with creating MiniMap with second camera - it sounds good. So I created class for My MiniMap: import Phaser from 'phaser' export default class MiniMap extends Phaser.Cameras.Scene2D.Camera { constructor ({ scene, x = 10, y = 10, width = 192, height = 192, zoom = 0.1, scroll = { x: 960, y: 960 } }) { super(x, y, width, height) this.scene = scene this.zoom = zoom this.scroll = scroll } init () { this.scene.cameras.cameras.push(this) this.scene.cameras.addExisting(this) this.setZoom(this.zoom) this.setScroll(this.scroll.x, this.scroll.y) return this } } And I'm creating it in My GameScene in create() function: create () { this.bgImage = new BackgroundImage({ scene: this }).init() this.miniMap = new MiniMap({ scene: this }).init() this.miniMap.setBackgroundColor('black') this.player = new Spaceship({ scene: this, x: 0, y: 0 }).init() this.camera.startFollow(this.player) } About My sizing, BackgroundImage and Bounds are 1920 x 1920 px, so in MiniMap we had 192 x 192 and also zoom as 0.1 (1/10 of real game world). It should create Map with the whole world, but it is cut on left and top and have free space at right and bottom (attachment). How to fix it? Also, maybe you can give me some tips how to change Spaceship sprite on MiniMap (second camera) as for example dot? Thanks for advance! Best, DaaV
  3. I have a car moving based on some custom inputs. I want to put WebVRCamera in the driver's position, so they can look around using their headset. I have tried several ways to attach it to my car with no success: helper.webVRCamera.parent = content.headContainer seems to have no effect. helper.webVRCamera.position = content.boardFloor.position and helper.webVRCamera.rotation = content.boardFloor.rotation is messing up when the car rotates
  4. I'm trying to zoom camera (change its scale) while focused on a player on a tilemap. const speed = 0.01; if (this.cursors.up.isDown) { this.game.camera.scale.add(speed, speed); } else if (this.cursors.down.isDown) { this.game.camera.scale.add(-speed, -speed); } This is how I create the map: this.map16 = this.game.add.tilemap("tilemap16"); this.map16.addTilesetImage("xrpg_tileset", "tileset16"); this.wallsLayer = this.map16.createLayer('Walls'); Both player object and the map layers are placed in the World. But it seems that tilemap layer's position is affected by camera's zoom which looks wrong: https://gph.is/2HuEeDk To check if something is wrong with the scene I replaced the map with an image and zoom worked correctly: https://gph.is/2KitDZL The behaivor is identical in 2.6.2 and 2.10.3.
  5. I was wondering if it's expected behavior that camera effects are not reset when a scene is restarted. The following code will fade out, and the screen will remain black after the scene is restarted: gameScene.create = function() { // create a sprite let bg = this.add.sprite(100, 100, 'treasure'); // fade out this.cameras.main.fade(1000); // restart the scene this.time.delayedCall(2000, function() { this.scene.restart(); }, [], this); What I'm adding at the moment is `this.cameras.main.resetFX();` when initiating a scene in order to have the view back, but it kind of feels like the camera subsystem should refresh as well when using `this.scene.restart()`.
  6. Hello everyone my first day with Babylon, so please indulge. I have the same problem as Emiya0306 but not with the gltf Exporter but with the Babylon Exporter (*.babylon) I have read the whole thread, but frankly, I didn't understand very much. The Arc Rotate camera goes through my object (with middle (Scroll)Mouse-Button). I have checked Collisions for the Object and the Camera. Did I miss something? Online: http://www.experimente.bplaced.net/collisions/collisions.html The Blend: http://pasteall.org/blend/index.php?id=49326 Babylon 3.1.0 Babylon-Exporter 5.62 Blender 2.79B Many thanks in advance Hans
  7. Here is my simple playground demo. Just like the title described, Why this ArcRotate camera can go through the mesh? Is this the gltf file problem?
  8. Is there a built-in way to apply a smooth animation on the active camera, given a start position, orientation, a final position, a final orientation and time frames?
  9. Hi, 1) Is there a way to react on a position/rotation change of the camera? 2) How do i get the position and or the rotation of the camera? What i wanna do: I wanna change the position and/or rotation of another mesh in the scene every time the camera is changed. The rotation of the other mesh is depended of the camera rotation. Thx in advance
  10. Hello evryone Sorry in advance for my bad english; I wanna ask somthing about .ArcRotateCamera (); I want to make camera with locked position behind the player when the player moving but if player stand on the place he can moving around with the camera and when he again start moving the camera smoothly rotating to the locked position. I wondered if I will make somehow the camera will checking position.z of the player then camera will be calculate position behind the player. Here is my player how move in game for better understending: http://www.babylonjs-playground.com/#TGA1QA By the way I only want some tips or show me a way how I can make this work out I want to fully understand how javascript and babylon.js works. Thank you.
  11. hi i am new to babylonjs,this is the first post i made. my problem is that i make a camera,no matter the ArcRotate Camera ,FollowCamera or ArcFollowCamera the target mesh just fixed the position in the center of the screen that is very good for lots of game however i just want to make my game the target mesh a little offset at the center of screen like :at the middle bottom left screen. or any other position i want is there a simply way or a api to make it ? thanks
  12. Hi all, I am planing to build online black jack game. I wanted to create a perspective view environment for this game. I wanted to add animations like flipping cards, squeezing cads, dealing etc. I am looking for a game engine for this. I have not used Pixi JS before. But I do have experience with Cocos Creator. May I know whether something like this be done with Pixi JS? If it is possible can someone point to area I should be check? Greatly appreciate any help you can provide.
  13. Looking at the camera bouncing behaviour documentation PG example https://www.babylonjs-playground.com/#6FBD14 I can't notice any bouncing effect at all. Is it just really subtle or isn't it working?
  14. Hi! I am using Phaser CE, and here is some code: var level1 = { map:{ size:48, w:36, h:6, layout:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2, 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2, 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2] }, create: function(){ game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = "#0ff"; game.renderer.renderSession.roundPixels = true; game.world.resize(this.map.size*this.map.w,this.map.size*this.map.h); this.background = game.add.tileSprite(0,0,game.world.width,game.world.height,'bg'); this.background.scale.setTo(3,3); this.ost = game.add.audio('music'); this.ost.loop = true; this.ost.play(); this.tiles = []; var j = 0; for(var i = 0;i<this.map.layout.length;i++){ if(this.map.layout[i]!=0){ switch(this.map.layout[i]){ case 1: this.tiles[j] = game.add.sprite((i%this.map.w)*this.map.size,Math.floor(i/this.map.h)*this.map.size,'tile2'); case 2: this.tiles[j] = game.add.sprite((i%this.map.w)*this.map.size,Math.floor(i/this.map.h)*this.map.size,'tile'); } this.tiles[j].width = this.map.size; this.tiles[j].height = this.map.size; game.physics.arcade.enable(this.tiles[j]); this.tiles[j].body.immovable = true; j++; } } player.create(); game.camera.follow(player.sprite,0.4,0.4); }, update: function(){ for(var i = 0; i < this.tiles.length; i++){ game.physics.arcade.collide(player.sprite,this.tiles[i]); } this.orientationChange(); player.render(); this.background.tilePosition.y += 0.25; }, orientationChange: function(){ game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; } } That was my player sprite colliding with a 1-D tilemap array. My problem is this -- When the player jumps, or isn't near the lower half, it looks normal(first screenshot. When it collides with the ground tiles (labeled 1 or 2) the camera acts as if I've touched the bottom of the screen, instead of showing the sprite on the tile, centered...(second screenshot) Please help! I am using Phaser from just a week, and this is a peculiar issue. There is a sample game at smvaidya.itch.io/DuskMite That map with tiles all over worked just fine but the one tiles which were set as floor (3 rows!) don't show up. They are under the screen. Why?
  15. devAxeon

    VR camera height

    Hi, How about an option in vrHelper to force the height of the camera, even if isInVRMode is true ? I'm testing my scene seated, but I want to be in a stanted view inside my VR. So it will be nice if we have a forceDefaultHeight option in webVROptions, to always be standing Thank you !!
  16. Hello guys, I use the UniversalCamera in my project. On my mobile device it works really well and does what I want it to do, except for the left and right rotation. When I wipe up and down, the camera moves much faster than left and right. I have already tried the camera. angularSensibility, but it has no visible effect. for example, if I use the Gyro camera and press on the screen, I can control the camera very well and would like to have such a behaviour with the UniversalCamera. Did I miss something or is there a value I need to adjust? I would like to double the speed of mobile devices (the device differentiation is already taken over by my framework). Then it has a smooth user behavior. I look forward to your answers. :-)
  17. Gerente

    Camera 2d

    Hi, im working on the camera of my game, its a 2d game and I need to center the camera to the character, enemies, etc.. to different objects in or out of the screen. Anyone could advice me about this, any good practice, technique, mistakes, etc.. I'm just moving the camera toward the object and stopping it when the distance is lower than the camera speed but I have some artifact on the way when I play it on mobile vs pc. Seems that devicePixelRatio have something to do with this.
  18. I do not find the error in this code anyone help me please. I'm doing a topdown game but I can not get the camera to follow the sprite player.... Sorry if I'm doing something wrong! this.Camera.follow (player, Phaser.Camera.FOLLOW_TOPDOWN); this does not work ! do not open anything; When I remove it everything works normal var config = { type: Phaser.CANVAS, width: 1920, height: 1080, physics: { default: 'arcade', acarde:{ //gravity:{ } debug: false } }, scene: { preload: preload, create: create, update: update } }; var game = new Phaser.Game(config); function preload () { this.load.image('ground', 'images/ground-smart.png'); //pedras this.load.image('stone1', 'images/stone-1.png'); this.load.image('stone5', 'images/stone-5.png'); //flores this.load.image('flor1', 'images/flor1.png'); this.load.image('flor2', 'images/flor2.png'); this.load.image('flor3', 'images/flor3.png'); //player this.load.spritesheet('player1', 'images/p-anim.png', { frameWidth: 128, frameHeight: 90 }); } function create () { this.add.image(960, 540, 'ground'); this.add.image(64, 430, 'stone1'); this.add.image(650, 80, 'stone5'); flores = this.physics.add.staticGroup(); flores.create(400, 350, 'flor1'); flores.create(220, 90, 'flor3'); player = this.physics.add.sprite(400, 300, 'player1'); this.Camera.follow(player, Phaser.Camera.FOLLOW_TOPDOWN); this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('player1', { start: 1, end: 7 }), frameRate: 6, repeat: -1 }); this.anims.create({ key: 'turn', frames: [ { key: 'player1', frame: 0 } ], frameRate: 20 }); this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('player1', { start: 1, end: 7 }), frameRate: 10, repeat: -1 }); cursors = this.input.keyboard.createCursorKeys(); this.physics.add.collider (player, flores); } function update () { if (cursors.up.isDown) { player.setVelocityY(-160); player.anims.play('left', true); } else if (cursors.down.isDown) { player.setVelocityY(160); player.anims.play('right', true); } else { player.setVelocityX(0); player.anims.play('turn'); } if (cursors.up.isDown && player.body.touching.down) { player.setVelocityY(-330); } }
  19. Hi, I've successfully created a mini map. Now I'm trying to give it a custom opacity value to make it a littler transparent. I did not find any way to do this. Any help would be appreciated. Here is a good starting point for your kind help: http://www.babylonjs-playground.com/#RE9QZ#3
  20. I've used a Tiled Map with my project before and it worked perfect, however the second map I made has a black bar on the right and top. I can move into the black space but the Camera will not allow me to move left off screen. My canvas is set to this resoltuion var game = new Phaser.Game(640, 480, null, 'gameDiv'); This is how I load my assets preload: function() { game.stage.backgroundColor = '#000000'; game.load.tilemap('level0', 'assets/map/Level0.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles0', 'assets/map/[TILESET]Dirt-City.png'); } This is the code in my play.js create function. create: function () { var map = game.add.tilemap('level0'); map.addTilesetImage('[TILESET]Country', 'tiles0'); this.layer = map.createLayer('Tile Layer 1'); game.world.setBounds(0, 0, 640, 4800); this.player = new Player(300, 4700); } My camera updates it's location based on that of the player like so player.update = function() { game.camera.x = this.x - 150; game.camera.y = this.y - 300; } I have been trying to figure out this problem for quite some time, any help is greatly appreciated. Thank you.
  21. How do I lock position of object when using arc camera, I want to lock it to upper right of the screen. If possible please also tell me the principle/math behind your answer. I tried this http://www.babylonjs-playground.com/#21IMDW#1 but it does not work for arccamera. Thank You.
  22. juanmajr93

    LeapMotion with BabylonJS

    Hi guys I go back here to ask you about the integration of leapmotion with BabylonJS. My last experiments using WebVRCamera work fine but I must add leapmotion to interact with 3D environment. I have the follow questions: 1) Is posible integrate leapmotion to surf arround the scene with UniversalCamera? 2) After first question, can I use leapmotion with HTCVive? Best regards, Juan Manuel
  23. I was hoping someone could point me in the right direction here. I see that I can set world bounds to detect when a sprite is out of bounds of that world. But I don't think that will help in what I am trying to do. I have a background image and a sprite. When the sprite reaches near the edge of the screen, the camera needs to pan the screen. My question is, is there a way to determine when the character reaches, for example, the edge of the screen to the left(minus 20 pixels or so) so that I can begin panning the camera then?
  24. Hi, I have an ECS engine and want to keep the camera, input, and entities separate. In this case the GameCamera is a system that is assigned an entity to read it's position and direction from and update the BabylonJS camera with. I already have a working Controller system that attaches to the scene's `onKeyboardObservable` and I am going to use the `onPointerObservable` for mouse movement. However I don't see how to set the `Camera` view direction, only it's position. Is there no simple way to either specify a normal vector3 for direction or a rotation radian and an up vector? I don't see anything in the documentation or in the source, what am I missing? Thanks!
  25. Hello! I'm trying to re-create a flying camera movement system that I once used in DarkBasic. Basically, the mouse pointer is visible and the user looks around by just moving the mouse (cam rotation about x and y axes). The user does not drag the scene with the mouse. He just moves the mouse. Forward movement is by pressing and holding the left mouse button, reverse with the right mouse button. Very natural. Very intuitive. I have looked for days at Babylon examples and documentation but cannot cobble together a solution. I see keyboard control options but none for mouse (pointer). If the action manager could register a "leftPointerDown" maybe I could get there. Any and all suggestions would be appreciated. Simple is good. I have copied a vaguely relevant playground to http://www.babylonjs-playground.com/#QWGWQK if it helps. Thanks for reading!