Search the Community

Is there any way to pause a video immediately after creating the element with PIXI.Texture.fromVideo or fromVideoUrl? It looks like it might be bugged currently, because under some circumstances the paused flag is set but the video doesn't actually pause. I noticed in the fromVideoUrl function it will call play() before returning, and at one point console.log'ing the baseTexture.source element showed instead of the HTML tag, an object with a pixi_id or something. I'm not sure if that is relevant, but I haven't been able to repeat that, so I'm not sure if it was just a one off (but it makes me suspicious if that object is somehow messing with my .pause() calls? Maybe during the transition .pause() calls don't work properly, so the video keeps playing? I'm not sure how that would work, but I'm not sure what's going on there either.) This is the only code that I have been able to make that works, but I imagine it's fragile due to the bug? where sometimes .paused gets set to true even though the video is still playing. If the timeout is lower than 1000 it doesn't pause the video, but the paused flag gets set so it stops it's setTimeout loop. Also, it means the video plays for ~1 second before pausing which in my case is problematic. var renderer, stage, video, sprite;$(function() { renderer = new PIXI.autoDetectRenderer(1920, 1080); $('body').append(renderer.view); stage = new PIXI.Container(); video = PIXI.Texture.fromVideoUrl('720p_test_web.mp4'); sprite = new PIXI.Sprite(video); stage.addChild(sprite); animate(); pauseVideo(video.baseTexture.source);});function animate() { requestAnimationFrame(animate); renderer.render(stage);}function pauseVideo(el) { console.log(el); if (!el.paused) { el.pause(); setTimeout(pauseVideo, 1000, el); }}I tried passing the video element directly into PIXI.Texture.fromVideo() but the video still doesn't pause and just plays from load. var renderer, stage, video, sprite;$(function() { renderer = new PIXI.autoDetectRenderer(1920, 1080); $('body').append(renderer.view); stage = new PIXI.Container(); video = PIXI.Texture.fromVideo(Util.fromVideoUrl('720p_test_web.mp4')); sprite = new PIXI.Sprite(video); stage.addChild(sprite); animate(); video.baseTexture.source.pause();});function animate() { requestAnimationFrame(animate); renderer.render(stage);}var Util = Util || {};Util.fromVideoUrl = function(src) { var video = document.createElement("video"); video.preload = "auto"; video.loop = true; video.src = src; video.pause(); return video;}Any ideas?

I'm working on a camera that behaves as if tracking a spaceship. The Z axis rotation shouldn't affect looking up/down and right/left, as if I'm the pilot in the cockpit of the ship in space, up is always my local up. I tried the FollowCamera, but it only lets me rotate the target mesh so the camera yaws, but doesn't roll or pitch. I tried the Free/Universal cameras, but rotating the camera to roll skews the yaw and pitch, as if they're in global dimensions - instead of local. I couldn't find a local/global rotation option, or figure out using quaternions/matrices with it, no matter how much I read about those and tweaked the code. I know I could make this spaceship camera from scratch, using an empty/mesh as a pivot, but I don't want to miss on using the quality code that comes with the engine already. Any suggestions?

Whether Camera is the parent of a Mesh (in example below), or the other way around (in my personal project), when moving "fast" at speed = 1000, eventually there is some (discrepancy) jitter visible on the mesh - although it's probably the camera that isn't set correctly (some matrix?) http://www.babylonjs-playground.com/#P1YTR#1 Just click, rotate some, then hold Up and Left arrows and wait til the jitters come, at a few seconds in. Just an example of keys used. Even after stopping, if you try to move a bit or look-around, the jitter is already there. A painful bug for my space sim, where I need to move sonic faaaaast!

Hi! Thanks for joining me from my previous thread or if you're new here! Previous thread: MAJOR GOAL: Create a multiplayer game using websockets. GAME CONCEPT: Attempt to be the last ball surviving as other balls and environmental effects attempt to knock you off the platform. STATUS: Finessing the single-player version where it is just player vs. environmental effects. Check out the current incarnation of the single-player game here: http://aaronjanke.com/ballGame/ Github: https://github.com/ballAndBoardInc/ballGame CHALLENGE #1 Currently, I'm looking at finessing the controls. They accelerate too quickly, since holding down the key doesn't provide immediate repetition of the trigger. It's awkward. Looking for smoother acceleration. CHALLENGE #2 We are implementing a game reset, but in its current incarnation it doesnt properly rebind the controls after it resets. Definitely open to thoughts. This is our current control system: scene.actionManager = new BABYLON.ActionManager(scene); scene.actionManager.registerAction( new BABYLON.ExecuteCodeAction( { trigger: BABYLON.ActionManager.OnKeyDownTrigger, parameter: 'a' }, function () { console.log('a pressed'); playerMesh.applyImpulse(new BABYLON.Vector3(10, 0, 0), playerMesh.getAbsolutePosition()); } ) ); scene.actionManager.registerAction( new BABYLON.ExecuteCodeAction( { trigger: BABYLON.ActionManager.OnKeyDownTrigger, parameter: 'w' }, function () { console.log('w pressed'); playerMesh.applyImpulse(new BABYLON.Vector3(0, 0, -10), playerMesh.getAbsolutePosition()); } ) ); scene.actionManager.registerAction( new BABYLON.ExecuteCodeAction( { trigger: BABYLON.ActionManager.OnKeyDownTrigger, parameter: 'd' }, function () { console.log('d pressed'); playerMesh.applyImpulse(new BABYLON.Vector3(-10, 0, 0), playerMesh.getAbsolutePosition()); } ) ); scene.actionManager.registerAction( new BABYLON.ExecuteCodeAction( { trigger: BABYLON.ActionManager.OnKeyDownTrigger, parameter: 's' }, function () { console.log('s pressed'); playerMesh.applyImpulse(new BABYLON.Vector3(0, 0, 10), playerMesh.getAbsolutePosition()); } ) );

I'm developing a game that will have grid based maps - levels and the player will be moving through it one block per keystroke. I'll be using the keyboard as input just for the start, I'll add others later on. Every level is generated from a double array filled with 1 & 0. So I want to do here is for example: if I press W the player will move one block forward. if I press Q the player will rotate anticlockwise by 45 degrees.

Hi! First post here. I'm currently experimenting with the gamepad API and I'm trying to capture the motion/orientation of my dualshock 3 to build controls for a new game project. I was wondering if anyone had manage such a thing and managed to make it work in the browser? It seems that WebVR makes use of the motion data using the gamepad.pose object and so far I've been unlucky to reach it on a regular controller. Has anyone managed such a thing and could help? Thank you!

The title might be a bit misleading but that was the best I could come up with. So now to the main part. I am having a hard time making the controls for a game which was inspired by Ball Wars By Brackeys and a classic of game of Capture the Flag. Basically you either shoot and kill your opponent or be the first one to capture their crystal by standing on top of it. The controls are what I could decipher from the video. But I am having a lot of difficulty aiming because of the way I implemented the game by seeing the video. Also I want both the players to play from the same keyboard as of now. So any help regarding how to implement the aiming would help me out a lot. The controls are WASD to move and T to Shoot and Y to Jump for Player 2 and Arrow Keys to move Space to jump and Ctrl to shoot for Player 1. The code is available on Github: https://github.com/Rud156/Sketches The project name is: ballBlasters Any help would be gladly appreciated.

What I want to achieve: as long as the mouse button is pressed, character follows it when a player releases mouse button character moves to the position, where the cursor was during release when a player clicks the mouse button character moves to that position of cursor using pathfinding on longer distance The first two points work suprisingly well with the use of arcade physics. I keep setting velocity each time mouse position is changed and store the last mouse position, so it can be used when the mouse button is released. I can drag character around the map this way, he bumps into obstacles and slides around them when I manipulate the mouse, this is the expected behavior and I am very happy about it. Because the movement is free and doesn't snap to grid, I have a hard time implementing pathfinding. When I use navmesh, character keeps getting stuck on the edges, because setting velocity isn't very accurate. When a mouse button is pressed, my pathfinding algorithm stores a path in an array and since I want the fastest path it will most likely lead close to a wall/obstacle, and I come to this example problem: Next destination on my path is x:200, y:400, my character has a velocity set, and one frame he is at 199:398, but the next frame he will be at 201:402, so I have to choose when I want it to count he reached the destination, sometimes that one pixel difference from what was expected leads to him being stuck at the corner, because arcade physics will block it. My two ideas are: force it to always stop at the exact location, but this looks wierd, it shifts a pixel every time it reaches the end of a path, the other idea is to turn off arcade physics when I am using pathfinding, but I am afraid this will cause more problems. I am not exactly sure how to go about it.

Hi there, I'm new here. First of all: Thank you to all of you guys contributing to Babylon.js, it's an amazing project! I'm using it mainly to set up interactive 3D visualizations for scientific purposes and it works like a charm! Here's my question: So far I mainly use the ArcRotateCamera. There's nothing wrong with that camera, but the restriction that I cannot rotate over the 'north/South Pole' is something that bothers me, because it limits the exploration possibilities of the user. Further, although one can see the target from any position around it, one cannot see the target in all possible orientations. I would like a camera with trackball-like controls for the rotation around the target, meaning that in whichever position the camera is, I want to be able to rotate it around the two independent directions orthogonal to the line connecting target and camera position. Is it possible to create such a behavior by customizing the UniversalCamera? Or if not, what would be the simplest way to implement such a camera? Another idea would be to use a static camera and to attach custom mouse controls to rotate the target in the preferred way. But I don't know if this creates any drawbacks in terms of rendering performance. Does it? Thanks a lot!

Hi, When the cursor keys are pressed the player moves in the correct direction, however, it keeps moving even if the key is released. Can anyone help? createPlayer: function() { this.player = new ZPlat.Player(this, 100, 100); this.dude = this.add.group(); this.dude.add(this.player); }, update: function() { if(this.cursors.left.isDown) { this.player.body.velocity.x = -this.RUNNING_SPEED; this.player.scale.setTo(1, 1); this.player.play('walking'); } else if(this.cursors.right.isDown) { this.player.body.velocity.x =this.RUNNING_SPEED; this.player.scale.setTo(-1, 1); this.player.play('walking'); } else { this.player.frame = 2; this.player.animations.stop(); } if(this.cursors.up.isDown) { this.player.body.velocity.y = -this.JUMPING_SPEED; } if(this.player.body.y > this.game.world.height) { this.gameOver(); } },

Could someone help me? I am trying to figure out why about my problem with 2 players controls here is the whole game could someone please help me fix the Level1 Mobile App.rar This is the part where i am so confused and idk which one to fix.

I want to add controls like buttons and range sliders into the babylon.js scene. I am making an interior scene of a room. Can anyone share a link or page where i can find any info about that.

Hello, everyone. This is my first post on the HTML 5 Game Devs forum. I'm currently working on a top-down shooter using Phaser, and this forum has been very helpful on this project. However, there is one problem to which I can't seem to find the solution. In my game there are vessels, and the vessels have engines. The engines determine vertical and horizontal acceleration and maximum speed. Everything is working wonderfully, but I'd like to create sprites that aren't just facing straight up or down. In other words, I'd like to replace vertical and horizontal movement with forward and lateral movement. Here's what my moveUp function looks like right now: this.body.velocity.y += verticalAcceleration; And then I ensure we haven't exceeded the maximum vertical speed: if (this.body.velocity.y > maxVerticalSpeed) { this.body.velocity.y = maxVerticalSpeed; } Now I know there are many examples showing how to manipulate the sprite's velocity based on its angle by doing something like this: this.body.velocity.x = Math.cos(this.rotation) * maxSpeed; this.body.velocity.y = Math.sin(this.rotation) * maxSpeed; But none of the articles or posts I've seen deal with separate forward and lateral maximum velocities. I've tried approaching this problem from many angles (pun intended), but I can't seem to wrap my head around it. The sprites need to be able to move forward and backward without exceeding the forward speed limit and negative forward speed limit respectively, and they need to strafe left and right without exceeding the lateral speed limit. They also need to be able to move forward/backward and laterally at the same time. I've spent far too long searching for examples, rewriting my code, etc., and now I'm ready to ask for help. TL;DR: How can I accelerate a sprite forward, backward, left, or right while using different forward and lateral maximum speeds? EDIT: I probably should have mentioned that I'm using Phaser to create this game.

I couldn't find the mouse controls in the source. Is there a way to set the mouse up event to the html element as opposed to the canvas element? And would it have to be a custom build to do so? Thanks in advance. --Nevermind I see they are all within the cameras. -P

Hi. I'm new to phaser, and I'm working on a game where I need to add a dpad for mobile players. If I have a game size 600 x 800, how can I limit the drawing size of the tilemap to 600x600 so that I can use the other 600x200 to controls? Something like this: https://gyazo.com/8dc44f343c8d70370f66c0d2497d5fc0 Thanks!

Hello Everybody, I am trying to switch active cameras from the Virtual joy stick camera to the Arc rotate camera and back. Is there a good way to just hide the virtual Joy stick camera controls instead of removing them with the dispose function? Right now I am using the dispose function and creating a new camera every time I want to switch between the two cameras. But I want to just toggle on and off the joystick camera controls any ideas?

I am very much new to Phaser and Game Development in general and I had a quick questions about player controls through multiple states. I recently made a small "game" that had a player walking through different levels that I created using different states. But I just copied and pasted the code for movement in the update function for each different state. I assume there is a better way to do this, maybe in a separate function somewhere, but where? Any help would be greatly appreciated.

http://codepen.io/anon/pen/qEKONO?editors=001 I am trying to add controls so if the mouse is anywhere on the left side of the character the character goes to the left and vise vera I am following this example http://examples.phaser.io/_site/view_full.html?d=input&f=follow+mouse.js&t=follow%20mouse The reason I want this is so it works on mobile. I copied the example and my game crashes :/ http://codepen.io/anon/pen/qEKONO?editors=001 Is this because follow mouse can't only make a character move vertical?

Hello everyone, I'm fairly new to Phaser, and I'm just starting to figure things out. I made a simple prototype that uses "game.input.keyboard.createCursorKeys()" to listen and process the keyboard's cursor keys. Basically I have a sprite that moves up, down, left and right depending on input. Now I'm trying to achieve the same using touch events: when I swipe left, the sprite moves left; when I swipe up, the sprite moves up, etc.... but with no success. I've managed to detect swipe using a solution that user @imshag posted in this topic: http://www.html5gamedevs.com/topic/3862-swipe-to-jump/?hl=%2Bswipe+%2Bphaser#entry24473 It detects swipe, but doesn´t give me info on the direction of it. I could really use your help... How can I detect the direction of a swipe, and limit it to "up", "down", "left" and "right? Thanks in advance!

Hi all, so I'm still very new to Phaser but I really want to learn this! So my first question is ... instead of holding down the left or right key to move I want to set it so that you have to repeatedly tap the right button to move right instead of holding it down. So every time the right key is tapped a small like 1 frame animation will happen and the character will move say 3 pixels forward. so this will continue every time you tap. hope I made this clear enough and thanks in advance!

Hello! I'm migrating from AS3 to HTML5 and decided to use Phaser. That's great, many thanks for creating it! I have a question about organizing the MouseDown event listener. Let's say I have 100 sprites on the screen, and if the player click on any of them, the sprite's data should be traced. In AS3 adding event listener to each of the sprites I could do: stage.addEventListener(MouseEvent.MOUSE_DOWN, onMDown);......private function onMDown(e:MouseEvent):void{ if (e.target is Sprite){ trace("you clicked on: "+(e.target as Sprite).name); }}Is there such a way in Phaser? I understand, that when creating these sprites in Phaser I have to do: for (var i=0; i<100; i++){ var spr = game.add.sprite(Math.random()*600,Math.random()*400,'PIC_SPRITE'); spr.name = 'Sprite'+i; spr.inputEnabled = true; spr.input.start(0, true); spr.events.onInputDown.add(onMDown, this);}...function onMDown(item, pointer){ console.log('you clicked on '+item.name);}So, I wonder, do I really need to add onInputDown to each sprite? Perhaps, the same effect could be achieved by adding a single function to game.input.onDown, like I did in AS3 adding a single function to stage onMouseDown?

how do you change the camera rotate speed so that moving the mouse less rotates the camera more. i'm using a free camera if it's different. (not with camera.inertia).

Hello together, I'm currently trying to figure out how a player (avatar) on a topdown map may interact with other objects on screen by pressing the action button. And I'm totally locked in a stalemate. Here is my set up: A player sprite with a body (arcade) which is movable with a facing direction (up, down, left, right) a isLocked flag (if he interacts, prevent new interaction) A group of NPC, each sprite has a body with an interactionType (dialogue, shop, none) an optional dialogueList [dialogues [{speaker, spokenText}, ..], ..] to choose from. an optional shoppingList [{item, price, quantity},...] A group of (non-physical) Objects with an interactionType (pickup, door, event) an optional itemId and itemType (item | weapon | questItem) an optional eventKey (to call the event) an optional locationKey (to set the map for changing) An input key which, when pressed, will check a nearby object, which means an object standing on, or an npc standing next and evaluate the object (interactionType) and make a decision how to work with it (open a dialogue with passing a random set of dialogueLinesWhile evaluating the object actually comes easy, finding and passing by an object brings the horror. If tried collides, overlaps and touching, all falls short while it is needed actually walk into an object to trigger a function - if I just stand next a npc and stare at him, none of the events is true. I've read about blocked, but it will just tell me if true or false, but nothing about what is blocking me. And for none-physical objects all four options fall short, as they must not have a body (so the player can stand of it). Can anyone help me to set my mind back to the right direction?

I'm trying to get my player controls to be more responsive. Currently, when I stop inputting directions, the player stops quickly. However, if I try to change directions quickly, switching immediately from left-to-right (or vice versa) my player slides a bit in the original direction. How can I fix this? See the game here: http://lyledenman.com/portfolio/games/worldhopper/index.html Controller code below: *Note playerHigh and playerLow describe the player's coordinates as near the top or the bottom of the rectangle. onLeft and onRight describe whether the player is touching the side of the rectangle. function leftInputIsActive() { var isActive = false; isActive = this.game.input.keyboard.isDown(Phaser.Keyboard.LEFT); isActive |= (this.game.input.activePointer.isDown && this.game.input.activePointer.x < this.game.width/4); return isActive; } function rightInputIsActive() { var isActive = false; isActive = this.game.input.keyboard.isDown(Phaser.Keyboard.RIGHT); isActive |= (this.game.input.activePointer.isDown && this.game.input.activePointer.x > this.game.width/2 + this.game.width/4); return isActive; } if (rightInputIsActive() && !playerLow) { this.player.body.acceleration.x = this.ACCELERATION; } else if (rightInputIsActive() && playerLow) { this.player.body.acceleration.x = -this.ACCELERATION; } else if (leftInputIsActive() && !playerLow) { this.player.body.acceleration.x = -this.ACCELERATION; } else if (leftInputIsActive() && playerLow) { this.player.body.acceleration.x = this.ACCELERATION; // } else if (leftInputIsActive()) { // this.player.body.acceleration.y = this.ACCELERATION; // } else if (rightInputIsActive()) { // this.player.body.acceleration.y = -this.ACCELERATION; } else if (leftInputIsActive()) { this.player.body.acceleration.y = this.ACCELERATION; } else if (rightInputIsActive()) { this.player.body.acceleration.y = -this.ACCELERATION; } else { this.player.body.acceleration.x = 0; } if ((leftInputIsActive() && onLeft) || (rightInputIsActive() && onRight)) { this.player.body.acceleration.y = this.ACCELERATION; } else if ((leftInputIsActive() && onRight) || (rightInputIsActive() && onLeft)) { this.player.body.acceleration.y = -this.ACCELERATION; } else { this.player.body.acceleration.y = 0; }

I think this is probably the right subforum for this, but I thought it'd be useful to discuss various interface models for mobile games and ways of adapting traditional interface ideas from desktop to work in a mobile environment (for porting purposes, for example). - Let me start with an example. I've got a game right now that uses tooltips for all of its documentation. On mobile, this could mostly just be 'click on the text to get a popup describing it' but in a few cases at least, the tooltips pop up when you hover on buttons; obviously this won't work in mobile environments. The solution that we came up with was to have a 'help mode' toggle button that makes it so that a touch gets information rather than activating UI elements. I'm not incredibly satisfied with that solution though. - Another example: I've seen a number of vertical shooter type games designed for mobile. On PC, you could both move the craft and aim the craft's guns (e.g. using mouse for aim and arrows for movement). You can't really do that on mobile. One gimmick I've seen in a few places is to have a bar at the bottom of the screen where you drag a tile left and right to position your ship, but I've found the problem with this is that when you play it on desktop, the mouse too easily leaves the bar when you're dodging, and so you lose control for a few seconds and get destroyed. If I really needed aim and movement, I might try multi-touch (one finger aims, the other centers the ship) but I think it would be clunky. - For larger tablets, you could make something like a gamepad in the lower part of the screen and have the player use it like they would use a handheld console. Anyhow, are there other mobile interface models that you like to use in your games, things you think could be improved on, etc?