Search the Community

Package Sizer Layout children game objects. Links Document Sample code Live demo Nested sizer : Create a list by two level sizers. Label A container with a icon, text, and background. Links Document Sample code Textbox A container with a icon, (typing and paging) text, and background. Links Document Sample code Live demo Textbox Dialog A container with a title, content, buttons and background. Links Document Sample code Live demo Yes/No dialog Single choice dialog Pop-up dialog Grid table A container with a grid table, slider, and scroller. Links Document Sample code Live demo Grid table Tabs A container with 4 groups of buttons around a center panel. Links Document Sample code Live demo Tabs-table

Hey All! I needed to display some dialog boxes in a recent game and the old 9-slice plugin wasn't ported to v3 yet so I wrote one (github repo). I have a live demo here and a gif of it in use follows. Would love to see this get some use outside of my projects so give it a spin. I'm pretty active on the discord and try to check in here weekly so feel free to ping if you have any questions! Happy hacking!

Shameless plug incoming ... I just created a new plugin for Phaser 3 - a Webfont Loader that doesn't rely on TypeKit font loader, nor does it require you to have the WOFF file - instead it injects a <link rel="stylesheet"> and uses FontFaceSet to initiate the load / be alerted of the load. This is something that will speed up (at least my) development time during game jams, as I can just copy and paste the Google webfont URL. You can get it from here: npm https://www.npmjs.com/package/phaser3-webfont-loader Github https://github.com/cloakedninjas/phaser3-webfont-loader

Hello! I'm not sure if this is the right place for such a request, but better than nothing! I'm developing pixi-live2d-display, a Live2D integration plugin that provides handy "Pixi style" APIs to display and control the Live2D models. It's still in active development for better reliability and more features. It can be a nice alternative of the existing Live2D plugin, pixi-live2d, which no longer seems to be maintained. It'll be a good opportunity for this plugin to be known by people if it can be approved and listed in Pixi's user plugins. I'll appreciate it!

Hi Everyone, I was working on a Phaser based website and as a part of the integration I needed to provide some objects interaction based on the song frequency data. To achieve this I needed to write a new Phaser plugin. This plugin allowed me to create a new extended type of Phaser.Sound object that provide real time sound data analyse. And now I want to share this plugin with all of you . Here you can view the demo http://zarkokaktus.byethost3.com/Phaser/sound_analyser/index.php You can GIT clone/download it from here: https://github.com/KaktusFlame/phaser-sound-analyser In the background, this object uses AnalyserNode from Web Audio API. This node is attached to Phaser main sound context. If Phaser doesn't use context and Web Audio API then you can set this object to provide fake data and still have the visualization effect . Here is some simple explanation for all four new extended objects you will have with this plugin: https://github.com/KaktusFlame/phaser-sound-analyser#about-objects-in-this-plugin In short, this objects are in the following relationship: We need to create Phaser.SoundAnalyse object so we can get sound analyse update on every game thick (only if sound is in play state)We need to have graphical representation of this sound analyse data, and for that we will use Phaser.BitmapDataSoundAnalyze. We need to add this texture to Phaser.SoundAnalyse so on every sound analyse update this texture will be auto updated. We need to set this texture to sprite object so we can make it visible on screenIf we want to have all in one visual representation of the sound, then we can create Phaser.SoundAnalyseSprite that will handle creation and linking of all other sound analyse objects for us This is a simple demo how you can use it: // create new Phaser game var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create }); // function called on game asset preload function preload() { // load SoundAnalyse plugin script file game.load.script('soundAnalysePlugin', 'js/plugin/SoundAnalyse/SoundAnalyse.js'); // load song file game.load.audio('song1', 'audio/All_Time_Low__Time_Bomb.mp3', true); } // function called after all assets are loaded function create() { // create plugin instance var soundAnalyse = game.plugins.add(new Phaser.Plugin.SoundAnalyse(game)); // create new Sprite sound analyse object var soundAnalyseSprite = soundAnalyse.add.soundAnalyseSprite( 20/*x*/, 200/*y*/, 530/*width*/, 200/*height*/, "song1"/*sound key*/, true/*auto play*/, this._onDecodeFinish/*decode finish callback*/, this/*callback context*/); // show frequency domain chart bars (this is only one of eight other visualizations) soundAnalyseSprite.showFrequencyDomainChartBars(true); }What do you thing about this plugin? Some of the ideas you can achieve with this plugin (not included): - You can create water surface that dance by the music played in your game. - You can make sprite object act or do staff at some sound frequency - You can make other type of visualization, bubbles that shrink and squeeze by the sound amplitude data for example - And many more

Hi guys! This is my new plugin to horizontal and vertical scrolling http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/ PD: nothing to do with Kinect, the old name haha Regards, Nicholls

Hi I am new to game development. I have an issue.. here is the screenshot of my game which I am developing. My screen is scrollable with phaser_kinetic scroller. When I scroll the sheets with numbers it should be masked from the white line and and disappear the part of group sprite which is crossing the line. How can I achieve that. I used graphics to mask. But the graphics also hides the background. I dont want background to be hidden.

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 @enpu I have a small request for the Spine plugin. In the previous version of Panda there used to be a property animationSpeed that could be used to alter the speed of the spine animation. I noticed that this prop is lacking in the current version of tne plugin. It was easy enough to add myself but since the plugin is not open source, I cannot create a pull request for you. Could you add the following code to the plugin? spine.js game.createClass('Spine', 'Container', { ... animationSpeed: 1, ... updateTransform: function() { this.state.update(game.delta * this.animationSpeed); ... } }) Thanx, Stephan

Hi @enpu, I just encountered en fixed a small bug in the p2 pulgin. Since it is not open source, I cannot create a pull request so I decided to post it here instead: p2.js line 13876: context.rect( -shape.width / 2 * body.world.ratio, -shape.height / 2 * body.world.ratio, shape.width * body.world.ratio * game.scale, shape.height * body.world.ratio * game.scale ); should be: context.rect( -shape.width / 2 * body.world.ratio * game.scale, -shape.height / 2 * body.world.ratio * game.scale, shape.width * body.world.ratio * game.scale, shape.height * body.world.ratio * game.scale ); Hope this is helpful. Stephan

This plugin will help you build paths for pathfollowers and path tweens. Draw and edit Lines, Bezier Curves, Splines and Ellipses at runtime and export them to Phaser. A useful tool for editing and building paths. Explore your scene while building paths. Draw your path in-game during runtime. Export path as JSON Data. Load them into Phaser and create awesome animations using pathfollowers! Maximum usage of Phaser API. More cool features will be added soon! Demo. Src & Docs NPM Submit an issue

Board Plugin for Phaser 3 solves all of your board related problems. You don't have to create a single board manually ever again. Create all your boards in one single line and don't worry, it never takes controls away from you. customize your boards as much as you need or use it in any case you see fit. Some of the scenarios it can be used in but not limited to are - match3, tic tac toe, memory games, and any others board related projects. Create a full-featured game in just a couple of line of code. Visit https://otorexia.github.io/BoardPlugin/ for more information. I need your support please buy this product so, I can continue to improve this product and able to do other projects similar to this (possibly in opensource format) - Support me. Also, get $10 off by visiting this link (only for first 10 buyers). Any kind of feedback is welcome. Thank You.

Here's a helper function I made to create each shader plugin with just a simple function call like this: createShaderPlugin(name, vertShader, fragShader, uniformDefaults); Then you can create each sprite that you want to be drawn with your custom shader like this: var sprite = createShaderPluginSprite(name, size, uniforms); Update: I started a GitHub repo for it here if you want to check it out. I also made this little CodePen to demonstrate the usage with some comments. The encapsulated code is based on the plugin example and on the worldTransform/vertices calculations that I boosted from PIXI.Sprite. I've tried to optimize and condense for the use case where the Sprite doesn't have any Texture to be filtered.

https://www.npmjs.com/package/phaser-plugin-debug-draw Demo

rexRoundRectangle Round-rectangle shape game object. Links Document Sample code minified source code Live demo Round rectangle

https://www.npmjs.com/package/phaser-plugin-game-scale — Demo

Hi guys, I'm new to Panda2 and I'm trying it out to see if it fit my requirements. My game will be UI intensive so I need few features that make my work a bit easier. One of these feature is the possibility to use Nine Patch for Button, Panel, etc. Something like this : https://phaser.io/news/2015/08/nine-patch-phaser-plugin Is it available for Panda2? If not how easy is to create custom control that allow me to have such behaviours? Are we able to set to a sprite a region of a texture?

rexGridAlign Align objects on quadrilateral or hexagon grid. Links Document Sample code minified source code Live demo Hexagon grid : Align objects on hexagon grid. (Hexagon shape) Isometric grid : Align objects on Isometric grid. (Rhombus shape)

rexGridTable Viewer of grid table, to manipulate game object of each visible cell. Links Document Sample code minified source code Live demo Simple dragging : Dragging to scroll table. Scroll table by slider bar : Dragging slider bar to scroll table. (Slider plugin) Scroll table by scroller : Dragging slider bar to scroll table. (Scroller plugin) Scroll table by scroller + slider : Dragging slider bar to scroll table. Horizontal grid table : Horizontal table. Varying cell height : Grid table with varying cell height.

rexDrag Drag game object. It wraps input events into a class, and have some extra features: - Drag on axis (horizontal, vertical, or both) - Try dragging object, see live demo. Links Document Sample code minified source code Live demo Create and drag object : When pointer down (touch start), an object will be created and dragging. (object was created after touched, therefore it won't fire 'dragstart', or 'drag' event from Phaser.Input) rexSlider Drag thumb on a slider bar. Links Document Sample code minified source code Live demo Slider bar : drag white thumb, or press left/right arrow key rexVirtualJoyStick Simulate cursor keys according to touch events. Links Document Sample code minified source code Live demo Virtual joystick : drag on gray circle rexScroller Drag content. Slow down when dragging released, pull back when out of bounds. Links Document Sample code minified source code Live demo Scroll content : dragging inside bitmap text content

rexSwirlPipeline Swirl post processing filter. Reference Links Document Sample code minified source code GLSL source Live demo Swirl : touch to swirl rexPixelationPipeline Pixelation post processing filter. Reference Links Document Sample code minified source code GLSL source Live demo Pixelation : touch to pixelate

Hi all, I have just released Phaser Manifest Loader for those using webpack. I've been using this code in production for a while now, it makes it super easy to load assets via a simple manifest. Check it out! https://github.com/mattcolman/phaser-manifest-loader Cheers, Matt.

rexContainerLite Control the position and angle of children game objects. It is inspired from Ziao/phaser3-interim-containers. Links Document Sample code minified source code Live demo Nested container -- Nested feature in official feature will be dropped in the future

I've published the first version of my grid-based physics plugin for Phaser 3 (a port and improvement from the Phaser 2 version). It makes it easy to create a game where the movement is restricted to tiles or a grid and comes with helpful built-in features such as a system for pushing objects or walking on one-direction tiles. I'm making the plugin to use it in a RPG I'm developing but it's suitable for everything from Sokoban-like games to Rouge-like. However, the development of the plugin will be focused to add features I need and fixing bugs that affect my game. Let me know if you use the plugin and feel that stuff is missing or if you run into issues. I won't be adding stuff just for the sake of the plugin unless there is a demand. 1. Testing a bridge and tiles will collidable borders. 2. Testing one-way collision (and I got stuck). 3. Turn-based mode with smooth animations. Multiple bodies getting pushed. DEMO http://metroid.niklasberg.se/P3GridPhysics/ (Use dat.gui to toggle turn-based mode, maximum number of bodies the player can push, velocity and more) Github: https://github.com/nkholski/phaser-grid-physics

https://github.com/samme/phaser-plugin-scene-watcher Shows scene order, status, and size of update/display lists. Also logs scene events (if enabled).