Popular Content

Showing most liked content since 03/27/2017 in all areas

  1. 19 likes
    Hello community! As you know, the playground is a very valuable tool if you want to try, experiment and share your Babylon scenes. You can even search for a specific word in the whole snippet database from the documentation website, that make it easy to find and discover a new snippet. And because we know it's a very powerful tool, we worked hard last month with @Deltakosh on a better user experience when searching for playground. From now on, when saving a new playground, you'll have to fill several information: a title, a description and some tags. It will be asked only once at the playground creation, and all next iterations of this PG will share these metadata. You won't be able to redefine it afterwards. For all PG that don't have any metadata, you will be asked to fill it only once. The search has also been improved. You can search for a word in the PG code like usual, but you can also search for a word into a PG title/description, or a specific tag. The overall quality of search had also been improved (ou can now search with several words, that will return all PG that contain these words, and several bugs have been fixed). All this work couldn't have been done without @Jaskar and @DeathSoul who wrote all the code (back and front-end), and @Deltakosh of course So go try it : http://doc.babylonjs.com/playground Please helps us by reporting all bugs you can have in this thread Thank you very much !!
  2. 17 likes
    Hello team! Since the very first version of Babylon.js materials are working in a pull mode. This means that every time a mesh needs to be rendered, its material has to ask the engine about a lot of information in order to compile the best shader possible for the given mesh. For instance, here is an incomplete list of states required to compile a shader: - Lights affecting the mesh (taking in account inclusion and exclusion lists and masks) - Textures and channels (including associated parameters like parallax for bump or reflection mode for reflections) - Fog, clip planes, point rendering or wireframe - Mesh attributes (does the mesh contains UV? tangent? colors?) This leads to a pretty expensive function named Material.isReady. Due to the previous reasons, the function is really CPU intensive. Here is for instance the profile of the "materials" playground: The highlighted functions are part of the IsReady root function. The scene is extremely simple and you can see that the isReady is taking almost 13% of the CPU time While it was ok because of the complexity of the task assigned to this function, I decided recently to change it to a clever model: The push mode. When a material is in this mode, instead of asking on every frame for every state, the states will push updates to the material when they change. Obviously the performance boost is immense. Look at the same profile with the new mode: We are now at 2.51%. On bigger scene like Sponza, this function could take up to 30%: And now with the new mechanism: ONLY 3%!!!!!!!!!! But obviously with such a big change, there will be some bugs.. So please use this thread to report any issue with StandardMaterial. If everything is fine, I'll update the PBR to push mode in one or two weeks. Associated PR: https://github.com/BabylonJS/Babylon.js/pull/1959/
  3. 14 likes
    Hello team! as part of 3.0 version, I'm proud to announce the availability of ESM shadows (Exponential Shadow Maps). I updated the great doc done by @Wingnut to take this in account: http://doc.babylonjs.com/tutorials/shadows VSM (variance shadow maps) were removed (to keep backward compatibility the properties are still here but they will trigger a warning in the console). ESM are great because they can be blurred. Here is an example of all kind of shadows we have now: http://www.babylonjs-playground.com/#20FROK#2 ESM are great because they allow you to deal with selfshadowing: http://www.babylonjs-playground.com/#1CXNXC#3 Hope you like it!
  4. 12 likes
    Hey team!!! I'm pleased to announce the availability of morph targets! Please read more here:http://doc.babylonjs.com/tutorials/how_to_use_morphtargets
  5. 11 likes
    After more than 2400 hours of work, I am delighted to present the first version. I hope I have nothing to forget. So there is an available site. From the website you can access the store which will allow you to download the software. Registration is required to download and to allow me to have statistics on the number of people who have downloaded. A forum is also available with tutorials on the use of the software. And a bug reporting page is also available on my deposit. This first version is to be used as a version discovery, tested and taken in hand and to have your opinions, suggestions. She is not ready for production. Certain things in the game are not complete. For example, the animations are not set correctly via the editor and therefore involved, the walking animation is not working as it should in game. But once properly set in the editor, it works. This is not a bug, but just a bad setting key animation that I will settle soon. After downloading, you will have to install the software with an interface provided for this. You will need to use a local server to operate (EasyPHP is perfect for this) There is a procedure to follow the tutorials forum. Do not hesitate if you have any questions on the forum (in English or French). The site, the shop, the forum and the publisher have a French and English translation Site Link: http://www.heroonengine.actifgames.com/ I welcome you and good discovery.
  6. 7 likes
    Hi! I just released a Vscode extension for Babylon.js, that can be used to display the content of a babylon file in a preview panel. Basically, it's a local sandbox You can check it out here: https://marketplace.visualstudio.com/items?itemName=julianchen.babylon-js-viewer I plan to add more features: quickly check meshes names, materials, cameras, lights... In order to have a quick links glance at the content, and being able to use it in my game. Feel free to give me feedback, it's always appreciated You can also let me a review on Vscode marketplace Thanks!!
  7. 6 likes
    It's a pleasure to announce a texture generator "TexGen" to be used by BABYLON developers. Due to the excellent work of @NasimiAsl 's ShaderBuilder it's possible to build a somewhat generic shader and inject the runtime properties (uniforms) on the fly. I've designed a shader-script which takes altenative inputs, generates artificial normal maps, mixes with another optionally image and outputs a really nice 3D look of the (flat) inputs. Live system available HERE (updated) Key featuers: Alternative input sources: PatternGenerator, NoiseGenerator and plain image No need for normal maps, they will be generated on the fly by the shader pattern generator on the javascript side, once generated => turbo speed on the shader side noise generator on the javascript side (Perlin,Fractal,Turbulence), once generated => turbo speed on the shader side Preset concept, all shader/pattern/noise-parameters can be reduced to a handful numerical settings (JSON-Format) Full procedural, images can be mixed optionally Here are some preset patterns from the noise generator and some other Examples. I hope you find this interesting... Greetings, javalang PS. a short description to the LIVE-System (from right to left): on the upper right you find a slider with three input-sources. The next menu are the properties for the pattern generator. On thenext menu are the shader properties mainly for the normal map creation and a slider "balance" where you can mix another image to the input. And on the left side is the noise menu (I prefer preset9 ), there are endless more to be detected... Full procedural image with noise: Mixed with another image: Input source: single image! Input source: pattern generator Noise mixed with image:
  8. 6 likes
    It's a pleasure to present my first mini-use-case of the ClonerSystem: http://www.babylonjs-playground.com/#1WRUHY Play with the controls, have fun
  9. 6 likes
    Hi folks, Maybe some of you followed this topic for while : Well, now I'm proud to announce the fully documented first release of the Dynamic Terrain Extension : https://github.com/BabylonJS/Extensions/tree/master/DynamicTerrain Its documentation is one the same repo : https://github.com/BabylonJS/Extensions/blob/master/DynamicTerrain/documentation/dynamicTerrainDocumentation.md Have fun Some more demos and features to come
  10. 6 likes
    first version completed and on-line : https://github.com/BabylonJS/Extensions/tree/master/DynamicTerrain now it's doc writing and example coding time for me ...
  11. 5 likes
  12. 5 likes
    Hey team, I've just added a small page here: https://github.com/BabylonJS/Babylon.js/tree/master/tests/validation (It can be run directly from VS code) This page will run some visual tests against the current babylon.js library:
  13. 5 likes
    I'm happy to present to you Phaser Quest, a top-down real-time multiplayer adventure made with Phaser and Socket.io. Explore the map, find better equipment, fight monsters and defeat the final boss, alone or with friends! It was for me a practice project, and is a reproduction of Mozilla's Browserquest. Hopefully the source code will interest you, as the project integrates of a lot of Phaser features together (such as tiled maps, text input, tweens, animations, sound, click handling, camera management, etc.), as well as pathfinding using Easystar.js. It is also an example of how a Phaser client can be made to interact with a Node.js server using Socket.io. On my website, I have written a few articles about some aspects of the game. They are mostly concerned with networking for the moment. If you'd like me to write an article explaining how I accomplished this or that in the development of this game, feel free to ask, I'm always happy to help. In addition, I'm interested in any feedback you might have, it's always valuable, especially with future multiplayer projects in mind.
  14. 5 likes
    Hi all, I've implemented a basic-functionality of a cloner system and I'd like to hear your opinions and design/concept-suggestions for further develepment and finishing my work (if you're interested at all). I decided to use a working title "SCS" for "Simple Cloning System" and here are the core features and concepts : Cloners: given one or several meshes, either clones or instances will distributed in a specific manner. If more than one mesh is provided, the meshes are distributed alternatively. Additionally, cloners can be nested, so it is possible to clone cloners. Each cloner can have several Effectors (in particular order) to influence the Scale/Position/Rotation parameter of a clone (or cloner). A sensitivity parameter controls this influence for a cloner. Following Objects are designated: RadialCloner: radial distribution where following parameters are recognized: count, radius, offset, startangle, endangle, Effector-sensitivity for Position, Scale and Rotation, alignment-flag, orientation. LinearCloner: linear distribution where following parameters are recognized:count, offset, growth, Effector-sensitivity for Position, Scale and Rotation. An interpolation-mode-flag determines, if the clone -parameters (Scale/Position/Rotation) are interpreted as "step" or "end"-values. MatrixCloner: coming soon (clones will be distributed in 3D space) PlanarCloner: coming soon (clones will be distributed in 2D space) ObjectCloner: coming soon (clones will be distributed in relation to the internals of a given mesh (vertices, edges, triangles ...) RandomEffector: influences Scale/Position/Rotation of a clone with repeatable random values, controlled with an overall "strength" parameter. Not quite finished, but basically working. FormulaEffector: coming soon, influences Scale/Position/Rotation via text thought to control from outside (html-page). StepEffector, TimeEcffector, DelayEffector and much more ??? So, enough for the moment, you can see and play with some scenes: LinearCloner,RadialCloner,RandomEffector radial-linear-radial-cloner linear-radial-linear-cloner PS: I need some advise if I should upload the sources to github if you're interested. Should I upload it to my own github space or to BABYLONX ? If the latter, do I have to send a pull request? Sources are written in typescript
  15. 5 likes
    doc started : https://github.com/BabylonJS/Extensions/blob/master/DynamicTerrain/documentation/dynamicTerrainDocumentation.md
  16. 4 likes
    We do not want to only ask Microsoft as it is a community Open Source project. Microsoft is already supporting the project by offering database free hosting for our playgrounds and for the search engine
  17. 4 likes
    Hi, Since the problem took me over a week to figure out, here is my solution to bundle your project using web-pack keeping Babylon as a dependency. NB: I am not certain what are the NECESSARY steps (ie what I could simplify) but those are SUFFICIENT steps. My constraints were : The final bundle can be imported both in the browser and in node using any kind of import method : require(), import/export, or <script src=...> tags It has to protect against errors in node due to access to window or document that will be undefined BABYLON has to load has a global in the browser using the script tag (window.BABYLON) BABYLON needs to include Canvas2D BABYLON needs to remain external of the bundle so the custom library is light and in theory could load any version of BABYLON Solution to protect loading in node.js: Build a custom bundle on Babylon website with Canvas2D ONLY, un-minified, and WITHOUT OIMO OR HANDJS. I did not test all possibilities but since the bundle is a concatenation suppose to be web compatible only, the exports will break in webpack or node in general. But using only this custom version will produce bugs in node due to access to undefined window. Then I had to bundle this custom build using webpack, you can see the configuration of webpack and the builder.js here : https://github.com/albertbuchard/experiment-babylon-js.git The important thing here is how the builder checks for window being defined and the webpack config exporting your named library with UMD. Publish this bundle to NPM (in the github look at the package.json it has three scripts to produce a unminified version, a minified version, and publish the repo on npm) Those two steps will allow to load Babylon using any kind of import method, and do not produce errors in node (but returns an empty object, of course any call to BABYLON function will fail) Solution to keep Babylon as a dependency in your custom library: In your library npm install the-custom-babylon-we-just-built Import BABYLON in your scripts any way you want using this custom repo ( es6 import syntax will work <3 ) i.e import BABYLON from 'the-custom-babylon-we-just-built' Then take a look at the webpack config and builder.js of this repo to understand how to manage EXTERNALS: https://github.com/albertbuchard/Experiment.js The key element here is how you write your external array: externals: { ... lodash: { commonjs: 'lodash', commonjs2: 'lodash', amd: 'lodash', root: '_', }, ... 'experiment-babylon-js': { commonjs: 'experiment-babylon-js', commonjs2: 'experiment-babylon-js', amd: 'experiment-babylon-js', root: 'BABYLON', }, ... 'experiment-babylon-js/lib/babylon.custom.js': { commonjs: 'experiment-babylon-js/lib/babylon.custom.js', commonjs2: 'experiment-babylon-js/lib/babylon.custom.js', amd: 'experiment-babylon-js/lib/babylon.custom.js', root: 'BABYLON', }, }, All but the root (Global environment reference) must be the NAME OF OUR MODULE as you would import it using require('NAME OF YOUR MODULE') so usually the name of your npm folder like the first two exaple, OR the direct path to the file you want to load like the third example. It has to be the same as the import names you are using in your library. So if you import babylon like so : // in your library const BABYLON = require('./path/to/babylon.js') // in your webpack config externals: { ... './path/to/babylon.js': { commonjs: './path/to/babylon.js', commonjs2: './path/to/babylon.js', amd: './path/to/babylon.js', root: 'BABYLON' } ... } Hope it will help some of you ! @Nikos123
  18. 4 likes
    There are a lot of combinations by the two input channels "generator-input" and "mixing-input". The following scene is showing some combinations with two pattern/noise-settings and one image, live system HERE.
  19. 4 likes
    Here's one with some 3D assets loaded: http://www.babylonjs-playground.com/#6PVF0Y#5
  20. 4 likes
    holla guys! i made a simple multiplayer game, but its's obviously still in progress. physics ball-pad
  21. 4 likes
    Hello everybody ! New features part 2: - You can now search any word or part of word (inside/outside of quotes) - You can ALSO search for shaders available in CYOS ! In this case, results will be displayed in red, and a link will forward to CYOS. - A version dropdown is available. By default, the link will forward to the last available iteration, but you can change that by selecting another version. - All bugs for some research (no results, impossible to read the code...) should be fixed now. Please report it if you still have some. @Wingnut, the PG was under migration on Friday, so it may be possible some PG didn't made it to the new database. If so, please send me the PG ID/iteration in PM and I'll try to recover it.>
  22. 4 likes
    Showcase of playing Perplexus Shadow Open 3D maze game on android phone Nexus 5x (it works also on tablet) Game works smooth! BabylonJS is great game engine for phone games! Here is Video (recorded with android app "AZ Screen Recorder") https://gaming.youtube.com/watch?v=vB7hd_SAzOA
  23. 4 likes
    I just started a documentation about use case examples : https://github.com/BabylonJS/Extensions/blob/master/DynamicTerrain/documentation/dynamicTerrainExamples.md
  24. 4 likes
    Got the shirt Thanks again to everyone and especially RaananW.
  25. 3 likes
    I have just reverse engineered what happens to a Hair particle system when it is converted to a mesh. No matter how many "segments" you say to use when it is a particle system, you get a block of 65 vertices (for 64 segments) for each strand. In this picture of a system with 2 strands: The output looks like this (already converted to left handed): vert: 0 location: -.7644,1.2222,-.8473 vert: 1 location: -.7644,1.2549,-.8473 vert: 2 location: -.7644,1.2904,-.8473 vert: 3 location: -.7644,1.3285,-.8473 vert: 4 location: -.7644,1.3692,-.8473 vert: 5 location: -.7644,1.4122,-.8473 ... vert: 64 location: -.7644,4.7778,-.8473 ========================================= vert: 65 location: 1.2222,.1286,.33 vert: 66 location: 1.2549,.1286,.33 vert: 67 location: 1.2904,.1286,.33 vert: 68 location: 1.3285,.1286,.33 vert: 69 location: 1.3692,.1286,.33 vert: 70 location: 1.4122,.1286,.33 ... vert: 129 location: 4.7778,.1286,.33 Clearly 65 data points for a 25,000 hairs is not going to be practical for a line system. In this example, it only really needs 2 points per strand. Any ideas on a way to reduce the data points between the first and last, based on some kind of straightness between sets of 3 points tolerance? When the strands are not straight, pulling out data points are going to make them look jagged, but with enough hairs, might this not be obscured? Especially since you are probably not going to get this close. Like most of my topics, I'll probably be talking to myself once again.
  26. 3 likes
    Let me try to de-mystify this. Imagine you're driving in a car that only moves when you close your eyes. The only way to drive such a car would be in small steps - first you'd close your eyes and let the car move forward a bit, then you'd open them, pausing the car, to correct your steering, and then you'd close them a bit more, etc. The implications of driving a car like this would be: Opening your eyes more often makes it easier to ensure you stay on the road But the more often you open your eyes, the more the car is stopped, so it takes longer to get anywhere On a straight road you can get away with closing your eyes longer, but but on a curvy road you'll need smaller steps Stepping a physics engine works exactly the same way - first the engine blindly moves the simulation forward a bit, then it pauses, opens its eyes, and tries to correct anything that's gone off track. And as in the previous analogy: Smaller timesteps always make the simulation more accurate But smaller timesteps mean you must step the engine more often (assuming you want it to run at real-time speed) Simpler simulations can get away with longer timesteps; more complex scenes will need smaller ones Hope that helps take the magic out of things! (Note though - all that theory is just for explanation. As a practical matter, since Babylon steps the physics once per render, almost everyone should almost always use 1/60 as their timestep, or else they'll effectively be running their physics in slow-motion or fast-forward. So when advising beginners, I'd encourage you to just tell people to set the timestep to 1/60 (if it's not set that way by default) and never ever touch it.)
  27. 3 likes
    Have you considered using scene.registerAfterRender (or scene.registerBeforeRender) to do the animation. This PG shows a very simple use http://www.babylonjs-playground.com/#92EYG#10 IMHO to do this you would need, in the registerAfterRender function call, to get the vertex data from the existing mesh, dispose the existing mesh and form new vertexdata by adjusting existing vertex data adding/subtracting new vertices and then create a new mesh with the new data. Everything I know currently about vertexdata for an existing mesh restricts you to updates only on the existing vertices. You probably know this already but just in case here is a tutorial about creating a custom mesh Good luck EDIT as an alternative use a sequence of animations on your 3 meshes http://babylonjsguide.github.io/basics/Starter http://babylonjsguide.github.io/basics/Combine.html http://babylonjsguide.github.io/gamelets/Sequence
  28. 3 likes
    here is an example of how you can reset the same tween without adding a new one: The key parameter that determines where the tween continues is found in the timeline property of the tween : tween.timeline[0].dt . If you reset that to 0 it will start from the beginning. The example has a bit more features where it resets the tween when pressing the A button. However, its more tedious to work this way and the simplest way out is to add it again, but if you really require the same tween then this could be a solution.
  29. 3 likes
    And there is a light theme as well !
  30. 3 likes
  31. 3 likes
    Hi, we are happy to announce a new (preview) release of Phaser Editor! There are a lot this time: The so waited MacOS support! Visual prefabs (sprites and groups). Visual editor support for states and preloader states. Some TypeScript support. Assets refactorings (great for larger projects) New Project wizards with more options (like include demo assets or use TypeScript). Updated Phaser Editor demos with prefabs and multi-levels. Git UI integration. And lot of fixes and enhancements. Many of them requested by Phaser Editor users (that's great, so many thanks!) Read the release notes. Arian
  32. 3 likes
    Hello, Here is a small sample I've created: http://www.babylonjs-playground.com/#6PVF0Y#2 that shows how to: - Use WebVRCamera with a fallback to DeviceOrientation camera for Cardboard/mobile support - Use Canvas2D in World Space mode to integrate some 2D UI in VR Should be a good starting point. David
  33. 3 likes
    A 3d reference grid using BABYLON.MeshBuilder.CreateLineSystem http://www.babylonjs-playground.com/#P6XHUB
  34. 3 likes
    These are my favorites for long coding sessions... Artists: Bonobo Emancipator Ott Soundtracks: Mr Robot Hotline Miami The Neon Demon Ex Machina
  35. 3 likes
  36. 3 likes
    Thanks T! I had a problem with BJS 2.5 saves yesterday, still, but I tested one this morning... with mDATA, and it seemed to work PERFECT. Also, "no metadata" notification is gone, so that is good. MetaData button works fine, and previously-entered metadata was found within. PERFECT! NICE!!! Thanks again... we're fartin' thru silk, now! And thanks for the standing-offer for PG recovery-attempts... that's very kind/cool of you. I'm pretty excited about these new features! They ROCK! I've already noticed a 50% efficiency increase... in Q&A custodian ops. It feels like I have new wizard powers... and I do.
  37. 3 likes
    http://www.babylonjs-playground.com/#1ZEABJ#14 http://www.babylonjs-playground.com/#1ZEABJ#16 planet
  38. 3 likes
    Sorry for the slow response - I've been confined to bed fighting a major health issue for over a week I took a look at both the .babylon file that @Wingnut used and the one that @Nesh108 posted above - both seem to have been produced with an old version of the Blender Babylon Exporter The current up-to-date exporter will produce something like this as a first line: {"producer":{"name":"Blender","version":"2.76 (sub 0)","exporter_version":"5.2.0","file":"filename.babylon"}, The "Goku" files that I looked at do not have this line. However, they do have "light" and "camera" arrays right at the top of the file - which with the latest version of the BBE are now found at the end of the file. The files also have a large "vertex" array - so I have no idea why @Wingnut's test produces 0 for total verts. First suggestion - update the Exporter and try re-exporting the mesh. If that fails, please can you post your .blend file @Nesh108 , so I can look for other file issues @Deltakosh and @Wingnut: the words of Erasmus about the "one-eyed man" spring to mind. cheers, gryff
  39. 3 likes
    Awesome! Updated one of my old playgrounds right away to try things out and found it right away with the new search (search performance is really good, too!)
  40. 3 likes
    Oh shit. Showing the relevant code of your search query, before having to open the PG is a very welcomed feature. I didn't request it. Heck, I didn't even even know I needed it. But it makes searching the Playground a hell of a lot easier and quicker, too. Awesome
  41. 3 likes
    The DOM is superb for rendering big blocks of text, which means it is pretty darn-good at layout and when CSS came along it meant that all sorts of layouts and UI suddenly became possible and easier than existing methods, however, the DOM is a big ole beast so some ops can be a little slow. Canvas is superb at rendering stuff really really fast but terrible for layout concerning multiple components. A UI is usually largely static but involves multiple components that all respect each others position, this is almost the exact use-case that the DOM was created for and it is the exact use-case it mostly fulfils in browsers nowadays. The DOM might not be fast enough to bounce around 100000 sprites but it is easily fast enough to respond to user actions and update itself, plus, this is the key use-case for the web so there are many many frameworks/libraries/modules out there to help you, not so for UI in canvas. I'd almost always recommend UI in DOM and the rest of the game in canvas, let those pieces do what they are good at rather than banging square peg into round hole. Let Phaser handle game state, keyboard input, sound, fast rendering and let the DOM handle a dumb UI layer that is responsible for laying itself out (you get this for free with DOM structure and CSS) and pinging events when users do stuff to the rest of your game code. Just to put this in perspective, the DOM and JS are so good at layout and UI that many native applications use a web-based approach in certain areas. Apps like Amazon on your phone uses web for content (for multiple reasons though) and many games (pretty sure some of the later Sim City series) use a web layer for their UI as DOM is great for layout and JS is great for responding to events.
  42. 3 likes
    http://www.babylonjs-playground.com/#FJNR5#34 If you can do this with 5 lines of code, you've probably already read all the long but didactic documentation about the brand new Dynamic Terrain Extension what I'm currently and shamelessly promoting in this inadequate sub forum with this link Have fun
  43. 3 likes
    Hello, As some of you may know, we have been forced to introduce a breaking change in the way to use the physics engines starting with v2.4. We try as much as possible to avoid breaking but sometimes it can help introducing a much better way to achieve something. This is the case for physics as now, the physics impostor and its associated mesh are better linked. To better understand why, extract from the doc: "The physics impostor synchronizes the physics engine's body and the connected object with each frame. That means that changing the object's position or rotation in Babylon code will also move the impostor. The impostor is also the one updating the object's position after the physics engine is finished calculating the next step". In previous implementation, we had a lot of users questions & feedback that didn't understand why moving the mesh wasn't doing anything once it was transformed into a "physic object". Please read our documentation to better understand how to use physics in Babylon.js: http://doc.babylonjs.com/overviews/using_the_physics_engine I've then updated my tutorial and the default sample of our main page: - Understanding collisions & physics by building a cool WebGL Babylon.js demo with Oimo.js: https://www.davrous.com/2014/11/18/understanding-collisions-physics-by-building-a-cool-webgl-babylon-js-demo-with-oimo-js/ - Main sample: http://www.babylonjs.com/Demos/Physics/ Thanks! David
  44. 3 likes
    Hello, I'm currently making little games on codepen to teach myself how to bluid them and get better at it So i thought it could be nice if I post on this topic every time i make a new game for the feedbacks I'm using javascript and render graphics on canvas, and piskel for the spritesheets. 1/ Jeu de bille Created JANUARY 23, 2017 tilt the screen with your mouse and move the sphere to the square, beware the holes in the ground. Link: http://codepen.io/Gthibaud/full/zNwgmZ/ 2/ The Dungeon Created FEBRUARY 07, 2017 walk through the dungeon, each time you enter a new room your score get higher. Link: http://codepen.io/Gthibaud/full/MJqgzv/ 3/ Copycat Created MARCH 30, 2017 This game is about cloned cats which you control at the same time Link: https://codepen.io/Gthibaud/full/ryQRYP/
  45. 3 likes
    I used this http://www.typescriptlang.org/play/index.html to convert your code so that it would work in the PG. I made a couple of changes that might be helpful. http://www.babylonjs-playground.com/#236AN2#5
  46. 3 likes
    Looks very good ! I can help you to translate into English if you need Nice work, keep going !
  47. 3 likes
    Congrats, D! Very cool. Why named "Heroon"? (if ok to ask) I hope folks don't playfully-say "Heroin Engine". The drug enforcement police might visit. heh Wiktionary: Heroon - A temple dedicated to a hero, often over his supposed tomb. A sepulchral monument in the form of a small temple. Is CastorEngine buried beneath this temple, D? (Wingnut places flowers and lights a candle, just in case.)
  48. 3 likes
    It has been a long time since I did not give a new of editor. I will propose in some days or some weeks, a version "discovery". it will not be fully operational, some functions of scripting is not finished and game not finished, but this may be tested in the state, many things working. A website will soon be available to download and permit the free editor in the shop. A forum will also be available for questions and tutorials. For now the site is in French but you can translate with Google. The editor version is in English and French. The forum will accept questions in English in a category planned for this. Some picture: the editor, the client and the website: Editor: Game WebSite
  49. 3 likes
    Hello Temechon! Just wanted to let you know that I've noticed a small typo on page 116. I thought it might be good for you to know this in case you'll be doing any future updates to this awesome book ;-)
  50. 3 likes
    V4 filters are differ from V3. You can't just put there shader and assume that texture coords are in [0,1] range. I am sorry that you have to learn all of that, and I will make sure that the process will be easier for pixi-v5. Filter Area Thanks to @bQvle and @radixzz First, lets work with the AREA. When you apply filter to container, PIXI calculates the bounding box for it. We are working with bounding box. Invariant: maximal vTextureCoord multiplied by "filterArea.xy" is the real size of bounding box. Don't try to think about it: its like that because of performance reasons, its not logical in user-experience sense. Neither vTextureCoord dimensions, neither filterArea.xy are predictable, but they multiplication is what we need. Area can have padding, so please don't use it to get "displacement texture" coordinates or any second-hand textures you are adding to the shader, use "mappedMatrix" for it (see below) If you want to get the pixel coordinates, use "uniform filterArea", it will be passed to the filter automatically. uniform vec4 filterArea; ... vec2 pixelCoord = vTextureCoord * filterArea.xy; They are in pixels. That wont work if we want something like "fill the ellipse into a bounding box". So, lets pass dimensions too! PIXI doesnt do it automatically, we need manual fix: filter.apply = function(filterManager, input, output) { this.uniforms.dimensions[0] = input.sourceFrame.width this.uniforms.dimensions[1] = input.sourceFrame.height // draw the filter... filterManager.applyFilter(this, input, output); } Lets combine it in shader! uniform vec4 filterArea; uniform vec2 dimensions; ... vec2 pixelCoord = vTextureCoord * filterArea.xy; vec2 normalizedCoord = pixelCoord / dimensions; Here's the fiddle: https://jsfiddle.net/parsab1h/ . You can see that shader uses "map" and "unmap" to get to that pixel Now let's assume that you somehow need real coordinates on screen for that thing. You can use another component of filterArea, zw: uniform vec4 filterArea; ... vec2 screenCoord = (vTextureCoord * filterArea.xy + filterArea.zw); I dont have an example for that, but may be you need that value for something? Fitting problem Thanks to @adam13531 at github. One small problem: those values become wrong when PIXI tries to fit bounding box: here's the fiddle: http://jsfiddle.net/xbmhh207/1/ Please use this line to fix it: filter.autoFit = false; Bleeding problem Thanks to @bQvle The temporary textures that are used by FilterManager can have some bad pixels. It can bleed. For example, displacementSprite can look through the edge, try to move mouse at the bottom edge of http://pixijs.github.io/examples/#/filters/displacement-map.js. You see that transparent (black) zone, but it could be ANYTHING if it wasnt clamped. To make sure it doesnt happen in your case, please use clamping after you map coordinates: uniform vec4 filterClamp; vec2 pixelCoord = WE_CALCULATED_IT_SOMEHOW vec2 unmappedCoord = pixelCoord / filterArea.xy; vec2 clampedCoord = clamp(unmappedCoord, filterClamp.xy, filterClamp.zw); vec4 rgba = texture2D(uSampler, clampedCoord); Both FilterClamp and FilterArea are provided by FilterManager, you dont have to calculate pass it in "filter.apply", here's pixi code that takes care of that: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/managers/FilterManager.js#L297 OK, now we have "transparent" zone instead of random pixels. But what if we want it to be fit completely? displacementFilter.filterArea = app.screen; // not necessary, but I prefere to do it. displacementFilter.padding = 0; That'll do it. Why did I modify filterArea there, PIXI will "fit" it anyway, right? I dont want PIXI to have time calculating the bounds of container, because maggots are actually changing it, crawling in places that we dont see! No extra transparent space, and if you put it into http://pixijs.github.io/examples/#/filters/displacement-map.js , and you move mouse to bottom edge, you'll see the grass. Mapped matrix When you want to use extra texture to put in the filter, you need to position it as a sprite somewhere. We are working with sprite that is not renderable but exists in the stage. Its transformation matrix will be used to position your texture in the filter. Please use https://github.com/pixijs/pixi.js/blob/dev/src/filters/displacement/DisplacementFilter.js and http://pixijs.github.io/examples/#/filters/displacement-map.js as an example. Look for a mapped matrix: this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); maskMatrix is temporary transformation that you have to create for the filter, you dont need to fill it. Sprite has to be added into stage tree and positioned properly. You can use only texture that are not trimmed or cropped. If you want the texture to be repeated, like a fog, make sure it has pow2-dimensions, and specify it in baseTexture before its uploaded on GPU/rendered first time! texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; If you want to use an atlas texture as a secondary input for a filter, please wait for pixi-v5 or do it yourself. Add clamping uniforms, use them in shader and make better mapping in "filterMatrix"