Popular Content

Showing content with the highest reputation on 07/02/18 in all areas

  1. 2 points
    Hello ! As I'm currently playing with some unsigned integer textures, I would love to see BabylonJS support them. I'll do a PR as soon as possible, adding some (all ?) constants about internal formats (for instance Engine.TEXTUREFORMAT_RGBA_INTEGER) and texture types (for instance Engine.TEXTURETYPE_UNSIGNED_SHORT), and updating the function to retrieve the internal sized format in order to be able to return new values as gl.RGBA16UI. Does it seem ok for you ? Moreover, we're still using Engine.TEXTURETYPE_UNSIGNED_INT to refer to both gl.UNSIGNED_INT (only available for depth textures in WebGL 1) and gl.UNSIGNED_BYTE texture types. I think we need to do a breaking change because gl.UNSIGNED_INT is now a valid texture type for unsigned integer textures in WebGL2 like RGBA32UI textures. Valid combinations of internal format, type and internal size format are listed here in table 3.2. Color-renderable and texture-filterable formats are listed here in table 3.13. This info is also gathered here. And this is a bit less exhaustive in WebGL 2 Specs. [EDIT] With WebGL2, specify the internal sized format will be necessary as some combinations of format and type don't lead to a unique internal sized format. For this purpose, we'll need to add internal sized formats as constants in BABYLON.Engine and we won't lean on _getRGBABufferInternalSizedFormat() function anymore. However, only a few combinations fail to give a unique result: - RGBA format + UNSIGNED_BYTE type - RGBA format + UNSIGNED_INT_2_10_10_10_REV type - RGBA format + FLOAT type - RGB format + UNSIGNED_BYTE type - RGB format + HALF_FLOAT type - RGB format + FLOAT type - RG format + FLOAT type - RED format + FLOAT type So we could just ignore them and return a default value in these cases, for now. [EDIT 2] Current type constants: private static _TEXTURETYPE_UNSIGNED_INT = 0; private static _TEXTURETYPE_FLOAT = 1; private static _TEXTURETYPE_HALF_FLOAT = 2; Suggested new type constants: private static _TEXTURETYPE_BYTE = 0; private static _TEXTURETYPE_UNSIGNED_BYTE = 1; private static _TEXTURETYPE_SHORT = 2; private static _TEXTURETYPE_UNSIGNED_SHORT = 3; private static _TEXTURETYPE_INT = 4; private static _TEXTURETYPE_UNSIGNED_INT = 5; private static _TEXTURETYPE_FLOAT = 6; private static _TEXTURETYPE_HALF_FLOAT = 7; private static _TEXTURETYPE_UNSIGNED_SHORT_4_4_4_4 = 8; private static _TEXTURETYPE_UNSIGNED_SHORT_5_5_5_1 = 9; private static _TEXTURETYPE_UNSIGNED_SHORT_5_6_5 = 10; private static _TEXTURETYPE_UNSIGNED_INT_2_10_10_10_REV = 11; private static _TEXTURETYPE_UNSIGNED_INT_24_8 = 12; private static _TEXTURETYPE_UNSIGNED_INT_10F_11F_11F_REV = 13; private static _TEXTURETYPE_UNSIGNED_INT_5_9_9_9_REV = 14; private static _TEXTURETYPE_FLOAT_32_UNSIGNED_INT_24_8_REV = 15; NOTE 1: As every user should use the public constants and not directly the private numbers the constants are bound to, we should be allowed to modify the order (FLOAT will be defined by 6 instead of 1 for instance). If you do not want to change the order of the three first constants already defined, just say it. NOTE 2: UNSIGNED_INT will not refer to UNSIGNED_BYTE anymore. Breaking change. [EDIT 3] Current format constants: private static _TEXTUREFORMAT_ALPHA = 0; private static _TEXTUREFORMAT_LUMINANCE = 1; private static _TEXTUREFORMAT_LUMINANCE_ALPHA = 2; private static _TEXTUREFORMAT_RGB = 4; private static _TEXTUREFORMAT_RGBA = 5; private static _TEXTUREFORMAT_R = 6; private static _TEXTUREFORMAT_RG = 7; NOTE 1: No 3 ? Did I miss something ? NOTE 2 : I personally guess TEXTUREFORMAT_R is not a good idea for 3 reasons: - It's confusing for people already used to WebGL who know it's gl.RED and not gl.R - It doesn't seem really instructive for beginners who will think R is the good naming - Beginners generally don't play with texture formats and types That's why I suggest to create and use TEXTUREFORMAT_RED in the future. And keep TEXTUREFORMAT_R for retrocompatibility. But once again, it's only a suggestion. Suggested new format constants: private static _TEXTUREFORMAT_ALPHA = 0; private static _TEXTUREFORMAT_LUMINANCE = 1; private static _TEXTUREFORMAT_LUMINANCE_ALPHA = 2; private static _TEXTUREFORMAT_RED = 3; private static _TEXTUREFORMAT_R = 3; private static _TEXTUREFORMAT_RG = 4; private static _TEXTUREFORMAT_RGB = 5; private static _TEXTUREFORMAT_RGBA = 6; private static _TEXTUREFORMAT_RED_INTEGER = 7; private static _TEXTUREFORMAT_R_INTEGER = 7; private static _TEXTUREFORMAT_RG_INTEGER = 8; private static _TEXTUREFORMAT_RGB_INTEGER = 9; private static _TEXTUREFORMAT_RGBA_INTEGER = 10; NOTE 1: Once again, we should be allowed to change the order of the first constants as nobody should use the private numbers directly.
  2. 2 points
    Is the doc not enough precise for your needs? http://doc.babylonjs.com/how_to/how_to_use_assetsmanager And about your example, if you use a 3D modeler to export your .babylon file, the simpliest way is to directly apply your textures on your materials, they will be loaded by default.
  3. 1 point
    Tom Atom

    [Phaser] Soccer Champ

    Hi, Soccer Champ is skill based one-button game with dogs playing cards ... football! Just click mouse when ball is on crosshair and try to get as high score as possible in limited time. You can play it here: https://play.famobi.com/soccer-champ-2018
  4. 1 point
    Just to add my two cents. Sometimes keeping too much backward compatibility lead to awful paterns, ugly code and less and less optimised libs... I think we should avoid BJS to become an IE kind of mess 😋 Breaking changes are not convenient for users, but this is exactly what SEMVER is for. This is the price to pay to keep a strong tool over time. We sometimes have to dare to take some painful decisions to ensure powerfull and long life to the lib. Users can understand, accept and adapt. It is for their final good. "Simple, yet powerfull" does not mean "so simple you never have to adapt", it means "to use it you won't have to do lots of complicated coding weirdness". And "powerfull" means true direct power, not a degraded power due to twisted backward compatibility. My opinion 😉
  5. 1 point
    Oh my god! Updating the version worked! Thank you so much, the sprite is now moving happily across the screen. However, the sprite is not animated. It remains of frame 0 as it moves. (And yes, I fixed those names to be consistent in the class) I'm gonna keep working on figuring out why the sprite doesn't animate, it's probably just some dumb bug. But any insight you could give might help.
  6. 1 point

    [Phaser] Dungeon Fury

    Great mechanics. Really smooth play and well though out puzzles. Not sure if there is any way to make the character stand out more. It's fine how it is, but would be even better if he somehow stood out against the background even more.
  7. 1 point
    @V!nc3r You beat me to it! I guess I don't need to build a PG scene now.😀 But perhaps this code snippet will provide an example just loading images,,, or whatever you wish. @Temechon helped me on this forum 3 years ago now... he helped me allot with managing assets and GUI elements using his bGUI.js extension.🙂 DB
  8. 1 point
    LALANNE Loïc-Pierre

    3ds Max bones export

    I found an other solution to solve this problem. In the Skin modifier, the biped Footsteps bone make fail the skeleton export. Be sure that you have no vertex influence with this bone and remove it in your Skin modifier.
  9. 1 point

    Perplexus Level 46

    Level 47
  10. 1 point
    Thank you Nasimi I'll try it.
  11. 1 point
    hi @hit2501 i have one solution https://www.babylonjs-playground.com/#UXCB15#45 step 1 make png and select your selected face on this and cut it make custom shader and read texture 2 ways diffuseColor = texture2D(mainTexture,vDiffuseUV).rgb; // main texture float specialFart = texture2D(colorpatern,vDiffuseUV).a; // special face condition vec3 def2 = texture2D(mainTexture,vDiffuseUV*20.).rgb; // read new texture by scale 20 and in final mix them diffuseColor = diffuseColor*(specialFart)+def2*(1.-specialFart) ;
  12. 1 point
    You can set the Pivot Point in BabylonJS with the pivot matrix, but there are two methods, so good to know the difference: mesh.setPivotMatrix(pivotMatrix) mesh.setPreTransformMatrix(preTransformMatrix) Otherwise maybe you can export your model and we can work together on a Playground. Here I'm just changing scaling and it is making the mesh scale the same as your video with a blender origin: https://www.babylonjs-playground.com/#AVXVIQ#2
  13. 1 point

    Error for Specular Aliasing PG

    @Deltakoshcan confirm that it works now
  14. 1 point

    Set canvas Orgin to center

    Also see cameras.main.setBounds(…) [33] in http://labs.phaser.io/edit.html?src=src/camera/bounds at zero.js.
  15. 1 point
    billboardMode? Added plane.billboardMode = BABYLON.Mesh.BILLBOARDMODE_ALL; line 98 https://www.babylonjs-playground.com/#HH1U5#81
  16. 1 point
    http://labs.phaser.io/edit.html?src=src/plugins/custom game object.js
  17. 1 point
    Hi hit, good to see you again. I can TRY to answer this... probably wrong... but I will tell some things. Let's playground-up and do some thinkin'. https://www.babylonjs-playground.com/#2GXQ13#11 Ok, that's all the further I'M going. The rest... scares me. FaceUV's. Phew. http://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors#polyhedra http://doc.babylonjs.com/playground/?code=CreatePolyhedron Flat. Flat is important... which is one parameter of the possible options of a CreatePolyhedron() call, I think. Look at console. After convert-to-flat, our dodec has many more verts. I THINK... a flat-shaded mesh has THREE available UV's at EACH corner/vert-position. This is because their are actually 3 verts at each corner-point, on a flat-shaded mesh. And that... is what YOU need, I believe. You want to affect the texture on ONE face of the dodec, but not affect other faces. Without flat-shaded... adjusting the UV at ONE vert-point... would affect the texture of all faces that intersected at that vert-point. You just want to affect one face, so you need a "private uv", right? heh. No affecting the neighbors. Understand the difference between faceUVs adjusting scale/size of a face texture AT CREATION TIME, versus adjusting it later, "live". I think one way is easy, the other way, not so easy. Let's ping @jerome, just because I know he LOVES being pinged. That guy drives faceUV's amazingly well. He sort-of invented them for BJS, I think.
  18. 1 point

    tilesprite pixelated

    Yes, pixelArt: true is the one that actually solves this one.
  19. 1 point
    The Leftover

    Real-time 3D flight display

    Last week, I discovered that real-time aircraft flight data is available through an open API. Two, in fact. Already having a city, I decided show overflights. I put in a five-minute delay to permit me to smooth the data but this is almost real-time. Video shows FedeX coming into SFO over San Francisco. This is not very zoomy but it feels signficant. I am not entirely sure what to do with it. http://www.brianbutton.com/babylon/MonoPlane.mp4 Airplane model was built out of cardboard, dowels, plywood and rubber bands. https://www.babylonjs-playground.com/#H3Z6J1#7
  20. 1 point
    If you do console.log(this) from a scene it should identify the classes, which will help.
  21. 1 point
    When we want to go find the documentation for Phaser3 classes, how do we know where to look? For example: this.physics.add.collider(levelData.dynDoors, glPlayer, door_enter); A namespace? You might think that the "Phaser.Physics" namespace was a good place to look (once selecting which graphics engine you're using - Arcade in my case), but, there's no method called "Add" there. [http://localhost/docs/Phaser.Physics.Arcade.html]. A class? So the next thing to try might be to find the class for Phaser.Physics (doesn't exist), so maybe it is Phaser.Physics.Arcade.something . I could guess that it is Phaser.Physics.Arcade.Collider (possibly add.collider is documented in Collider.Add, or something...). There isn't a ".add" in there, but the documentation page does open with a "new Collider(....)" description. So perhaps physics.add.collider invokes a new collider - makes sense! But, the description for new Collider doesn't match the code. Code: levelData.layer = levelData.tilemap.createDynamicLayer(0, levelData.tileset, 0, 0); this.physics.add.collider(glPlayer.body, levelData.layer); this.physics.add.collider(dynCreatures, levelData.layer); this.physics.add.collider(levelData.dynDoors, levelData.layer); this.physics.add.collider(dynBoulders, levelData.layer); As in, add.collider accepts two parameters, but the "new Colldier" description has a list of 7 mandatory parameters. From http://localhost/docs/Phaser.Physics.Arcade.Collider.html. Phaser.Physics.Arcade.Collider [description] new Collider(world, overlapOnly, object1, object2, collideCallback, processCallback, callbackContext) I've tried adding colliderCallback and overlapOnly parameters, but can't get them to work - probably because I haven't found the correct bit of documentation for physics.add.collider. This approach (of looking in Namespaces, Classes, Events, for documentation to match Examples and existing code is very often long-winded and I think my basic method must be wrong. I know the documentation is behind the development, but any ideas?
  22. 1 point
    ArcadePhysics#add → Arcade.Factory#collider
  23. 1 point

    2D text in world space.

    *nod* Yeah, when you say "arbitrary sized text"... do you mean both text-length and font-size/family? ScaleToFit-like things get SOME features, but... I suppose a new container/rect is needed... an overflowContainer. The https://www.babylonjs-playground.com/#08KEYA#32 panel is pretty close to accomplishing that. I think idealHeight could get involved here, too. Not sure, but I have seen that property name pop-up here and there. We can read the docs. Let's say you have a fixed-size rectangle that you want to make ALL your text fit-into. It never stretches, so it can be counted-on to behave predictably... when positioned among other GUI controls (usually done by putting nearby/adjacent controls into vertical/horizontal stackpanels... for proper share-the-space considerations.) Keep in mind that stackpanels can contain many different TYPES of controls, including OTHER stackpanels or containers holding stackpanels, ... all in the same stackpanel. It's an untamed frontier! Now, how do we power-up that rectangle/container control... to make it overflow-smart? Good question/challenge! I love it! First thing would be "sensing" an overflow condition... and let's assume we are ONLY talking about vertical overflow. textWrapping will take care of horizontal overflow. Once you have that... anything is possible. First thing (upon sensing overflow) might be to activate a vertical slider along the side of the rect. Ideally, keep the fixed-size rect the same width... after adding the slider. So you add the slider to the inside-area of the rect.... and re-textwrap (reflow the text). But we have vertically-overflowed, so... each line in text._lines array... might need to be put into a textBlock of its own, and added to a stackpanel. Suddenly, your simple rect... becomes a one-textline-per-stackpanel-child... "manager". If 100 lines of text got put into this rect... the rect senses it and becomes smart enough to change itself into a vertical-slider-driven stackpanel manager. It checks the height of each textBlock line, and knows how many is the maximum it can display in its "view area". In other words, you can't make it screw-up, no matter the amount of text, and no matter the font-size (within reason). That would be cool, huh? And then ideally, if the 100-lines-of-text is removed, and a little one-word line of text is displayed instead, the smart-rect turns back into a simple rect... with no stackpanel child... becoming "normal" again. Custom overflow handling. It might be fun just to try to find a good "sensor". Keep feeding long text into a short-height rect, and use the renderLoop to "listen"-to (monitor) various properties on the rect control that surrounds it. See if you can somehow "see", programmatically... when the height of the textblock exceeds the (ideal?-) height of the rect/container. See if you can sense overflow. And if you or another forum user DOES do these tests.... please share, eh? I'm very interested in learning-about and helping dev an overflow-sensing rect/container. "measurement" stuff is found on rects and their root containers and superClasses. These measurements are sometimes/often/always established at CREATION-time, but are not necessarily live-updated, and may need control._markAsDirty() calls to get "reflows". And these are not HTML-like reflows... so... expect the unexpected. Even after markAssDirty() [sic] calls, these measurements might not change. But they might. One interesting test... would be to keep changing font sizes, so the textWrapping has to keep re-wrapping, and thus the textblock height measurement is changing all the time. Try to get a flag active... rect.isOverflowed true or false. Perhaps... create a custom observer/notifyListeners system... (see observer docs) around your new sensor. Perhaps Arte's #32 scrolling stackpanel would be a good playground to strip-down, and convert into the "auto-sensing, overflowed-by-text, container-testing playground", eh? It already has a working vertical slider with active mousewheel... to turn on/off. Arte's mousewheel works ANYWHERE on the screen, but I think it would be cool if the mousewheel scroller ONLY worked when mouse pointer is hovering the control-to-be-scrolled. That would be important IF you had MANY overflowed rects/containers... on-screen at the same time. The mousewheel would need to know WHICH overflowed rect to scroll. https://www.babylonjs-playground.com/#08KEYA#33 There is a playground with a GUI rect source code... inserted into the playground. We can easily make modifications to it... in that playground... to make it "observe" when it has vertically overflowed. Scary-but-fun hacking! Might we need the superClass... GuiControl, in the playground, too? We can "borrow" whatever code is needed... from https://github.com/BabylonJS/Babylon.js/blob/master/dist/gui/babylon.gui.js Just some thinkin'. I hope Deltakosh, Adam, Arte, Jeke, and all other wise/inventive forum-folk... add comments and have more ideas.
  24. 1 point

    Button dis-connected

    We can also play with the layerMask on advancedDynamicTexture and set the value to 0 to hide it advancedDynamicTexture.layer.layerMask = 0; // hide GUI advancedDynamicTexture.layer.layerMask = 1; // show GUI It works well for me
  25. 1 point
    V 2.2.0, Improvement. We can now add: - Sound/music area defined by the radius of a half sphere. - Water area and change some options. - Collision wall : to create invisible barriers if you want to prevent access to a certain place of your scene. - Portals to go from one scene to another. Portal information is saved in metadata to reuse them in your own game with your own teleportation system. Enjoy.
  26. 1 point


    I'm using code from that example (game and cameras resize) + some basic css. It could be part of Phaser, but honestly that's all I will ever need. If you want proper responsive game, you have to implement it yourself anyway. This is my custom ScaleManager's initialize method that I call after I create the Game instance (Haxe code). public static function initialize(game:Dynamic):Void { function resize() { var w = js.Browser.window.innerWidth; var h = js.Browser.window.innerHeight; var scale = Math.min(w / Config.DEFAULT_WIDTH, h / Config.DEFAULT_HEIGHT); game.canvas.setAttribute('style', ' -ms-transform: scale(' + scale + '); -webkit-transform: scale3d(' + scale + ', 1);' + ' -moz-transform: scale(' + scale + '); -o-transform: scale(' + scale + '); transform: scale(' + scale + ');' + ' transform-origin: top left;' ); width = w / scale; height = h / scale; game.resize(width, height); game.scene.scenes.forEach(function (scene) { scene.cameras.main.setViewport(0, 0, width, height); }); } js.Browser.window.addEventListener('resize', resize); if(game.isBooted) resize(); else game.events.once('boot', resize); }
  27. 1 point

    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: http://metroid.niklasberg.se/gridPhysics/ Github: https://github.com/nkholski/phaser-grid-physics 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 isBlocked.top (boolean). Planned features include conjoined bodies, collision callbacks, movement tweaks and other stuff.