BanneD Posted November 14, 2018 Share Posted November 14, 2018 Hi, i have this code that's kinda copy-paste from one of the tutorials ( http://labs.phaser.io/edit.html?src=src\camera\world view.js ). Basically you can move the camera with the arrow-keys and i've only changed the image. Anyway when i run this, my camera is not moving. I even used a textField to see if the camera is working in case i can't see it in my own image. But the textField never changes. I did some digging and some people said it might be a chrome problem but i run it on firefox and microsoft edge and even on IEE but i had the same results in every browser. When i run my script code in the Phaser 3 Sandbox it runs fine. Can someone tell me what's wrong? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Insert Title here</title> <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> var config = { type: Phaser.AUTO, width: screen.width, height: screen.height, /*physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: false } },*/ scene: { preload: preload, create: create, update: update } }; var controls; var game = new Phaser.Game(config); var cursors; function preload () { this.load.image('board', 'assets/Europe_regions.png'); } var scoreText; function create () { this.add.image( 0,0 , 'board').setOrigin(0); scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#fff' }); cursors = this.input.keyboard.createCursorKeys(); var controlConfig = { camera: this.cameras.main, left: cursors.left, right: cursors.right, up: cursors.up, down: cursors.down, acceleration: 0.05, drag: 0.0005, maxSpeed: 2.0 }; controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig); var cam = this.cameras.main; cam.setBounds(0, 0, 4096, 4096).setZoom(1); var gui = new dat.GUI(); gui.addFolder('Camera'); gui.add(cam.midPoint, 'x').listen(); gui.add(cam.midPoint, 'y').listen(); gui.add(cam, 'scrollX').listen(); gui.add(cam, 'scrollY').listen(); gui.add(cam, 'width').listen(); gui.add(cam, 'height').listen(); gui.add(cam, 'displayWidth').listen(); gui.add(cam, 'displayHeight').listen(); gui.add(cam, 'zoom', 0.1, 4).step(0.1); gui.add(cam.worldView, 'left').listen(); gui.add(cam.worldView, 'top').listen(); gui.add(cam.worldView, 'right').listen(); gui.add(cam.worldView, 'bottom').listen(); //mainCamera = this.cameras.setBounds(0,0,screen.width,screen.height); //mainCamera.setBounds(0, 0, screen.width, screen.height);*/ } function update(time, delta) { if ( cursors.left.isDown ){ scoreText.setText('Camera is moving'); } controls.update(delta); } </script> </body> </html> Link to comment Share on other sites More sharing options...
rich Posted November 14, 2018 Share Posted November 14, 2018 Change from 3.11.0 to 3.15.1 just to keep current, but the issue is one of scope. You define 'cursors' in your create function as a variable, meaning it's local to that function only, so when you inspect it in the update function, it has no idea what var you're talking about. Hoist the scope of cursors up. For this example, just make it global, like controls is. For a production game, make it a class property. Link to comment Share on other sites More sharing options...
BanneD Posted November 14, 2018 Author Share Posted November 14, 2018 1 hour ago, rich said: Change from 3.11.0 to 3.15.1 just to keep current, but the issue is one of scope. You define 'cursors' in your create function as a variable, meaning it's local to that function only, so when you inspect it in the update function, it has no idea what var you're talking about. Hoist the scope of cursors up. For this example, just make it global, like controls is. For a production game, make it a class property. I did but my camera still not moving and text won't change. What else could be the issue? Link to comment Share on other sites More sharing options...
rich Posted November 14, 2018 Share Posted November 14, 2018 If this works fine in everything other than Chrome, you've probably got a Chrome extension installed that is stealing the input. Link to comment Share on other sites More sharing options...
BanneD Posted November 14, 2018 Author Share Posted November 14, 2018 16 minutes ago, rich said: If this works fine in everything other than Chrome, you've probably got a Chrome extension installed that is stealing the input. Ok, i'm in my university now. i will test it when i get home and give some feedback Link to comment Share on other sites More sharing options...
BanneD Posted November 14, 2018 Author Share Posted November 14, 2018 4 hours ago, rich said: If this works fine in everything other than Chrome, you've probably got a Chrome extension installed that is stealing the input. Still not working in other browsers aswell. And Firefox and Edge don't have any extensions. I even used a virtual keyboard in case my keyboard is the issue Link to comment Share on other sites More sharing options...
rich Posted November 14, 2018 Share Posted November 14, 2018 If it doesn't work in any browser, the issue is with your code. Post the full thing here. Link to comment Share on other sites More sharing options...
BanneD Posted November 14, 2018 Author Share Posted November 14, 2018 4 minutes ago, rich said: If it doesn't work in any browser, the issue is with your code. Post the full thing here. I have already updated the code Link to comment Share on other sites More sharing options...
BanneD Posted November 14, 2018 Author Share Posted November 14, 2018 If it helps the error i get in my console.log is that dat is not defined. EDIT: I'm using Wamp Server and i don't have Node.js. EDIT2: I lacked Dat.gui library. Downloaded it from Github and linked it to my project and it worked Link to comment Share on other sites More sharing options...
Recommended Posts