Search the Community

i don't know how to rotate my character when i drag the joystick environment_model.html

Hello, I am experiminting with the Virtual Joysticks Camera and I have a scene that is relatively large. when I use the left joystick to move the camera it moves really slow, I can't figure out how to change the speed of the left joystick. The right joystick(camera rotation) rotates just fine. Thanks for the help!

Hi, I would like to add to propose the following small update to the joystick plugin in order to make it compatible with hires scaling: var radius = this.bg.shapes[0].shape.radius / 2; must become: var radius = this.bg.shapes[0].shape.radius / 2 / game.scale; could you update this @enpu? Thanks!

Hi guys, I am trying to create a Game with Ionic 2 (=> Typescript) and Phaser and so far it was fine... until that I tried to add the plugin Virtual Joystick. The line this.pad = this.game.plugins.add(Phaser.Plugin.VirtualJoystick); return an error about undefined "game" But the comment above this line works fine ... It's maybe that I don't use the correct syntax to call a plugin ... Please Help me import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; import { Platform,AlertController } from 'ionic-angular'; import { Storage } from '@ionic/storage'; import { HomePage } from '../home/home'; /* Generated class for the Play page. See http://ionicframework.com/docs/v2/components/#navigation for more info on Ionic pages and navigation. */ ///<reference path="js/phaser-virtual-joystick.min.js"/> @Component({ selector: 'page-play', templateUrl: 'play.html' }) export class PlayPage { score: any; scoreObj: Number; game: Phaser.Game; map: Phaser.Tilemap; balloon: Phaser.Sprite; bg: Phaser.TilemapLayer; start: Phaser.TilemapLayer; hit: Phaser.TilemapLayer; cursors: Phaser.CursorKeys; pad; stick; test; constructor(public navCtrl: NavController, public navParams: NavParams,platform: Platform,public storage:Storage,public alertCtrl: AlertController) { platform.ready().then(() => { storage.get('scores'); storage.get('level'); }); } ionViewDidEnter(){ this.score = 0; this.scoreObj = 100; var innerWidth = window.innerWidth; var innerHeight = window.innerHeight; this.game = new Phaser.Game(innerWidth, innerHeight, Phaser.AUTO, 'myGame', {create: this.create, preload: this.preload,update:this.update, render: this.render}, true); } preload(){ this.game.load.spritesheet('balloon', 'img/balloon-01.png',112,150); this.game.load.image('lest','img/sac.png'); this.game.load.image('target','img/hole.png'); this.game.load.tilemap('level1', 'img/bg-test.json', null, Phaser.Tilemap.TILED_JSON); this.game.load.image('bg-test', 'img/bg-test.png'); this.game.load.atlas('arcade', 'img/arcade-joystick.png', 'img/arcade-joystick.json'); } update = () =>{ this.game.physics.arcade.collide(this.balloon, this.hit,() => { this.balloon.kill(); this.score = this.score + 3; console.log("hit"); }); this.game.physics.arcade.collide(this.balloon, this.start); this.game.physics.arcade.collide(this.balloon, this.bg,() => { this.balloon.kill(); console.log("bg"); this.score = this.score - 1; }); this.game.input.update(); if (this.cursors.left.isDown) { this.balloon.position.x -= 5; } else if (this.cursors.right.isDown) { this.balloon.position.x += 5; } } render = () =>{ this.game.debug.body(this.balloon); } create = () =>{ /*var plugins = new Phaser.PluginManager(this.game); console.log(plugins);*/ this.pad = this.game.plugins.add(Phaser.Plugin.VirtualJoystick); this.game.physics.startSystem(Phaser.Physics.ARCADE); this.cursors = this.game.input.keyboard.createCursorKeys(); this.game.world.setBounds(0, 0, 9600,800); //MAP var map = this.game.add.tilemap('level1',9600,800,9600,800); map.addTilesetImage('bg-test'); this.hit = map.createLayer('hit'); this.start = map.createLayer('start'); this.bg = map.createLayer('bg'); //BALLOON this.balloon = new Phaser.Sprite(this.game, 192, 490, 'balloon'); this.balloon.debug = true; this.game.world.addAt(this.balloon, 3); this.game.physics.enable(this.balloon, Phaser.Physics.ARCADE); this.balloon.body.gravity.y = 15; this.balloon.body.collideWorldBounds = true; this.balloon.inputEnabled = true; this.game.camera.follow(this.balloon, Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1); this.balloon.animations.add('fly', [ 0, 1, 2, 3, 4, 5], 20, true); this.balloon.body.velocity.y = 10; // GAME map.setCollision([1,2,4,5],true,this.bg.index,true); map.setCollision([6],true,this.hit.index,true); map.setCollision([3],true,this.start.index,true); } }

Hello, I'm developing a game with Ionic 3.5 and PHASER-CE, I recently bought the VIrtualJoystick and when trying to implement I'm getting the error: this.game undefined. ERROR ( core.es5.js:1084 ERROR TypeError: Cannot set property 'game' of undefined at Phaser.PluginManager.add (phaser-split.js:8917) at Fogo.webpackJsonp.274.Fogo.create ( ) Can you give me some help on how to implement this plugin. PS, it's all in typescript create() { this.game.plugins.add(Phaser.Plugin.VirtualJoystick); } Thank you for your attention, I'm sorry, my English, because I'm in Brazil and my language is PT-BR

I am using the virtual joystic camera to move around in my scene for users who are using ipads. The VJS camera works perfectly, but how do I allow users to pick objects in the scene? is there a way to keep the joysticks fixed on the bottom of the screen and allow the user to still pick objects?

Hey guys, the canvas is a small part of my website. <canvas id="canvas" style="position: absolute; width: 80%; height: 80%; touch-action:none; "></canvas> How can I set the range from my joystick camera? It recognize the camera in the whole website.

Hello! How many of yours have had the need to add a virtual joystick to your new phaser project? The options we have constrain us having the joystick static in one place in the screen. Most of the time this solution is not enough to give the best gaming experience. What do I mean? Not all the people have the same finger length, neither the same screen size. Users have a very big pool of different devices and configurations, driving us crazy dealing with all of them. That's why my team and I developed a custom solution, and now we want to share it with you: VJoy Plugin. The source code is available from https://github.com/InformalPenguins/phaser-vjoy-plugin What does this plugin do? The position is dynamic. Where you start to touch, the joystick will set its base. You should define the coordinates where the joystick will have effect. This let us having half of the screen ready for the joystick, and buttons in the other half. We are working on many projects using this Phaser, and implementing this plugin. We're going to continue improving this plugin at the time we find more needs in our games. So, please feel free to use it and/or make the modifications you want. You can help us reporting bugs or improvements too registering issues in github. We hope you like it. Cheers. Install it using bower:bower install phaser-vjoy-pluginor download directly from github: SOURCE: https://github.com/InformalPenguins/phaser-vjoy-plugin DEMO: (Note: it works with mobile devices only) http://informalpenguins.com/phaser-vjoy-plugin/

I'm building my own joystick class for my game, and my virtual joystick consists of two parts: the base, which doesn't move, and the mobile part of the top. I was using this.topPart.fixedToCamera = true;to fix the joystick position to the camera, as my game is a scroller and I want the joystick to stay in the same position. The problem is that if I set that property to true I can't change the sprite's position. And if I don't fix the sprite to the camera when the camera moves that part of the joystick will not stay in place. Is there any way for moving the sprite in relation to the camera position? If not, what alternative approach should I take? (I also tried adding the 'relative' position to the game.camera.view.x/y properties, but that showed to be quite slow)

Hi, I'm porting some cocoa code over to TypeScript and I'm currently working on the virtual joystick code. I noticed that if a mouse/touch is down and moving, update() will be sent twice. At least it appears that way. You can see an example of the anomaly here: http://www.sputnikgames.com/test/ If you constantly move your finger while holding the joystick thumb pad, the fish will move faster than if you hold your finger still on a direction with the thumb pad. The virtual joystick class has an update() method that's called by Phaser. If I remove it's update method and simply call a private method from the main update(), it will still show the same behavior. So this means to me that update() is getting fired off multiple times, or the pollRate changes or something. I just don't know. Thinking it was a hardware issue, I've tested this out on every system I have from Windows Phone, Android phones and tablets, iOS 6-7, iPad iPhone, desktops, etc and they all show the same behavior. I looked through all the docs and tried many different things but nothing seems to stop update() from acting strange when the mouse is down and dragging. I did find a work around by using setMoveCallback() in my class and then calling my own update method on each joystick class. Before I settle on using setMoveCallback() I just wanted to be sure I wasn't stumbling on a bug or something simple I'm missing from my code. If anyone can go to the URL above to see if they see the same thing and post what they find here I'd appreciate it. Maybe this is the correct behavior? Thanks everyone. --Mark