Leaderboard

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

Hello, I'm happy to announce that the node based PBR Composer is on the road. What is PBR Composer ? In short, PBR Composer helps you design and visualize a PBR Material in an efficient way. Parameterizing takes place by dragging and connecting specific nodes from a palette (typically textures, colors and uv-coordinates) to the output node, which represents the PBR Material. A preview panel lets you see all changes in realtime and the corresponding js-sourcecode will be updated as well. The resulting graph can be downloaded in JSON format for later use. Images can be inserted via preview fileselect dialog and/or Drag&Drop, in latter case the images will be transformed to embedded data-urls so the javascript functions can be reused without dependencies. Different meshes and environment-maps are available to see the material under different geometry and reflective light conditions. Motivation for PBR Composer: Due to the complexity of the PBR material (soo many combinations with soo much amazing effects) there is a need of having realtime feedback reflecting the changing parameters. Other than some editor already out using a bunch of parameters in confusing properties panels, nodes lets you to concentrate only on the parameters you need giving a nice overview in form of a graph. Nodes can also be shared and avoids therfore redundancy in the sourcecode. The goal is/was to make the user interface as efficient as possible. The idea for realizing the PBR Composer was inspired from Shader Editor. Technical details: PBR Composer is a web application based on dat.gui, w2ui, litegraph.js and of course on BABYLON.js TODO: At the moment, PBR Composer is customized for PBR-Glossy materials. The current activity is realizing a function for switching between Glossy and Metallic paradigms. Any questions? Let me know... PS: PBR Composer is still in alpha stage but will be deployed in beta stage soon Here it is te demo ...

This way works : https://www.babylonjs-playground.com/#XCPP9Y#178 As children[0] returns the contained textControl. Might be easier if textControl were exposed through a text public property on the Button object ?

@Sebavan I've updated MainLime.hx, lime.audio.AudioSource is now lime.media.AudioSource but its not needed anyway... Have in mind though that currently you won't be able to see anything if you target windows because webgl2 api is not available yet. There has been some progress there, you can see here http://community.openfl.org/t/native-opengl-framebuffer-multiple-render-targets-support-possible-gl-drawbuffers-not-supported/9408/4 (I guess WebGL2/GLES3 API will be available on all platforms in next Lime release) You can target windows by using WebGL1 api if you change WebGL2Context with WebGLContext here https://github.com/vujadin/BabylonHx/blob/master/src/MainLime.hx#L49 but many things won't work as I'm focused mainly on webgl2 right now. But you should be able to target android or ios with WebGL2Context I think

So glad I bought the "bugs fixed within 24 hours" service plan. Fix confirmed, thanks!

Yes, as long as you disable automatic rendering of the text objects I think the sprites will batch on their own.

Also you could leave the text as child of the sprite with renderable false for just the text, then let the sprites render normally. That way you only have to manually render the texts, not the sprites, and the sprites can utilize batching. That's prob easier way to do it without breaking batching and with text still child of sprite, I think...

Also note that renderDisplayObject() begins and ends a new batch each time it's called (for the WebGL version) so the sprites wont get batched and you'll have one draw call per sprite... OTOH if you use a container for all of the sprites and a container for all of the texts, all the sprites will render first with batching then all the texts will render. Since you have lots of them you might want to do this for faster WebGL rendering... EDIT: Note in this case you can just let renderable default to true like usual...

Metalliness is on the way...

Should be the extra rotation required to align the two arms (height offset): about 15 degrees ~= 0.25 rad---> you can check this with Phaser.Math.angleBetweenPoints(lower_arm_pos,this.upper_arm) If you want them to meet exactly use that result:

Hello that's a constraint of the Shadow only material, it will always take the first light affecting the mesh: https://www.babylonjs-playground.com/#1KF7V1#2 So just invert declaration order of lights. I will add a light property to the shadowonly mat to let you define which light to use

Hey! you were close but I would suggest using a rendertargettexture for that job: https://www.babylonjs-playground.com/#TX31SD#14 You could think about adding a custom camera to keep your blue circle stable: https://www.babylonjs-playground.com/#TX31SD#15

The problem of exposing text is that you can have a button with only an image

A couple of observations before I try to help answer your question. Must agree with @JCPalmer difficult to see where issue is with no proper image. There are times when I cannot find what I need in the documentation but have always found the forum very helpful if I ask specific questions. For example asking "How do I move an arcRotate camera to a specific position and how do I change its angle" would have elicited a reply I am sure. I find this a good philosophy. Now to try and help with an answer. The apparent movement of one object behind another is the parallax effect. If you have your objects in a circle and the camera is sweeping around the circle then as you are more or less looking in the same relative direction from center to circumference parallax is less noticeable. Compare this PG where camera slowly rotates around an inner circle https://playground.babylonjs.com/#RF4DUZ#2 with this one where the people are standing in rows and you move the camera left and right using the left and right arrow keys. (up and down camera keys move forward and backward). Remember to click on display area before using keys. https://playground.babylonjs.com/#RF4DUZ#3 IMHO arranging people around a circle will not give the effect you want.

Still not working. Just use the skull: https://www.babylonjs-playground.com/#H30ZQI#4

Not a problem, M-doggy. Doing that is a BREEZE with BJS... and in ANY of about 3-4 different ways. If you wanted, you and I could get the prototype for this done.... in about 10 minutes. Ready? It might be coolest... to make a huge circle of boxes (flat panels). Don't bother with sprites... they're boring. (just kidding) Then yeah, rotate the circle of panels past the camera, or pan the camera around the circle of panels. FUN little experiments galore! And, it need-not be a circle. It can easily be a straight line, too. No matter circle or straight line, it might be wise to parent all the panels/sprites to a central parent. Then moving ALL the panels at the same time... will be easier. Just move the parent, and all the kids come-along for the ride.

@samid737 This way looks really better. I'll try to improve it too. Thank you very much for your help!!

Whoops. This is what I get for writing the post at two am. Added to the post as well as here https://github.com/phreaknation/phaserwebcomponents

Good to know, that would defeat the purpose of this whole optimization I will most likely go with your second approach, just make a pass in the render function to render text separately. I'm guessing that Phaser.Text objects are simply fonts being baked into separate textures? Wouldn't it be awesome to have Phaser create an atlas from all the text objects.

Your model is not just one mesh but several. You will need to load a scene (with Load() or Append()) and not a mesh (with ImportMesh()). Then list each object in your scene to apply a scaling on them.

Try http://www.babylonjs-playground.com/#1QJUDF#15

THANK you! That DOES help! There's one thing that I need to be able to do. And that's call the object of choice in the renderloop so I can update it in the renderloop as well! After that, I will mark it as solved! Thanks again! <3

Hope help you : http://www.babylonjs-playground.com/#1QJUDF#4

Ok found and fixed. Will be available with next nightly Thanks for reporting it

Thank you so much for the reply! Let me elaborate: I have been using directional lights to create shadows; the problem is that the mere presence of the hemilight is completely messing up the shadow-only material. When the hemi is there, shadows don't show up. The presence of the hemi is not affecting the shadow generator's ability to create shadows, however, because shadows still occur on the regular materials. Cute scene, nevertheless!

I'm currently working with lots of groups, and I really miss a kill() for groups. Not killAll(), I mean kill(). Since groups have alive, exists and visible properties, and that applies to children, it would be just natural to be able to kill groups as well. Of course... I'm still a newbie with Phaser. I apologize if there's already something like it, but surfing the docs there appears to be nothing.

You can set obj.renderable = false during update, and then during render: obj.renderable = true; game.renderer.renderDisplayObject(obj);

Bump maps rely on a webgl extension (standard derivatives) to compute tangents. you can check if the extension is supported with engine.getCaps().standardDerivatives This extension is pretty well supported: https://webglstats.com/webgl/extension/OES_standard_derivatives

Big update, I'm excited. Two new display modes, domMeter and domText, skip Phaser rendering entirely. The graph and meter displays now show the actual updateLogic and updateRender durations (ms). The text displays now show Phaser's renderer type and WebGL draw count. NPM: phaser-plugin-advanced-timing GitHub: samme/phaser-plugin-advanced-timing

That is how the algorithm currently works, it will start at one point and draw one closed surface.. Completely forgot that you can also use this for polygon building, Phaser has A built in addPolygon function: Just to demonstrate, its not really stable (collisions work in v2.8.1 +), if you try to eat the left ear and then right then 5/10 times it will fail to eat.... Probably some fault in the way I set up the bitmapData.. Maybe you can work something out. I'l see if I can improve the example..

Check the html5gameengine.com website for an overview on the most popular ones, and jsbreakouts.org if you want to compare the source code of some of them when building an example 2D Breakout game.

HMR and time travel debugging would be nice during development

Support for: building with Webpacktypechecking with Flow (flowtype.org)hot reloading of graphics and code It would be so great to edit the graphics or js file of a game entity, hit save, and see it change its behavior in the running game without restarting. I don't think there's an obvious solution for how to do hot reloading -- but some likely candidates are fb-flo (a chrome extension) and webpack's experimental "hot module replacement" feature. They're both rough around the edges at the moment, might be ready before Phaser 3 rolls out.

Today I was trying to figure out how i can record the last 3 seconds of my game and show the user how BAD he died. Maybe a new Class in Phaser 3 to record the game and play it?

Personally I'd like a move towards a more entity/component system for game objects, so everything isn't a sprite with loads of extra properties and methods rammed onto it, which always feels messy to me, I'd much prefer a lightweight generic entity with a nice encapsulate sprite property.