Jerorx Posted April 5, 2017 Share Posted April 5, 2017 I'm happy to present to you Phaser Quest, a top-down real-time multiplayer adventure made with Phaser and Socket.io. Explore the map, find better equipment, fight monsters and defeat the final boss, alone or with friends! It was for me a practice project, and is a reproduction of Mozilla's Browserquest. Hopefully the source code will interest you, as the project integrates of a lot of Phaser features together (such as tiled maps, text input, tweens, animations, sound, click handling, camera management, etc.), as well as pathfinding using Easystar.js. It is also an example of how a Phaser client can be made to interact with a Node.js server using Socket.io. On my website, I have written a few articles about some aspects of the game. They are mostly concerned with networking for the moment. If you'd like me to write an article explaining how I accomplished this or that in the development of this game, feel free to ask, I'm always happy to help. In addition, I'm interested in any feedback you might have, it's always valuable, especially with future multiplayer projects in mind. samme, spinnerbox, rblopes and 2 others 5 Link to comment Share on other sites More sharing options...
spinnerbox Posted April 5, 2017 Share Posted April 5, 2017 Browser quest? Link to comment Share on other sites More sharing options...
Jerorx Posted April 5, 2017 Author Share Posted April 5, 2017 @spinnerbox I have edited my first post to add a link to it. Link to comment Share on other sites More sharing options...
spinnerbox Posted April 5, 2017 Share Posted April 5, 2017 You reworked the GUI with Phaser, or it was made in Phaser by Mozzila themselves in the first place? Link to comment Share on other sites More sharing options...
Jerorx Posted April 5, 2017 Author Share Posted April 5, 2017 I remade it with Phaser indeed. For Browserquest, they did it from scratch. Link to comment Share on other sites More sharing options...
spinnerbox Posted April 5, 2017 Share Posted April 5, 2017 Beautiful Phaser exercise then. Thanks for sharing Jerorx 1 Link to comment Share on other sites More sharing options...
samme Posted April 5, 2017 Share Posted April 5, 2017 Is the Phaser dude in it? spinnerbox and quiphop 2 Link to comment Share on other sites More sharing options...
NicoA Posted April 5, 2017 Share Posted April 5, 2017 wow, great work!! it looks like it works really well!!. Cant make it work in my phone, when i try to put my name it zooms and i cant zoom out. Link to comment Share on other sites More sharing options...
Jerorx Posted April 5, 2017 Author Share Posted April 5, 2017 @samme It wasn't, but I just added it now because it's a nice idea @NicoA Yes, it's a strange behavior of the input plugin. To be honest I didn't put a lot of effort into the mobile aspect, because I considered it only at the end, and I should have thought more about it since the beginning (because it's not only a matter of scaling and a few lines of Phaser code, ideally the whole game interface has to adapt depending on the device size). It's a good lesson actually. Because of this I didn't really investigate this strange behavior yet. I may do it in the near future! samme 1 Link to comment Share on other sites More sharing options...
NicoA Posted April 5, 2017 Share Posted April 5, 2017 (edited) Quote @Jerorx Great! it you solve it please let me know that i have a similar problem with the same pluging Edited April 5, 2017 by NicoA Link to comment Share on other sites More sharing options...
ptdnet Posted April 6, 2017 Share Posted April 6, 2017 It's the same game, but with horrible controls and lag. Sorry. Link to comment Share on other sites More sharing options...
mattstyles Posted April 6, 2017 Share Posted April 6, 2017 9 hours ago, Jerorx said: Yes, it's a strange behavior of the input plugin. @Jerorx @NicoA Its not strange behaviour, its a browser feature for accessibility and user experience, although in your case it harms user experience. Looks like the input plugin you are using shoves an input element into the DOM, unfortunately its position -100, -100 with a width of 131 so the phone tries to zoom in to focus that element. Pretty sure it would zoom back out if you could unfocus the element (which is good behaviour generally when using input fields), but, your canvas element (which fills the screen when it does the zoom) captures all events so you can not unfocus the element nor 'flare' to zoom back out. Given that you've got a fake UI for the input field you could hack the created invisible input field to be full width at the same height as the UI, this way the phone will try to zoom but will want to capture the entire field which is the full width of the screen so will not zoom. Or, stick the form field in the correct place on screen and allow the native zoom/unzoom behaviour. A good rule of thumb (well, more than this, its a good rule to follow) is to let native browser actions/events occur so I'd probably favour the 2nd option there. Great work on the project @Jerorx, really enjoyed playing that game again! spinnerbox and Jerorx 2 Link to comment Share on other sites More sharing options...
Langerz82 Posted May 9, 2017 Share Posted May 9, 2017 I'm the co-developer of Maearth and we have always wanted to integrate with Phaser. Your code may be a good basis for extending on to create a new game for us. Many thanks Jerorx. Link to comment Share on other sites More sharing options...
Langerz82 Posted May 12, 2017 Share Posted May 12, 2017 Do you think you could add Keyboard support I tried to key support myself but its choppy and only moves square each key press. The following is my attempt at the Keyboard Movement but still the moving only occurs when the key is pressed,and lifted. https://tinyurl.com/ksm4hco Link to comment Share on other sites More sharing options...
Recommended Posts