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

Found 343 results

  1. 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);'left', true); } else if (cursors.down.isDown) { player.setVelocityY(160);'right', true); } else { player.setVelocityX(0);'turn'); } if (cursors.up.isDown && player.body.touching.down) { player.setVelocityY(-330); } }
  2. 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.
  3. 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. :-)
  4. 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');, 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() { = this.x - 150; = this.y - 300; } I have been trying to figure out this problem for quite some time, any help is greatly appreciated. Thank you.
  5. 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 but it does not work for arccamera. Thank You.
  6. 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
  7. 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?
  8. 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!
  9. 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 if it helps. Thanks for reading!
  10. Problems due to world's scaling

    Hi there, Before reading, I want you to know that you can test my little code here : (Arrows to move the player and mousse to aim in a direction) So, I had some problems using the camera.follow (), moveToPointer () and world.scale.set () functions simultaneously. It seems that the world's scaling influence the x and y properties of world's object (like the camera, the input, etc...). To be more specific, I can't use the camera.follow(player), because the player get out from the camera at some point. The only solution I found was to set the x and y camera's values in the update function but now I don't know how I can get a "smooth effect" without using the camera.follow() function. The moveToPointer() method react badly too, the farthest I go, the worst It get, even with game.input.scale.set(). I'll be glad if you can help me to fix the camera and the moveToPointer() methods
  11. Howdy, I'm struggling to conceptualize how I would tackle solving the following task. Imagine you have a scene as displayed in the attachment. I would like to bind scroll to moving the camera along a predefined path. Breaking it down into do I: Attach a Camera to a predefined path? Allow a user to move the camera along that path? Any suggestions that might point me in the right direction? @Deltakosh Thanks, JPS
  12. Hi guys, I'm new to the framework but I googled around abit and couldn't find an answer to this: I’m making a tile mapped game where the player needs to make their way through a tiled level by moving upwards. To achieve this the camera follows the player around a rectangular world My question is about creating 2 background TileSprites that scroll with the camera BUT not at the same speed as the camera to achieve the effect of having a background with TileSprite 1 in the distance and TileSprite 2 in the far distance Maybe something like an event handler that works like this: onCameraPositionChange(yDistance){ backgroundTileSprite1.scrollY -= yDistance/2 backgroundTileSprite2.scrollY -= yDistance/4 } Right now my setup is like this: TileSprite 1 -> moves with the camera TileSprite 2 -> stays still in background using TileSprite.fixedToCamera It looks okay right now, but I think this would convey a more convincing sense of distance. Cheers and thank you!
  13. Rotate Camera in VR

    Hello, I'm developping a web VR editor for 360 video experiences, and I would like in this case to force the camera rotation when I change my POV. I tried to use setTarget on ArcRotateCamera, but it doesn't work when scene.createDefaultVRExperience() is called. How could I change my camera rotation? Thanks, Benjamin
  14. Camera problem - following player

    Hello I'm having an interesting problem with my camera, this is how my game looks without the camera following the player this is how it looks following the player... (the only good thing is that it actually follows the player) but I would like to know how to set up the bounds of the camera and to make sure it doesn't ... well do this. here's my code : scenes.scene3 = function(){}; //Player speed var link, vel = 150; //Map/Level var map; //Tiled Layers var floor, water,walls; //Object Tiled Layers var rocks var bushes1, bushes2, bushes3, bushes4; scenes.scene3.prototype = { preload: function (){ game.load.image('tiles', 'Assets/Sprites/Levels/zelda_01.png'); music ='openWorld'); music.addMarker('openWorld', 0, 16, true); game.renderer.resize( 1216/2, 800/2); }, create: function (){ //Game itself,0, 1216, 800); game.physics.startSystem(Phaser.Physics.ARCADE); map = game.add.tilemap('level_01'); map.addTilesetImage('tiles'); floor = map.createLayer('ground'); walls = map.createLayer('walls'); water = map.createLayer('water'); map.setCollisionBetween(0, 100, true, 'walls'); map.setCollisionBetween(0, 100, true, 'water'); //Objects layer related rocks = game.add.physicsGroup(); map.createFromObjects('rocks','ROCK','tiles', 48, true, false, rocks); rocks.forEach(function(rocks){rocks.body.immovable = true;}); bushes = game.add.physicsGroup(); map.createFromObjects('bushes', 'BUSHTOP', 'tiles', 37, true, false , bushes); map.createFromObjects('bushes', 'BUSHBOT', 'tiles', 35, true, false , bushes); map.createFromObjects('bushes', 'BUSHLEFT', 'tiles', 36, true, false , bushes); map.createFromObjects('bushes', 'BUSHRIGHT', 'tiles', 34, true, false , bushes); bushes.forEach(function(bushes){bushes.body.immovable = true;}); //'openWorld', 0,1,true); // Player link = game.add.sprite((centerX-500), 100, 'LinkMovement'); link.scale.setTo(0.25, 0.25); link.animations.add('walkHorizontalRight', [6,7,8]); link.animations.add('walkHorizontalLeft', [9,10,11]); link.animations.add('walkVerticalDown', [0,1,2]); link.animations.add('walkVerticalUp', [3,4,5]); game.physics.enable(link); link.body.collideWorldBounds=true; //Life bar life = game.add.sprite((centerX-600), (centerY-675), 'lifeBar'); life.scale.setTo(0.15, 0.15); life.animations.add('fullHP', [0]); life.animations.add('twoHP', [1]); life.animations.add('oneHP', [2]); life.animations.add('Dead', [3]); cursors = game.input.keyboard.createCursorKeys(); var b1 = game.add.button(900,300, 'buttonFire', function() {fire();}); b1.scale.setTo(0.25,0.25); = (608,400);; }, update: function (){ game.physics.arcade.collide(link, walls); game.physics.arcade.collide(link, water); game.physics.arcade.collide(link, rocks); game.physics.arcade.collide(link, bushes); if(cursors.up.isDown){ link.body.velocity.y = -vel;'walkVerticalUp', 9, true); } else if(cursors.down.isDown){ link.body.velocity.y = vel;'walkVerticalDown', 9, true); } else{ link.body.velocity.y = 0; link.animations.stop('walkVerticalUp'); link.animations.stop('walkVerticalDown'); } if(cursors.left.isDown){ link.body.velocity.x = -vel;'walkHorizontalLeft', 9, true); } else if(cursors.right.isDown){ link.body.velocity.x = vel;'walkHorizontalRight', 9, true); } else{ link.body.velocity.x = 0; link.animations.stop('walkHorizontalRight'); link.animations.stop('walkHorizontalLeft'); } }, fire: function(){ console.log('firing') var bullet = bullets.getFirstDead(); bullet.reset(link.x, link.y); }, drawHealthBar: function(){ if (hitPoints === 3) {'fullHP'); } else if (hitPoints === 2) {'twoHP'); } else if (hitPoints === 1) {'oneHP'); } else if (hitPoints === 0) {'Dead'); } } };
  15. Move camera without bounds

    So this seems like it should be fairly simple, I want the camera to always follow the player even if they go outside the bounds of the map. How would I do that?
  16. Hi I'm experimenting with Babylon and currently I'm trying to get a mesh (box) to follow a curve I've created. This part I've managed by borrowing various examples, but what i'd like to do now is make sure the box is always "facing" the direction of movement as it goes along the path. I've tried a few techniques I've found here and elsewhere but I seem to be having trouble making it work. Here's "my" code: It's based on an example by @celian-garcia because I was planning on using TweenMax for this and some other animations I have in mind. Once I can get the above working I will then parent a camera to the box and use this as a fly-by-wire animation for my final scene. Would appreciate any help. Cheers
  17. My scene camera used to be able to animate zoom to whichever spot i clicked on a mesh. This was working yesterday, this morning I found it didn't work. Repro in pg with latest version of babylon. Using ffox, I'm seeing the camera animating only on the 1st click on the plane mesh, but all subsequent clicks don't trigger the animation effect. Is this a bug or is it just me ?
  18. 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: 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 . Yes I did try to set the upVector to `new BABYLON.Vector3(0, 0, 1);` but it did not work. To what value should I set upVector? Thank you very much!
  19. 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.; //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 ='gun', 0.1); laser.onFire.add(function(bullet) {;; });
  20. Hi, Simple demo of the problem - 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 -,_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 - ... 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.
  21. 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
  22. Recently I am building an io game like 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; }
  23. 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: 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
  24. 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;
  25. 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?