Search the Community
Showing results for tags 'game state'.
Found 6 results
-
Hi there! I'm relatively new...ok very new to coding with phaser and I'm having a tough time finding tutorials that can help guide me through a few of the basics for what I'm looking for. I've been trying to use this tutorial: How to make a multiplayer online game with Phaser, Socket.io and Node.js And this one: How to create a multiplayer game with Phaser, Node, Socket.io and Express. However, it seems that both tutorials were made using Phaser2 and there are a few fundamental differences that don't function well using the newer code. The biggest part I'm having trouble with is the differences between game states in the old Phaser and how they are different from the scenes the new version uses. game.state.add('Game',Game); game.state.start('Game'); These functions specifically seem to break my game every time I try and use them. Is the new phaser designed to be run entirely through the index.html file? Or is there a way to execute most of my game's code in a separate game.js file? Currently I have at least a functioning game where I can move around on a map, but the entire thing is contained inside a single index.html file. You can see my game's code here: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Top Down Multiplayer Test Game</title> <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script> <script src="/node_modules/socket.io-client/dist/socket.io.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> var config = { type: Phaser.Auto, width: 960, height: 960, physics: { default: 'arcade', arcade: { debug: false } }, scene: { preload: preload, create: create, update: update } }; var player; var blocked; var game = new Phaser.Game(config); function preload () { //assets to use in the loading screen this.load.image('preloadbar', 'assets/images/preloader-bar.png'); //load game assets this.load.image('level1', 'assets/tilemaps/level1.png'); this.load.image('gameTiles', 'assets/images/Outside_A2.png'); this.load.image('gameTiles', 'assets/images/Outside_B.png'); this.load.image('emptypot', 'assets/images/emptypot.png'); this.load.image('filledbucket', 'assets/images/filledbucket'); this.load.image('player', 'assets/images/player.png'); this.load.image('doorleft', 'assets/images/doorleft.png'); this.load.image('doorright', 'assets/images/doorright.png'); this.load.image('tent', 'assets/images/tent.png'); this.load.image('sign', 'assets/images/sign.png'); this.load.image('campfire', 'assets/images/campfire.png'); this.load.image('woodpile', 'assets/images/woodpile.png'); this.load.image('tree', 'assets/images/tree.png'); this.load.image('rock', 'assets/images/rock.png'); this.load.image('grapes', 'assets/images/grapes.png'); this.load.image('log', 'assets/images/log.png'); this.load.spritesheet('dude', 'assets/spritesheets/dude.png',{frameWidth: 32, frameHeight: 48}); } function create () { this.add.image(480, 480, 'level1'); blocked = this.physics.add.staticGroup(); blocked.create(456, 216, 'sign'); blocked.create(648, 168, 'woodpile'); blocked.create(648, 216, 'campfire'); blocked.create(744, 168, 'tent'); blocked.create(840, 216, 'filledbucket'); blocked.create(600, 400, 'rock'); blocked.create(648, 448, 'rock'); blocked.create(600, 448, 'grapes'); blocked.create(214, 720, 'tree'); blocked.create(214, 552, 'tree'); blocked.create(214, 384, 'tree'); blocked.create(214, 286, 'log'); blocked.create(214, 192, 'tree'); blocked.create(358, 192, 'tree'); player = this.physics.add.sprite(480, 480, 'dude'); player.setBounce(0.2); player.setCollideWorldBounds(true); cursors = this.input.keyboard.createCursorKeys(); this.physics.add.collider(player, blocked); this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3}), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'turn', frames: [ { key: 'dude', frame: 4 } ], frameRate: 20 }) this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }), frameRate: 10, repeat: -1 }); } function update () { if (cursors.left.isDown) { player.setVelocityX(-160); player.anims.play('left', true); } else if (cursors.right.isDown) { player.setVelocityX(160); player.anims.play('right', true) } else if (cursors.up.isDown) { player.setVelocityY(-160); player.anims.play('right', true) } else if (cursors.down.isDown) { player.setVelocityY(160); player.anims.play('left', true) } else{ player.setVelocityX(0); player.setVelocityY(0); player.anims.play('turn'); } } </script> </body> </html> I'm also having a few issues adapting what I see in these tutorials around using a server to keep track of my player's position and report back locations. Some examples start with something as basic as referencing socket.io in my code as a source. In all the tutorials I can find they say to use this line of code in my index.html file: <script src="/socket.io/socket.io.js"></script> However this doesn't work, as you can see at the top of my game file above, I had to reference the full file path, going in through the node_modules folder and finding the socket.io.js file. Am I doing something wrong? Or am I supposed to reference the full file path and the tutorial is not accurate? Finally when trying to implement some of the code in the tutorials into the game file itself to tell the game to ask the server when a new client is connected, I get an error saying the code is invalid. I'm not sure if this is because I am putting the code in the incorrect place, or if it's because the code doesn't work in Phaser3 the way it did in version 2. Client.askNewPlayer(); The tutorial says to put this "at the end of game.create()" however because I don't have game states, I have nothing I can find as the equivalent. Just for the sake of testing it out, I tried placing this code inside the "function create ()" of my game if only because of the word create, and then also in the "function update ()" of my game because I figured this is where the game is always looping and checking for updates. But both gave me errors saying that "client is not defined" Again I'm sure you can probably tell this is my first time doing this sort of thing with real code, I've been messing around with RPG maker before this, but I really think I can get the hang of it if I can just get a few pointers or tips to get me going in the right direction! Any help or advice would be greatly appreciated!
-
I would like to prevent players from switching to any game state by typing "game.state.start('name');" into the console. Has anyone found a way to prevent this from happening? Imagine you have a login-screen and any user can just type "game.state.start('play');" into the console and skip straight into the game. I have already tried using anonymous functions and closures but the problem is that the other states such as BootState, MenuState, GameState etc cannot access the game object created from new Phaser.game. I cannot be the only one who's worried that users can simply skip any game state by typing one line into the console. How have others dealt with this security breach? I tried googling but couldn't find any posts about this whatsoever. Thanks in advance for all answers!
-
Hello all, I am having trouble with a problem that would seem very simple but I haven't been able to find an answer to in the forums and there is not a close example I've been able to find on the Phaser.io site. Explanation: I have a quiz game that asks questions like multiple choice. At the bottom of the game there is a row of circles with numbers inside to show how many questions. When the user answers a question, the circle changes color (red = incorrect, green = correct). Then the row slides to the left. Problem : I use a click event and in the callback function I change the graphics fillColor property ex : rectangle.graphicsData[0].fillColor = 0xFF0000; I put this in the update state, and every frame, the update state looks into an array objects that track the question, the answer chosen and whether or not it was correct. It looks something like this. var tracker = [{question : 1, // Question numberchosen : 'A', // Choice chosenstatus : 0 // 0 for wrong, 1 for right}]So the idea is, that update looks to the question number the game is currently on, subtracts that value by one (the previous question), looks into the array, finds the question number and uses the status to determine whether the circle with the same number should be red or green. rectangle.graphicsData[0].fillColor = tracker[this.quest].status ? 0x00FF00 : 0xFF0000; I use a console.log to check the fillColor Property and it's changed to the correct color, but on screen, the rectangle never changes color. Bandaid : The only way I can change the color of the circle is by refiring the create state and using the same logic to redraw the circles based on my tracker array. I have put together a little snippet to recreate, basically the same functionality (change color of graphic on a event) ;(function($){ $.fn.graphics = function(){ var self = this; var Graphics = {} var game = new Phaser.Game( $(self).width(), $(self).height(), Phaser.AUTO, $(self).attr('id') ); var Objects = { rec : null, color: 0xFF0000 } var state = function(game){} state.prototype = { init : function(){ game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; }, preload : function(){}, create : function(){ Objects.rec = game.add.graphics(0,0); Objects.rec.beginFill(0xFF0000, 1); Objects.rec.drawRect(50,50,50,50); Objects.rec.endFill(); Objects.rec.inputEnabled = true; Objects.rec.events.onInputUp.add(function(){ console.log('fire'); Objects.color = 0x00FF00; }); }, refresh : function(){ }, update : function(){ Objects.rec.graphicsData[0].fillColor = Objects.color; console.log(Objects.color); }, } game.state.add('state', state); game.state.start('state'); }})(jQuery);Sorry for all the tab spacing, this editor seems to magnify all my tabs. here's a screen of my console log that shows the property changes
-
Hello, I wanted to ask if there is a way to tween a state when we enter it or when we leave it. Basically if some animation like "fade-in/out" can be applied to states. After some search I found this: https://github.com/cristianbote/phaser-state-transition, but I'm not sure if it is compatible with the latest Phaser version. If anyone has used this let me know if it is worth it. Thanks.
-
Hi there, being new to JS and game development I have two questions (I'll create a post for each) regarding a implementation of Frogger I'm working on. Part of the images are taken from Udacity's OOP JS course, though I'm not enrolled in the program anymore (so you're not helping me cheat). Similar to the original Frogger I would like to implement several levels that vary in terms of enemies' speed, the kind of enemies, the kind of goodies that can be collected etc. I've trouble with starting the next level (as player hits a lilypad), I want to call the create function again but with different parameters based on my definitions of what constitutes each level: var gameState = [ { speed: 0.1 * gameWidth, enemies: ['truckBug'], gems: ['orangeGem'], BlockRocks: false, spawnFrequency: 5000}, { speed: 0.15 * gameWidth, enemies: ['truckBug', 'bot'], gems: ['orangeGem'], BlockRocks: false, spawnFrequency: 4000}, {etc ...Should I redraw the whole world for each level? Is this best implemented via game states, e.g. one state per level? The whole code-base can be found here: https://github.com/MaxSchumacher/Frosch Any hints/help would be greatly appreciated! Greetings, Max
-
Hello, how is it going? I have trouble understanding how game states works in Phaser, I've searched the forum and I found a few posts about this, but I don't understand exactly how should I use it, I found it a bit confusing. ^^; I know the basics, but I don't know how to implement it. I mean, I have two files in HTML format, one is the menu and the other one the game itself. Should I write all the code in one document or just leave it like is right now? Thank you so much in advance. Regards, Daniel.
