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

  1. In games and, player control is implemented with the mouse. The player is always in the center of the screen and moves in the direction the mouse cursor points to. Phaser.js offers us control only through the keyboard, as there Perhaps someone already implemented control such as in and using phaser.js? Maybe someone has code samples?
  2. Hello everyone! I'm new with babylon.js and now I'm trying to make a third person shooter game. The idea is to make an ArcRotateCamera that is able to perform unlimited alpha rotation. However, I'm struggling with the mouse cursor as it has a limited movement (that is the border of the browser), making an unlimited alpha rotation impossible. Is there any way to make it possible? Thank you in advance
  3. Hello! I am new in Webgl programming, and I am having trubel with moving the camera. I try to create a maze game, and I use three.js and box2D.js. The problem is that the camera is looking from above into the mazze, while I am trying to make it part of the maze (I mean looking like you are trying to escape from the maze). Could anyone, please, help me? I haven't found any ideeas on the web....
  4. Hi, I am trying to move mesh relative to ArcRotateCamera alpha value. Basically it should move the same direction as mouse is moving (up, down, left, right) , works fine with 0 angle but different angles need to flip x/z and change their directions. What the best way to calculate direction vector from angle and 0 angle direction? Working example: (angle 0) Not working: (angle 55) I tried to rotate vector using: const matrix = BABYLON.Matrix.RotationAxis(BABYLON.Axis.Y, camera.alpha); const movement = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(x, 0, z), matrix);
  5. I'm trying to make game resize appropriately to size of the window/screen. Everything's working out great, except for the tilemap. It seems like the rendering bounds are not updated. (typescript) onResize() {; var newWidth = window.innerWidth / 3; var newHeight = window.innerHeight / 3;, newHeight); = Phaser.ScaleManager.SHOW_ALL; //need to call this to apply new size?, newHeight); for (var i = 0; i < this.tilemap.layer.length; i++) { this.tilemap.layer[i].width = newWidth; this.tilemap.layer[i].resizeFrame(this.tilemap, newWidth, newHeight); this.tilemap.layer[i].crop(new Phaser.Rectangle(0, 0, newWidth, newHeight), false); this.tilemap.layer[i].updateCrop(); }, Phaser.Camera.FOLLOW_TOPDOWN, 0.8, 0.8); } As you can see I've tried everything, I would've expected resizeFrame or crop to do something, but unfortunately they don't. Do note that the rest of the game updates the size correctly, as the fish get rendered in the widened area just fine. Any ideas how to update the tilemap to the new size? Thanks!
  6. Hi, I used to add mesh as camera.setTarget so camera follows mesh. But in t.ds file only Vector3 is allowed as target. But example with mesh as target works: Typings are wrong or I am doing something wrongly?
  7. I used to have a function that center the player sprite in the camera, like this (in the camera class): centerOver: function(sprite) { const vx = sprite.x - (this.width / 2) - this.x; const vy = sprite.y - (this.height / 2) - this.y; this.translate(vx, vy); }, translate: function(vx, vy) { this.x += vx; this.y += vy; } So that the player can be in the middle of the screen and the camera follows the player smoothly. vx, vy are the horizontal velocity and vertical velocity. with and height is the camera's width and height, and this.x, this.y represent the top, left position of the camera in the map. But now I am developing a MMO game. The player's position is no more smooth all the time. It may occasionally jump a bit when the latency is too high, but I still want the player to be in the center of the camera. What should I do?
  8. Hi, I wonder what is the best way to get only these meshes which are visible by camera at the moment. I know there is octree implementation in babylon, but Im not sure how to use it. I've seen this but still have problems to make it work. If someone could explain (write a piece of code or pseudo code) how to make it. Lets say I have 5 cubes on my scene and a free camera. I would like to have a function that would return meshes which are visible in a viewport of my camera. Thank you, Regards V.
  9. Hi, I'd like to know if there is any way to tell a camera to only render when I want it to. I have a setup with two cameras, where one of them shows the entire scene from above and the other shows only a small segment of the scene. I'd like to be able to render the camera that shows the complete scene from above only when something changed (I decide when a [significant] change happend, not BJS) so I can have better performance on the second camera which only shows a small portion of the whole scene. My scene is rather big so that I have some serious performance problems when the complete scene is rendered on every frame. I'm aware that I could use two planes with dynamic textures rendered from the two cameras and set the refreshrate on the renderTargetTexture, but as it is now I have two cameras with different viewports set and would like to keep it this way (don't want to change too much code). I hope my question is clear and there is a way to accomplish this without using dynamic textures.
  10. Hey I have just started on using babylon. I started using it together with your Unity exporter. I made the camera go from perspective to orthographics and I got a runtime error : Uncaught TypeError: Cannot set property 'orthoTop' of undefined In this line this._camera.orthoTop = n, as part of n.prototype.updateOrthographicSize = function() { if (0 !== this._orthoSize) { var e = this.scene.getEngine().getRenderingCanvasClientRect() , t = e.width / e.height , n = this._orthoSize , i = n * t; this._camera.orthoTop = n, this._camera.orthoBottom = -n, this._camera.orthoLeft = -i, this._camera.orthoRight = i } } , manager.js
  11. Hello, I'm creating a game composed by a map (created with Tiled) and, at the bottom, a menu with a list of building. The list of building is draggable horizontaly (to see all buildings). To drag all buildings at the same time I add all the buiding's sprite in a graphics component. I also put a black background with alpha to 0.25. Every component has a fixedOnCamera to true. Here is my BuildingMenu class TypeScript code: public static create(game: Phaser.Game) { let background =, 0); background.beginFill(0x000000, 0.25); background.drawRect(0, game.height - 64, game.width , 64); background.endFill(); background.fixedToCamera = true; let buildings = ["building1", "building1"....]; let bounds = new Phaser.Rectangle(-game.width / 2, game.height - 64, game.width, 64); this.buildingsGroup =, game.height - 64); buildings.forEach((building, index) => { let spriteBuilding = game.add.sprite(index * (64 + 2), 0, building.getName()); spriteBuilding.width = 64; spriteBuilding.height = 64; spriteBuilding.fixedToCamera = true; //this.buildingsGroup.addChild(spriteBuilding); }); this.buildingsGroup.width = game.width; this.buildingsGroup.height = 64; this.buildingsGroup.inputEnabled = true; this.buildingsGroup.input.allowHorizontalDrag = true; this.buildingsGroup.input.allowVerticalDrag = false; this.buildingsGroup.input.enableDrag(false, false, false, 100, bounds); this.buildingsGroup.fixedToCamera = true; } public static update(game: Phaser.Game) { += 1 } My problem is when I uncomment the line "this.buildingsGroup.addChild(spriteBuilding)" item are affected by the camera but can be dragged of course. The background is not affected.... I can't figure out why... Can anybody help?
  12. I'm trying to attach the ray I put in my scene to my active camera so I can move around the camera and have the ray hit whatever my camera is looking at. I've been able to get the ray into my scene, and have it hit something, but haven't been able to figure out how to attach it to my camera so it follows it. My best attempt was trying to create a box, attach it my camera as it's parent and then attach the ray to that box using rayhelper.attachtomesh but my ray is no longer visible when doing this. Any help please.
  13. Hi, I have scene with 2 objects and ArcRotateCamera on it. I choose it as I need to rotate around object and it does it job good. Now I want to create animation that changes camera target to second (fly to it) and than orbit around it. Is it possible with ArcRotateCamera or I should chose another camera as the base? Thx
  14. Hi Guys can sombody helpme to make the VR camera follow the spline ? I try parenting the camera into a mesh that folllows the spline and the camera still on the ground. I change the camera But I can see yet why its not updating the position here is my // Target Cam // VR CAMERA INSTEAD***************************************************************************** var targetCam = new BABYLON.VRDeviceOrientationArcRotateCamera("tcam", camera.position, scene); // var targetCam = new BABYLON.TargetCamera("tcam", camera.position, scene); targetCam.setTarget(points[t]); scene.activeCamera = targetCam; var target = BABYLON.Vector3.Zero(); // animation scene.registerBeforeRender(function() { //followCam._computeViewMatrix(); points[i].addToRef(curvect.scale(k / step), pos); points[j].addToRef(nextvect.scale(k / step), target); pos.addInPlace(norms[i]); targetCam.position = pos; targetCam.setTarget(target); targetCam.getViewMatrix(); //wagon.position = pos; //wagon.rotation = rot; k++; // next segment if (k == step) { i = (i + 1) % lg; j = (i + 1) % lg; t = (i + dt) % lg; rot = BABYLON.Vector3.RotationFromAxis(tgts[i], norms[i], binorms[i]); points[j].subtractToRef(points[i], curvect); points[t].subtractToRef(points[j], nextvect); //curvect.normalize(); //nextvect.normalize(); k = 0; } }); return scene;
  15. Hi guys! I'm doing a 2D game with tiled map and I've run into a problem. When the group of objects (map layer and unit sprites) scaled, and camera is focused on sprite (by following with lerp), camera.view, or autoCull (or something else) gets some offset lag But all works fine with image map. You can uncomment the /* image map */ section in 'create' tab to check it out. Dont forget to comment the /* tile map */ section Just look: Buttons: LEFT ARROW - center camera on unit1 and scale group to 1.2 (if not zoomed); RIGHT ARROW - center camera on unit2 and scale group to 1.2 (if not zoomed); UP ARROW - unzoom (set group scale to 1); Spent last two days to fix this out, but have no more ideas.
  16. I'm working on a game project where I want to be able to switch between two "dimensions" in the same world. I though the easiest way to do this was to have a keyboard event, which toggles sprites' visibility when pressed. This works fine, however, when the visibility is toggled off, and I move the character (and thus, the camera), the sprites seem to be keeping their position relative to the camera, and not the world. Which means that when I toggle the visibility on again, the sprites have moved from their original position relative to the world, but are in the same position relative to the camera. For example, if a sprite is off-camera while invisible and I move the character, the sprite gets pushed off the stage, and can't get back (because it falls down below the ground). How do I stop this from happening? How can I "lock" them in place while visible? I read that the sprites are not being rendered when visible=false, so should I be using some other method of hiding them? Here is my relevant code for the keyboard event: skey =; skey.onDown.add(this.sPressed,this); Here is the method sPressed: sPressed: function(key) { if (baddie.visible) baddie.visible = false; else baddie.visible = true; if (stars.visible) stars.visible = false; else stars.visible = true; } And here is how I make the camera follow the character sprite: = player.body.x-200; I tried changing to camera.follow, and camera.focusOnXY, and that changed nothing. I have tried googling, and can't find anything relevant to my problem.
  17. How is it possible to make a mesh or sprite (in)visible for just one of two active cameras?
  18. Hi Again, Let me explain what I'm trying to do first: I want a panel of 3D objects which line up along the left-hand side of the canvas/viewport. I'm trying to create an object factory of sorts. The user will click and drag objects from the object factory into the scene proper, the code will clone the selected object when this occurs. I'm using two scenes for this, one is the main scene, with a ground and control-enabled camera receiving the clones and accumulating state; and another scene, for the factory, that is essentially static but has a camera and lights and meshes (the factory prototypes). As I've said, I want this factory to be arrayed down the left-hand side of the screen. If I choose just any position for the factory objects, they will go into and out of scope when the canvas aspect ratio changes. So I want to be able to calculate a ray which vertically cuts the camera's left-hand viewing-frustum plane, say somewhere in the middle, parallel to the near and far edges. I think this should be a vertical slice, abutting the left edge of the viewport. Here's how I tried to do it: First, I tried using getFrustumPlanes. But the planes it gave me were oddly skewed. When I generated geometric planes for each of the six, for instance, they did not form a convex solid. And even when I mentally tried to figure out which plane was which part of the frustum, I just couldn't make sense of the numbers. I would have expected 2 along each camera-centric axis (e.g. + & - along X, + & - along Y, + and - along Z--I setup a straight-on camera to help in understanding the numbers to no avail). Next, I tried a few of the unproject methods. I think these methods should have converted a 2D point on the screen to a 3D point (or ray) in the world. I read through many posts on this site to use what I thought were the best values for the camera's projection matrix, world matrix (identity), etc.... Never got anything even close to good numbers. Mostly they were NaN until I saw one post which accessed maxima from the engine. But when I positioned my mesh (using a sphere) at the returned 3D vector, it always seemed to go to the same, incorrect place (irrespective of my choice for 2D starting point). Next, I successfully wrote an iterative algorithm which used many of the same transformation matrices along with project. This way, I would choose a 3D point, test where it was in 2D, and knowing the fixed orientation of the camera, choose another 3D point which projected closer to the 2D point for which I was aiming, etc.... Sort of like a newton's method for iteratively approaching the correct value that unproject should give me in fixed time. OK, I can do it, but I want to do it correctly. So my last attempt, for which I have a playground, uses: createPickingRayInCameraSpace. I think this should give me a ray which looks like a point, but really rides the intersection of the left and top viewing-frustum planes (because I choose 0,0). However it does not. Playground demo: Please help. I don't care if I use any of these methods. Is there a better way? Should I be using the aspect ratio directly? Should I just do my own matrix math? Thanks, Ken
  19. Hello there, I'm new around here and also newbie using Phaser. I have only coded turn-based games and I recently learnt how to make classic 2D platform games with Phaser (which is incredibly easier than I thought). I'm interested on develop a tennis game. Watching some old NES tennis game, every tennis game use a vertical camera with some perspective which makes appear the closer half of the court bigger than the other one, does anyone knows how to approach that kind of camera/perspective? Thank you!
  20. Silly title, I know. I'm not sure how to achieve this, and I'm sure a PG is not necessary, if this functionality actually exists. Imagine the simple and common version of a FPS-setup. You have a camera, and a mesh or more in front of this camera, usually a couple of hands and a gun of some sorts. Now, when I hit a wall face-first, part of the hands/gun model will clip through the wall, and we sure don't want that to happen. Is there some way to always render the hands/gun models in front of everything else, igoring depth? I looked at z-index, renderingGroups and masks without luck.
  21. For the life of me, I can't find a setting which adjusts camera movements with current frame rate (automatically adjusting speed, inertia, turn rate). Camera which either warps or bogs down depending on where you look at is simply unacceptable in any application, let alone games. Maybe it's too obvious but in any case I need some help here.
  22. Greetings, When searching for example/questions on how to do multiple cameras in Phaser, I came up with only one answer: using multiple Phaser instances. That was not how I wanted things to be done, so I made my own variant on it (which I saw Rich made a comment about on how it could be done) with a RenderTexture. I made a repository on GitHub containing a (fairly) heavily commented example on how things could be done this way, plus a live example. I'm honestly not sure about performance, but I can't imagine it would be worse than having multiple instances of Phaser. Look through the example, clone the repository and modify it to your heart's content, and if you have any questions, I'll do my best to answer them. This example was tested with Phaser CE 2.7.3 -MikauSchekzen
  23. I have a sidescroller world in which the camera always moves to the right at the same pace. It forces the user to move along with it, because the player cannot move outside of the camera bounds. I have tried doing it like this:, 0, +, - 60); in my update function and this works well enough for the left side of the camera but not the right. WHen I set the world width to - 1, the camera can no longer move but the bounds do work. Does anybody have an idea of what I am doing wrong?Best regards, Jur
  24. Hello, Sorry if the question has already been answered. I'm a very junior developper so go easy on me I would like to interact within a mesh depending on the zoom of the camera Here is the playground Imagine when I get closer to a box, this one just explode or disappeared to show some boxes into it. Thanx for your help Jessica
  25. Could anyone please help me by advising on how do we set the camera view angle to the cavas using babylonjs?