Search the Community

Showing results for tags 'plugin'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 97 results

  1. I'm interested in the Particle Storm plugin, but I'll be updating my game to Phaser 3.0 shortly. WIll the plugin be updated for 3.0, or will the code work in 3.0?
  2. Phaser 3 Animated Tiles Plugin

    I've prepared a plugin in time for the release of Phaser 3 today: support for animated tiles. The plugin parses tile animation data configured in Tiled and then, well, animates layers (dynamic layers required). All you need is three lines of code; one for preloading the plugin, a second for installing the plugin and the third for initializing it for a map. Features: Animate tiles as configured and displayed in Tiled. Support for unlimited tile animations, layers, maps, and tilesets. Use the API to manipulate the rate (multiplier of the frame duration set in Tiled) globally or for a certain tile id or map. Animations adapt to the timeScale set by the Phaser 3 API. Add and remove animated tiles any time. API demo: Playable demo (question marks are animated tiles): Github repository: Suggestions are welcome and if you use the plugin, please tell!
  3. So i bought the Particle Storm Plugin to get more Particle effects and stuff, pretty awesome... but i'm still a newbie in terms of Particle Emitters and how to produce the best result with them. So many variables and options that by slightly changing them can change the result a lot. I'm trying to add a little smoke/dust trail behind my character when i start running. Sounds simple, huh? So i made a plain squared white 20x20 texture to use it as the particle asset. this.manager =; let dust = { image: 'dust', blendMode: 'NORMAL', lifespan: { min: 100, max: 200 }, scale: { min: 0.3, max: 2 }, vy: { value: { min: 0, max: 0.1 } }, vx: { value: { min: 0, max: 0.1 } }, rotation: { value: 0, delta: { min: -2.0, max: 2.0 } } }; this.manager.addData('dust', dust); this.emitter = this.manager.createEmitter(); this.emitter.addToWorld(); Then inside the update() function, i track my character's position, is not properly done, though... since it's quite offset. But is just to try it out first. this.emitter.emit('dust', this.x, this.y - 10, { total: 1, frequency: 600 }); The problems i'm encountering is that it feels like particles are going way too fast. I couldn't find a way to slower them down, tried using `frequency`, but emits soo many particles per second that is unrealistic for this specific scenario. I would like to emit for instance, 3 to 5 particles at once, make them rotate a little and change their size (scale) ... with ofc short lifespan otherwise trail will be huge. Another good idea (probably) would be if they kinda fadeOut while lifespan is about to finish. Any help is appreciated.
  4. Here is one beautiful chrome extension which allow you to stream your desktop full screeen (or browser fullscreen with f11 to your mobile. Expecially if you enable VR camera in desktop game in chrome browser and want to stream this to your mobile for your VR gear. And you don't need VR extra bloototh convroller because you can play your game with your keyboard+mouse of Desktop PC and get mirror of your desktop chrome to your mobile browser for your VR gear. Even your friends can watch your chat room with password you give them in URL. No extra coding just reuse chrome RTC extension. Mobile browser (chrome,firefox,opera) are receiver of your desktop PC chrome browser (game with VR camera). Greetings Ian
  5. Hi, I am trying to use the Arcade-Slopes plugin in Typescript, but I'm not sure how to do it. I added a ref to the .d.ts file in tsconfig.json: "files": [ "./src/app.ts", "./vendor/phaser.d.ts", "./vendor/phaser-arcade-slopes.d.ts" ] This is how I'm trying to load the plugin. // enable arcade slopes plgin; But when I try to convert the collision layer: // Convert the collision layer to work with Arcade Slopes, 'arcadeslopes'); I get the following errors: src/app.ts(71,26): error TS2339: Property 'convertTilemapLayer' does not exist on type 'ArcadeSlopes'. vendor/phaser-arcade-slopes.d.ts(61,5): error TS7010: 'resolve', which lacks return-type annotation, implicitly has an 'any' return type. vendor/phaser-arcade-slopes.d.ts(156,17): error TS2304: Cannot find name 'object'. vendor/phaser-arcade-slopes.d.ts(157,14): error TS2304: Cannot find name 'object'. vendor/phaser-arcade-slopes.d.ts(238,3): error TS7010: 'clear', which lacks return-type annotation, implicitly has an 'any' return type. It looks like the arcade slopes .d.ts file isn't compiling properly either. Has anyone managed to use Arcade Slopes successfully with Typescript? I'm seriously considering restarting with plain old JS to avoid this problems.
  6. Phaser Plugin: NavMesh Generation

    Update 27 Sept: v0.1.0 Released: I've published the plugin and is available on NPM: The SRC can be viewed on the GitHub repo: Summary (apologies for the long post) I've been working on this for a few weeks now, and thought I'd share the Work in Progress so far: I'm still working on various edge cases, bugs and performance R&D, but it's in a state worth demoing IMO & thought I'd share the progress with the forum, see if there's any interest in that sort of thing. It's a relatively simple plugin to use, where you give it the ref. of a Phaser.Tilemaplayer, a couple of options & it generates a Navigation Mesh for use later by your Sprites & Game Objects. This plugin for now has a very simple set of options; all that's passed to it includes: The Phaser.Tilemap (required) The Phaser.TilemapLayer that's acting as your 'collision' layer (required) Any collision indices that determine the impassable tiles (required) Any debug options you want so you can see the calculations How much you want to offset your Sprites from the calculated path What I call a 'midpoint' threshold - more on that in a minute Demo Videos: (NB: the 'pause' between the drawing of new tiles & the NavMesh update was intentional, so it didn't get run until onMouseUp - it's not performance lag - the NavMeshs are generating / updating in about 15 - 20ms ) This demos basic movement; the test Sprite is a little hard to make out, sorry! I draw some extra impassable tiles to show the NavMesh re-calculating new triangles: This shows how with narrow spaces, the NavMesh uses the 'midpoint' of the the polygon line segment, instead of trying to turn around corners Why do this? This all started with a larger project I'm working on: it's going to (hopefully!) involve large tilemaps, a large number of sprites and procedural generation. A messy combination. As a result, I've been looking into ways I could perform pathfinding around Tilemaps in Phaser, and the most popular choice seems to be the grid-based a*star plugins; while in the main it probably does the job for smaller tilemaps, I don't think they scale very well. One standard method of pathfinding used by other engines is something called Navigation (Nav) Meshes: basically, you calculate all the passable areas on your map and reduce it all to a small array of connected polygons, then figure out how to travel across those polygons. In my R&D, I did come across Mike Westhad's great Phaser NavMesh plugin that does this, but one limitation of it is that it expects the Developer to have manually drawn the NavMesh in the Tiled Editor. IMO, this didn't go far enough as it'd be great if a plugin could 'just' take any Phaser.TilemapLayer, inspect its passable areas and calculate a NavMesh on the fly. Assuming your game uses a larger, more complicated map, then in theory a NavMesh could be much more performance friendly than a giant A*Star grid. Because we're reducing all passable tiles into a smaller number of triangle space, there are fewer computations needed to get from point A to point B, as rather than (for instance) iterating across dozens, or even hundreds of grid tiles to find the shortest path, you're only iterating across a handful of polygons instead. Equally, if you do this at the load of your game level it should be a relatively small footprint of memory in your game. The Science Bit: How does this work? Well, the principle is actually quite 'simple' really. To give a rough breakdown of the process of calculation: Iterate across the tileLayer and merge all the impassable tiles into a series of unified polygons; this is done using what's known as 'Marching Squares Algorithm' - often used for finding the outlines of graphics objects. Recursively do this until we're confident we've found all possible impassable tile groups, and any groups within each other Extract all the corner points for these polygons, and perform 'Constrained Delaunay Triangulation' on these points. Basically, fill the area with connected triangles with these corner points. Loop over all these triangles, and find each others' neighbours. When we actually want to trace a path from A to B, find the triangle underneath the two points, then use A*Star to discover the shortest sequence of triangles to get to that destination. Use Funnel Algorithm to draw a path through those triangles, finding the corners around which to move. - This is where the 'midpoint threshold' comes into play, as some polygons might be too small to properly corner around: so instead we just take the midpoint of the funnel edge instead.
  7. Phaser Plugin PocketDebug

    PocketDebug displays fps and timing graphs inside A HTML DOM Text element for maximum conciseness. Source & Docs Demo NPM pocketplot is the platform independent version . It can be used if you want to add a graph to A plain website. Looking forward to receive feedback (please do), ideas, contributions, optimizations so that the plugin can be enhanced for Phaser
  8. Phaser Web Components UI Plugin

    tl;dr: An HTML based UI component system for phaser. MIT License, and links to pretty pictures and videos at the bottom. So I have spent the last week or so working on a new way to handle ui components with Phaser. Most of the UI plugins out there are created with Phaser which means Phaser not only has to handle the game but the UI as well. Meaning that Canvas/WebGL has to handle both the game and ui. With other games platforms versus web games this is not an issue because performance is expected so the systems typically are beefier. With web games the games can be played on anything from an older tablet to an Lenovo Thinkpad to a raspberry pi. So the systems that these games can be played on can be lacking in power. As a developer you want your game to utilize as much of the accelerated GPU as possible. Chrome and other web browsers tend to offload Canvas and WebGL rendering to the GPU. While some aspect of html nodes, most of which are minimally impactful as opposed to the Phaser created ui components. This is where this plugin comes into play. Introducing Phaser Web Components. A growing library of HTML based elements to handle all of your UI needs. You can use your standard HTML elements to create your UI as well as use the custom components that are packaged as well. One of the great features is that you can attach these components to Phaser game objects and they will move with the objects on screen and the disappear when the object no longer is on screen. Already there is a lot of power with this library and it is barely a week old. First off, its free. Not just free to use but you can customize the library how you see fit with the MIT license. You can create your own custom components and if you wish to give back you may even create a pull request and share your work with everyone else. Also, each component has minimal dependencies and some only depend on the base web component which means you can build the library for your game and cut out any fat with ease. Documentation is a thing that it is currently lacking. However, with each control I release I update the wiki page for that control with the base code to get that component up and running. At the moment it is light but expect the documentation to grow over time. I am also at the constant keeping things up to date with the release chart so that way people can see what to expect with things coming down the pipeline. Also if you wish to see work done on a component that doesnt have a release date yet, to see if it can be focused on, or if you have a new idea for a component then you can request that through the issues tab in github. With all that, if you wish to see it in action, below are some links to screen captures of **some** of the components that are already working. GitHub link Damage Indicator Name Plate and Stat Bars Marker Window Volume bar Video Player Avatar Icon Screen Splatter Component improperly loaded
  9. VirtualJoystick

    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: 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() {; } Thank you for your attention, I'm sorry, my English, because I'm in Brazil and my language is PT-BR
  10. Hi again. I make model as simple as possible. Just Basic Sphere and box colliders. I export it with ToB Exporter to get ModelFinish_Base.js. I include this in playground. I created complete playground. I include playground in attached .zip file. Because I can not save playground! Download attached file unzip and copy text from BabylonJS_ToB_Physics_Collision_Problem_Playground.js and paste it in playground and run it. I would like to know why .physicsImpostor doesn't work? Can anybody debug this and find a problem? Is there problem with babylonjs plugin, cannon or ToB exporter ???
  11. 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.
  12. Plugin for Procedural Dungeon Generation

    Hi Everyone, For Ludum Dare 38 I wrote a dungeon based game using procedurally generated level maps. Its something that I have wanted to play around with for a while, the code didn't work so great in the jam but it something I wanted to take a little further. So I have since split out the code used for the level generation. Given it a cleanup and turned it into a proper Phaser plugin that everyone is welcome to use in their own projects. Plugin code can be found on Github Or you can take a look at a demo of the plugin here Any feedback or comments welcome
  13. I see the plugin's a bit dormant ATM, I think, but perhaps you guys have had enough experience to answer what _seems_ like a simple question: Given I have a Phaser.Group() of Isometric.ISOSprite() acting as the 'floor' tile-map, is it possible to constrain the state's bounds based on this Group? The group will be dynamic so the number of sprites will change. I had initially thought simply going:, myGroup.y, myGroup.width, myGroup.height); would work, but of course those coordinates don't accurately reflect the 'true' dimensions of the isometric grid, given the plugin projects the coordinates. I tried a couple of guess/combinations, but I always got 'weird' bounds as a result. Any ideas? Hopefully the answer's simple!
  14. Hi, I'm writing a class that extends Phaser.Weapon and i want that the method update() keep running, like this: class MissileWeapon extends Phaser.Weapon { constructor(game: Phaser.Game){ super(game, game.plugins); } update(){ /*this not execute*/ } } But it not running. If i add this "hack": class MissileWeapon extends Phaser.Weapon { constructor(game: Phaser.Game){ super(game, game.plugins); /*the hack*/ = true; /*active plugin*/ this.hasUpdate = true; var test = game.plugins.add(Phaser.Weapon); /*Only for the game.plugins(PluginManager) start running*/ game.plugins.plugins.push(this); /*add my weapon in the PluginManager*/ } update(){ /*executing */ } } It seems that when extends of plugin Weapon, it not is added direct in the game.plugins (PluginManager), then the method update not executes. How could i make this without uses the "hack"? and i'm using Phaser version 2.6.2 thanks :-)
  15. Demo | Github | NPM pause, frame step restart camera effects, position, and lerp scaleMode fullScreen sound mute/volume slow motion …
  16. I have purchased the Phaser Virtual Joystick plug-in. It works nicely. In my create function, I have set 50% transparency for DPAD and ButtonA: this.stick = this.pad.addDPad(0, 0, 200, 'dpad'); this.stick.scale = 0.5; this.stick.alpha = 0.5; this.stick.alignBottomLeft(0); this.buttonA = this.pad.addButton(445, 380, 'dpad', 'button1-up', 'button1-down'); this.buttonA.scale = 0.75; this.buttonA.alpha = 0.5; this.buttonA.onDown.add(this.pressButtonA, this); It works well, only that after the game restarts both DPAD and ButtonA are no longer transparent. game.state.start('main'); Any idea? Am I missing something? Thank you! JJ
  17. Hello! I am curious to know what the forum's favourite plugins are. I would also want to know why you chose that plugin, what made you use it? Thank you for your time html5gamedevs, curious to see your answers.
  18. Grid physics plugin

    Phaser Grid Physics plugin adds support for grid/tile based movement and physics to Phaser. It's still in early stages and the code is kind of messy but I want to release it to check interest and get feedback. I plan to update this post whenever I do an update. DEMO: Github: UPDATE 2017-02-04 Now using brunch for building the plugin thanks to @samme Added possibility to block bodies from leaving tiles in certain directions. New issue: Tiles with internal blocks isn't compatible with current pathfinding implementation. Current features Any grid size (not necessarily squares, i.e. 8x16 is possible, and not restricted to sprite or tile sizes). Turn-based or real-time. Visual debugging Tile dimensions may differ from grid dimensions (but needs to be multiple of the grid dimensions, like 16x16 tiles on an 8x8 grid). Collision detection against tile layers Tile collisions on specified directions only Body size is not restricted to grid-size, and different body sizes may co-exist (but must be equal or a multiple of grid dimensions. The sprite graphics may differ from body size.) Path finding (easystar.js dependency) Moveable objects (can be chained, i.e. the player push one crate against another crate that will also move). Mass (and strength that limit total mass that can be pushed by the power of one sprite) Velocity, ("struggle" property that can slow down a body based on mass pushed) Populated properties like isMoving.x (boolean) or (boolean). Planned features include conjoined bodies, collision callbacks, movement tweaks and other stuff.
  19. First plugin: phaser-barchart

    Okay, I recently finished my first Phaser game - an idle game (it's currently on Newgrounds). While I was coding, I realized that I needed to show the player how well they were doing, namely, the amount of money they were making every day for the past several days. Text was too cumbersome, so I decided to visualize the numbers. Since doesn't seem to have a graphing plugin, I ended up making my own, largely with the "Graphics" library. The code, documentation, screenshots, and tutorial are here: This game uses the plugin: (press the "Statistics" button on the main menu to see it). Below is a screenshot of five different bar graphs on the same page. For more info on this plugin, please visit the GitHub repo for the README file.
  20. Hey all, So I recently switched my entire game over to Phaser Isometric by @lewster32 and now I keep running into an issue with collision. With just spawning a sprite in and not chaning any of its body properties, collision happens when the TOP of my player's body box reaches the TOP of the sprite's body box. This is a problem because it allows me to just walk through the sprite diagonally, which is not what I want. In fact, what I want is for collision to happen when the BOTTOM of the body boxes touch. (Sidenote: when I say body box I'm referring to the the 3d body shown through a body debug). Here is an example of how it works with no changes made to the body of either sprite. This is collision happening with no modifications: image - side note I am moving up and to the left in this picture, not down and to the left. This is after some changes to the body, the same thing happens too but it more closely represents what I *want* to happen, except it's still happening only with the top of the player sprite and tree sprite. image 2 Similarly, when I go to the top right side of the tree and move down into it, my body will go through the body box until the top of the body box hits the tree's box. When I mess with the Z values it all breaks and no collision will happen either. On top of that, changing the sprites anchors PAST (.5, .49999) also breaks something. Collision will happen at an anchor of (.5, .4999) but not at (.5, .5), it's very strange. Edit: Also, if i set the anchor to greater than (.5, .5) AFTER I enable isoPhysics on the body, the sprite's position gets moved thousands away and sometimes into the negative's. Here is my code to spawn the sprite and player. There is much more that goes into spawning the sprites, but this is anything that could even be related to the issue at hand. player1 = game.add.isoSprite(1000, 1000, 0, 'person'); game.physics.isoArcade.enable(player1); game.physics.isoArcade.collide(player1, itemGroup, null, null, this); createSprite = game.add.isoSprite(1250, 1250, 0, itemGet(chunks.chunks[i][slot]), null, itemGroup); //the anchor and body.setSize code here draws what you see in image 2. With these lines commented out, it outputs image 1. createSprite.anchor.setTo(.5, .49); game.physics.isoArcade.enable(createSprite); createSprite.body.setSize(40, 40, 0, 27, 27); createSprite.body.immovable = true; Any help is GREATLY appreciated. Ive been trying to fix this for a few days now, nothing I do works.
  21. Phaser Manifest Loader

    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! Cheers, Matt.
  22. Using of PIXI's shaders outside framework

    Hi. I'm working on PIXI plugin for Neutrino Particles ( Because JS is not my favorite language (it's C++ one), it is not straightforward for me to understand and use some JS constructions. In particular, I didn't get how modules of PIXI are connected into one file and how they include features of each other. So, I see how shaders are created inside the framework, but I can't create them outside pixi.js framework. Is it possible to use such features, like shaders and VAO outside? P.S. Currently, the plugin works pretty good. I still need to resolve some troubles with saving/restoring gl state, but the rest is fine (not perfect). I made rendering with my own shaders and vertex buffers, but I thinks it would be much better to use PIXI's features for that. Canvas works fine - it was much easier to get up. You can find sources of the plugin and samples for PIXI here: The sources are work in progress and are in separate "PIXI" branch until finished. Neutrino Particles would be a great addition to PIXI features. You can check live JS gallery and a couple of latest video tutorials. Thanks.
  23. Plugin Boiler plate

    I have a plugin system that I have made for making the multiple plugins I have been writing and it essentially is a simple node.js project using gulp and a few other modules. Wondered if anyone would be interested in me packaging it up and putting it out there for others?
  24. dragon bones phaser plugin

    I've been working on this in free time on the side. Figured I would share so anyone else working on something similar might benefit from it. It at least works to do some stuff, but it doesn't do mesh or switch skins yet.
  25. My Phaser Plugins

    This is a list of plugins I have done and going to do in no particular order. Help support me in making plugins. Dialog Manager: Dialog system that pulls scripts of dialog based on scripts. Inventory Manager: Complete inventory system that manages multiple inventories. Locale Manager: System for handling multiple locales. "Mode7": Progress, History, Wiki. My attempt at bringing more depth to than your run of the mill perspectives. Projectile Weapons: Various types of projectile weapons. Registry Manager: Simple registry to handle the data for a game. Handles both LocalStorage, Cookies and RESTful API. Selection Manager: Unit selection using html/css/js. To be updated. Sprite Generator: Generate sprites via a back end, as well as saving them via the Registry Plugin via Base64 and cache. Tilemap Generator: Generates a tilemap based on perlin noise. These are ones that I plan to develop later on after I get the others stripped out. Achievement Manager: TBD Battle Manager: Turnbase, or Realtime battle system that handles the flow of combat. Character Manager: Handles various styles of games: Platformer, Topdown, etc, and various types of entities PC, NPC, Vehicles, etc and provides reusable interactions: directional movement, jumping, attacking, etc. InApp Purchases Manager: TBD Notification Manager: HTML/CSS notification system. Quest Manager: TBD Save Manager: Handles saving/loading/deleting game states with using the Registry plugin. Social Media Manager: TBD