Search the Community

I'm researching about creating a visual " algebra geometry " desktop game-oriented app for students which the user can create 2D primitive shapes and parametric shape patterns with help of numeric-nodes. the similar application would be something like " grasshopper " plugin for " rhino 3d ". In parametric patterns user may create some thing around 1000 to 1500 user-defined shapes which each shape: - has its own animation for vertices, position, rotation - may response to mouse interactions - has its own color or texture and stroke - will be generated dynamically in runtime base on user input also I have to code a mini node base editor . I've seen and study web-techs and precious libs and frameworks like Pixi and searched alot about best practices. I have some questions and I'll be grateful if you help me to find the answers: - is web-techs suitable for the application? - according to what I absorbed from API docs, PIXI.Graphics is designed for none-continues changing shapes so should I instead extend PIXI.Mesh or the Graphics does the job? what is the best way of creating such a shape? - should the custom-shape class be my biggest concern or there are other performance related things I need to take care of? - any further suggestion ? thanks ?

I've created a BoxGeometry and assigned it to a Mesh, then when I click on the Mesh I would like to trigger an update of the geometry, for example change its "size" parameter. Is there a method I need to call on the Mesh to update it? I can see that the size property of the geometry gets updated, but the Mesh is still using the cached version. This is probably an easy thing to do, but I'm struggling a bit as I'm very new to Babylon. I've created a PG here: http://www.babylonjs-playground.com/#JTA9RH Any help would be much appreciated

Hello, I'm using Phaser v3.11.0-beta1 (last commit) and I'm trying to use dynamic tilemap system. I don't know if this is the expected behavior, but I can't zoom in on the tilemap. Check this example from labs.phaser.io, when you add that to line 51 : this.cameras.main.setZoom(2); Zoom seems to be inverted, and when I do a setZoom(1/2) I get a strange result too. I also tried this other example, but nothing is displayed. Is that normal? I'm new to Phaser, so I'm still missing some things. Someone who understood how dynamic tilemap works could explain it here? Thanks.

Is there a way to create a text object with physics on it, the same way I'm able to create an image object, like this: Phaser.Physics.Arcade.Image.call(this, scene, 0, 0, "my_image"); If there isn't a direct way of creating such thing, what would be a good alternative of having a dynamically generated text that acts like a game object with physics?

Took me some time to understand the example with a blank tilemap. Maybe because it comes along with mouse input and extraction of tiles from a predefined source. So i thought i'll leave this here. assets/bg.png is an image with 32x32 pixels holding 4 different background sprites. Dynamic tile map created from an array (found in another example): var game = new Phaser.Game(1280, 1024, Phaser.AUTO, 'eAnt', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('background', __dirname+'/assets/bg.png'); } var cursors; var map; var sand; var layer1; var obstacks; var tileset1; var tileset2; function create() { game.stage.backgroundColor = '#2d2d2d'; // Create some map data dynamically // Map size is 128x128 tiles var data = ''; for (var y = 0; y < 24; y++) { for (var x = 0; x < 24; x++) { data += game.rnd.between(0, 3).toString(); if (x < 23) { data += ','; } } if (y < 23) { data += "\n"; } } //console.log(data); // Add data to the cache game.cache.addTilemap('dynamicMap', null, data, Phaser.Tilemap.CSV); map = game.add.tilemap('dynamicMap',16, 16); // Das Tilset für den Boden hinzufügen tileset1 = map.addTilesetImage('background','background', 16, 16); console.log('tileset1.tileWidth',tileset1.tileWidth); console.log('tileset1.tileHeight',tileset1.tileHeight); console.log('tileset1.columns',tileset1.columns); console.log('tileset1.rows',tileset1.rows); console.log('tileset1.total',tileset1.total); // Layer für den Hintergrund erstellen, Maße durch das data-Array vorgegeben layer1 = map.createLayer(0); layer1.scrollFactorX = 1.5; layer1.scrollFactorY = 1.5; // Scroll it layer1.resizeWorld(); console.log('layer1.world.x',layer1.world.x); console.log('layer1.world.y',layer1.world.y); console.log('layer1.world.x',map.heightInPixels); console.log('layer1.world.y',map.widthInPixels); console.log('map.tileWidth',map.tileWidth); console.log('map.tileHeight',map.tileHeight); // Hindernisse obstacks = game.add.group(); cursors = game.input.keyboard.createCursorKeys(); } function update() { if (cursors.left.isDown) { game.camera.x--; } else if (cursors.right.isDown) { game.camera.x++; } if (cursors.up.isDown) { game.camera.y--; } else if (cursors.down.isDown) { game.camera.y++; } } function render() { } Dynamic tile map with "on the fly" created random tile: var game = new Phaser.Game(1280, 1024, Phaser.AUTO, 'eAnt', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('background', __dirname+'/assets/bg.png'); } var cursors; var map; var layer1; var obstacks; var tileset1; function create() { game.stage.backgroundColor = '#2d2d2d'; // Eine leere TileMap erstellen map = game.add.tilemap(); // Das Tilset für den Boden hinzufügen tileset1 = map.addTilesetImage('background','background', 16, 16); console.log('tileset1.tileWidth',tileset1.tileWidth); console.log('tileset1.tileHeight',tileset1.tileHeight); console.log('tileset1.columns',tileset1.columns); console.log('tileset1.rows',tileset1.rows); console.log('tileset1.total',tileset1.total); // Layer für den Hintergrund erstellen, 24 x 24 Tiles die jeweils 16 x 16 px groß sind layer1 = map.create('background', 24, 24, 16, 16); layer1.scrollFactorX = 1.5; layer1.scrollFactorY = 1.5; // Scroll it layer1.resizeWorld(); console.log('layer1.world.x',layer1.world.x); console.log('layer1.world.y',layer1.world.y); console.log('layer1.world.x',map.heightInPixels); console.log('layer1.world.y',map.widthInPixels); console.log('map.tileWidth',map.tileWidth); console.log('map.tileHeight',map.tileHeight); // Das Layer mit Tiles füllen for (var y = 0; y < 24; y++){ for (var x = 0; x < 24; x++){ // Zufälliges Bild aus dem Hintergrund-Tileset var SpriteIndex = game.rnd.between(0, tileset1.total-1).toString(); var t = new Phaser.Tile(layer1, SpriteIndex, x, y, 16, 16); map.putTile( t, x, y, layer1); } } // Hindernisse obstacks = game.add.group(); cursors = game.input.keyboard.createCursorKeys(); } function update() { if (cursors.left.isDown) { game.camera.x--; } else if (cursors.right.isDown) { game.camera.x++; } if (cursors.up.isDown) { game.camera.y--; } else if (cursors.down.isDown) { game.camera.y++; } } function render() { }

Greetings, Quick question: How do I dynamically update the arguments of this loop from the update function to reflect the actual coordinates of the pointer? (This loop is found in the create() function) Game.mouseTimer = game.time.events.loop( 100, Client.sendMousePos, Client.class, game.input.mousePointer.x, game.input.mousePointer.y ); I have already attempted several techniques, such as including this code snippet in the update function; However, it throws an Uncaught TypeError: Cannot set property '0' of undefined error. Game.mouseTimer.args[0] = game.input.mousePointer.x; Game.mouseTimer.args[1] = game.input.mousePointer.y; To go around the error, I tried to manually initialize the Game.mouseTimer.args array before the loop. This did indeed avoid the error; However, it only updated the arguments once. Thanks.

Hi all, BabylonJS is great. I have a question, maybe someone here can help : Is it possible with the current API (BJ2.5 ou 3) to write directly to the ArrayBuffer used to upload data to the video card? In my program, I would like to generate and update a dynamic mesh and I need it to happen as fast as possible (no freezing, eventually might have to be done in a web worker). In fact, quite often actually, I need to update muliple meshes at once within a frame. I'm worried about the overhead of updating a JS array that, I'm guessing, is copied into an ArrayBuffer to feed to webgl. Can I bypass the JS data format? I would like to "lock" the buffer and write to it. Am I overworrying? I think not.

Hi, I wonder what would be the most efficient (performance) strategy of dynamic drawing. I get every x timestep new coordinates from an external controller over the network where my "pencil" currently is. To simplify, it is like the mousepointer drawing something. When the mouse button is released, I have to store my line/circle/whatever to be able to change the position at any time: 1. draw form A 2. draw form B 3. move form A 4. draw form C ... In addition, there will be some pictures "flying" over the drawings. Pixi has some great features I want to use for this project, but I don't know how to "draw" fluently and in "real-time". Paper.js has a path-feature, which could work. Maybe I have to draw in paper.js and send every finished drawing to the pixi canvas? Thank you for your help, Steffen

Hello everyone, First of all, thanks for all the amazing contents I managed to find here. It really helped me to understand better how BJS works. Background : I am much more a back-end developer, so excuse me if I lack (too much) knowledge about front-end or 3D modeling. Anyway, I learned some Unity and Unreal by myself and built several Unity applications (no games, regular mobile apps, Augmented Reality apps, ...) so I understand a bit how 3D modeling works (textures, UV maps, normal maps, materials, baking, ...). I am thinking about using BJS, but can't set a tech stack until I am sure that it can answer all my needs. That's why I started building some POCs with BJS. The need : To make it quick : I have an application where I want to integrate a frame with a single 3D object (with BJS). I want to interact with this object and change its look just by clicking on a button in the interface (in less than a second would be great). The objects will be multiparts : for example, the obj of a table would include a feet part and a top part. I want to be able to change the top part and the feet part textures/mats separately. I need the result to be in very high quality and to display fast enough (but since I don't want to build a full world, just a single object, I hope this will be OK). What I understood / What I tried : Thanks to some tutorials/samples, I loaded some models from .babylon or .obj files , in the Sandbox or in a local application. I managed to change mats for these meshes using some code of the "rabbit sample" (glass, metal, ... materials). If I'm not wrong, I'll be able to change textures (with a .jpg or .tga file), the behaviour of light (to create metalic, glass, wood or plastic behaviour), the color, ... with something like : mesh.material.diffuseTexture = new BABYLON.Texture(texture, scene); or var mat = new BABYLON.PBRMaterial("clay", scene); mat.cameraExposure = exposure; mat.cameraContrast = contrast; mat.microSurface = 0.06; mat.reflectivityColor = new BABYLON.Color3(0.5, 0.9, 0.9); mat.albedoColor = new BABYLON.Color3(0.5, 0.5, 1); Plus, if I understood well, I can "isolate" my mesh after it's instanciation with a "onSuccess" event, to be able to access it easily after loading the page (or loading a new item). I am planning to create a scene from scratch and add just a simple background and lights to make the object looks great by itself :). Here is what I didn't understood (or not sure about that) : Q1 : what's the good way to load an object and to identify every sub-part of it ? For example, if my (lovely and friendly) graphical artists build and export an .obj "object1" with 2 sub-parts called "obPart1" and "obPart2" with Maya or 3DSMax, what's the best way to interact with obPart1 and obPart2 after loading object1 in BJS ? Q2: Am I forced to play with many maps for one object, or can I obtain sufficient result using multi-part object and a BABYLON.PBRMaterial for each sub-part ? Q3 : What's the main difference between using a .obj or a .babylon ? I would clearly prefer to directly use .obj files (to stay closer to standards and avoid to use plugins) but would I miss something that I couldn't replace in my BJS scene (like a light...) ? Q4 : If I am smart enough (crossing fingers), I should be able to display a glossy wood and a not glossy one with only one .jpg texture, just by having 2 different BABYLON.PBRMaterial, right ? Am I wrong if I am thinking about doing the same thing to have a blue wood and a pink one (erm ... why not ?) ? Q5 : Last but not least : if I am smart enough (crossing fingers to death), I could build a back-office where I can upload .obj or .babylon, identify sub-parts of it, chose wich texture/mat can be applied on which sub-part, and use all of this in the "display" part of the application. I may be a dreamer (but i'm not the only one ...) but if I didn't miss some main specifications, I believe that this could be achieved with a clever architecture. Am I mad to think about that ? I (really) searched in this forum (and some others) and in the documentation, sorry if I missed the answers (or didn't understood the words I read). I am much more used to back-end technologies so I may have not been as efficient as I use to be, but I'll learn fast ;). Feel free to tell me if I understood some parts wrong. Thanks a lot for your experience and answers :).

Are there any facilities to dynamically load javascript in babylon js... If not what it the recommended way to load javascript from a string? Is window.eval ok to use in a custom scene loader (like objFileLoader.ts)? If i use window.eval to dynamically load javascript, will it be acceptable code to submit to github project?

This is more of a questions really. Searched a bit around the issues, change-log and this forum but couldn't find an answer for it. I'm loading bunch of scripts dynamically via game.load.script. As expected I can't put brekapoints and debug those scripts. I'm aware of sourceURL solution, but couldn't get it working. Is there any way to put breakpoints and debug dynamically loaded scripts? Any help or information would be appreciated.

Hello, I was reading this post from @Wingnut and I'm surprised how easy it is to generate a mesh. I've enabled the colors in this playground: http://www.babylonjs-playground.com/#1UHFAP#60 This colors are per vertex and there is a color gradient across the face. Is it possible to set the face colors instead the per-vertex colors? Or is there a work around to achieve the same goal? Thank you very much for your time, Simon

Hi everyone. I am currently at the beginning phases of creating the portion of my code that will update/create my map from an algorithm I will create later. For now I am randomizing it. I am using the csv option of tilemap but running into a problem I can't figure out and I have read everything I can to no avail. I have this in my preload(): game.load.image('worldMapTiles', '/public/assets/mapspritesheet.png'); function generateWorldTilemapCSV() { ** Random code here - save the space by leaving it out of post here is a copy and paste of its return from the console: "3,1,2,1,1,0,2,3,2,1,2,3,3,2,1\n2,2,1,3,0,2,3,1,0,1,3,2,3,1,2\n1,2,2,3,3,2,2,0,1,1,1,3,3,3,3\n1,1,2,2,1,0,2,2,3,1,3,2,2,2,3\n2,2,3,3,1,1,2,1,3,1,2,1,1,1,2\n1,2,3,1,2,3,1,2,1,2,2,2,1,3,3\n2,2,3,1,1,1,3,1,3,1,1,1,2,3,2\n1,1,1,3,1,3,3,2,1,3,1,2,2,1,3\n3,1,3,2,1,3,2,0,1,2,1,2,3,2,0\n3,2,2,1,1,3,2,3,2,1,2,1,1,1,2\n1,2,3,1,1,2,2,3,0,2,3,2,3,1,1\n3,3,3,1,2,2,1,3,1,2,1,2,2,2,3\n3,1,2,2,3,2,2,1,2,2,1,3,2,1,2\n1,3,1,3,3,1,1,1,1,1,3,2,1,2,1\n1,2,3,3,2,1,2,1,3,3,1,3,3,2,3\n" ** }; game.load.tilemap('worldMap', null, generateWorldTilemapCSV(), Phaser.Tilemap.CSV); ... and in my create() map = game.add.tilemap('worldMap', 200, 200); map.addTilesetImage('worldMapTiles'); However all this does for some reason is create one 200 pixel tall row that is very wide (essentially all the tiles horizontally) as if it is ignoring the '\n'. 'mapspritesheet.png' is a simple 400x400 image ([4] 200x200 squares). I have no errors in the console. I am new so I have a feeling I am missing something obvious but I promise I have spent hours on this already before asking. Thank you in advance for your help. UPDATE: Well it is now been multiple days and this post still has not been approved - figured it out - the string needs to have the new line double escape like this '1\\n' which means that in my random map generator I had to add three slashes like so: '\\\n' when appending it.

Hi I have a bunch on atlas animations bound to a single sprite but the animations and frames vary in size(width and height). Is it possible to update the sprite dimensions in the update to get the details from teh JSON file and update the body accordingly? I would like to make this a generic function for all animations so that I dont have to set it myself. Any help would be great.

Hello dear Forum, i have a Question regarding dynamic Asset Loading in Babylon.js. I was not able to find Information about this topic in the Documentation or the Forum (don´t slay me if I missed something ). So basically what I want to be able to achieve is: 1. User clicks a HTML-Button (for Example "Load Model") // Button should be outside of the Canvas if possible 2. Button calls Function with modelName as Parameter 3. Function checks if Model with modelName exists in some Kind of Library 4. If so, the Model gets Downloaded 5. Model gets rendered So, as far as i was able to find out, it is totally possible to pass Information from a HTML-Element to the Babylon Engine. But is it possible to download something at runtime (CORS is considered) that has never before been used inside the Project. The reason for this is that I want the Game to handle almost the whole "What shall i display?, Where shall i display it?, Which Components does the Object have" - Functionality dynamically without defining too much of it inside the Project. I hope I was able to give you an insight into what I want to achieve. Regards, Markus

Hi All, I just found this framework babylon.js and see some example at babylon playground, i have been wondering is there some example how to insert new mesh at canvas with onclick button html ? what i mean is : when i click button, there will be new mesh (box) appear and it will always insert new mesh(box) every time i click the button thanks alot, wayan

Hi, I need to generate a terrain mesh procedurally. I am currently doing it with lots of sprites stuck together in a line to generate the contour of the terrain. It works fairly well, but has a few quirks and seems to affect performance badly. What I was thinking of doing is generating the points in the preload function, then from that, draw a line to rendering the terrain, and then use the same points to generate the collision polygon. The issue I found is that the game.load.physics() function works with a url to a json object. Is there a way to pass it a json object that I created in the game itself instead of a url? By the way, I am using P2 physics for this.

Hello all, I'm trying to make a "game" in which you drag sticks from a pool and you position them on the screen. (I'm basicaly creating a cuisenaire program). The sticks have to be restrained in the underneath tilemap and also cannot overlap with each other. Every stick has a sprite.input.enableDrag(); sprite.input.enableSnap(30, 30, true, true); So it can be draggable. Also, I whenever the user drags a stick from the pool, I clone a stick there so he can drag another one later on. How can I instruct phaser to watch for collisions between all sticks? If I put them on a group, I loose the input.enableDrag on every stick. If I don't have them on a group, how can I reference them to watch for collisions with each other? Thank you

I've recently found myself in a professional position where by the artist is sapping most of my time demanding changes to art work. This has to stop! So I've created a simple and easy way to render art dynamically including the ability to add new art with absolutely no requirements from the coder! I have no idea if this is of use to anybody, just throwing it out there The idea is, the artist or creative director, or anybody who wishes to tinkle with the game can drag and drop the images into your asset folder, than edit a couple of JSON files to add them to the game. So, to start with, we're going to need a couple of JSON files. Beginning with none other than the list of files to be loaded into the game. I am also going to be wrapping these Javascript objects inside languages as to simulate a multi-lingual game / app. You are going to start by creating a JSON file and put inside it: { "english": { "0": { "name": "mainMenuBackground", "location": "assets/images/mainMenu/yes.png" } }, "spanish": { "0": { "name": "mainMenuBackground", "location": "assets/images/mainMenu/yes.png" }}Next, in your boot file.. you need to load this in using: this.game.load.json('imagesToLoad', 'assets/json/states/imagesToLoad.json');Now, onto the meaty stuff! In your Prelaoder, you are going to want to define the language the user is playing.. for me, that's english.. We now need a function to dynamically add any image we choose to throw at it: loadImage: function(asset) { this.load.image(asset.name, asset.location)},Add to that, a simple for loop to iterate over out JSON file and boom! for (var i in imagesToLoad[lang]) { this.loadImage(imagesToLoad[lang][i]);}And that's part one! When the user changes the language, the JSON file will look for those assets accordingly. For part two, we use a very similar process where by the images to be rendered are stored in a JSON (inside a language object again). Here is an example JSON file I would use: { "english": { "background": { "programName": "background", "assetName": "background1", "scale": 1, "x": 0, "y": 0, "anchorX": 0, "anchorY": 0, "alpha": 1, "angle": 0 }, "logo": { "programName": "logo", "assetName": "loadingLogo", "scale": 1, "x": 400, "y": 100, "anchorX": 0.5, "anchorY": 0.5, "alpha": 1, "angle": 0 } }}Calling this file, we can simply do the same for loop as before: for (var i in images[lang]) { this.addImage(images[lang][i].programName);}And then the method that is invoked using that for loop: addImage: function(objectName) { this.objectName = this.add.image(images[lang][objectName]['x'], images[lang][objectName]['y'], images[lang][objectName]['assetName']); this.objectName.anchor.set(images[lang][objectName]['anchorX'], images[lang][objectName]['anchorY']); this.objectName.alpha = images[lang][objectName]['alpha']; this.objectName.angle = images[lang][objectName]['angle']; },Thus, allowing the artist to add any art work, as well as draw it to any screen he or she wishes. This is also very handy when tweaks are required: i.e: "move this image 2 pixels to the right". I have also done the same for all text in my project but I'm sure you get the idea on how to do that now! Sorry if this is a little simple for this forum, It's actually my first ever tutorial.. if you could call it that! Many happy coding hours everyone Thanks Nick

Hello Everybody, Is there a way to optimize textures similar to the level of detail feature does with meshes? I have scenes with about 100 textures and looking to make it load faster with lower resolution textures but switch to higher resolution textures as the camera gets closer to each object. any ideas?

Hi! I want to transform sprite in the way like on attached pic (curved distortion from the top and bottom and then slightly skewing). I plan doing this dynamicaly, so parameters of the distortion should be chnaged in realtime. What is the best way of doing such transformations? I think, mesh should help or there is something more optimal?

Hi, I want to show data on a mesh ( an histogram, one axis is data , other is time). I use a dynamic texture and the render loop to slide curent content by one column, then i create an array to stock my data then i rewrite the content of the array on the first line of my texture context. This is an exemple ( playground doesn't work) of the structure. This structure work but i don't thing i have to touch two time conText with the same function( cost FPS). I'm completly conscient that a better way exist like paste each pixel in image data, but before i need your suggestions. var dynText = new BABYLON.DynamicTexture("dino",512,scene);var conText = dynText.getContext();var size = dynText.getSize();var pixelIndex =0;// render loopengine.runRenderLoop(function () { // array of my data, each loop i've got completly new data [0,1] donnee = ligne(); //slide by one all my previous data, NOTICE the one at the end conText.putImageData(conText.getImageData(0, 0, size.width, size.height), 0, 1); // write the first line with my data imageData = conText.getImageData(0, 0, size.width, size.height); for(var j =0 ;j<size.width;j++){ pixelIndex = j*4; // grey scale imageData[pixelIndex ] = donnee[j]*255; // red one imageData[pixelIndex + 1 ] = donnee[j]*255; // green oen imageData[pixelIndex + 2] = donnee[j]*255; // blue one imageData[pixelIndex + 3] = 255; // alpha } conText.putImageData(imageData,0,0); dynText.update(); scene.render();});

Wanted to know if you can show the loading bar progress just like at the beginning with the dynamic loader?

Hello. I have currently developing a tile-based puzzle game. I need to draw block/cell dynamically (the width/height and x/y count can change), What is the best way to achieve this? From what I have tried, rectangle class only used for debugging, and rendering debug.geom always draw it on top of everything. Another way I can imagine is creating a sprite for block, and draw it in loop, but I still don't know how to achieve this, since there doesnt seem any way to override rendering method of a sprite. Thanks.

Hey everyone! Recently i have created an Random Dungeon Generator ( https://github.com/stefanweck/dungeongeneration ), and i'm porting it to a plugin for Phaser. The only problem i encounter is loading my custom map in the game! I've tryed preloading an "empty" ( just dummy data, 0's etc ) json file, setting that as my tilemap and change it. I've tryed creating an empty tilemap and fill it with my data. Even tried to generate my output the same as the example json tilemap files, but that's a big pile of work. Is there any solution for doing this? Is there an example where someone creates an empty tilemap object and fills it with data? The examples on the Phaser website only load pre-defined maps as .json files. Thanks in advance! Stefan