Popular Content

Showing content with the highest reputation since 04/23/18 in all areas

  1. 24 points
    Hello, I thought to place this on the demos and projects thread, however I decided to post this here as it is more a topic for which framework to use and why. I was hired by an elite software development group at Sony Electronics to help them navigate through WebGL to build a pipeline to deliver content for the South By Southwest convention and to create a foundation to quickly develop games and online media for future projects. In short, I was tasked to escape the limitations of 2D media and help Sony move forward into 3D content taking advantage of the WebGL rendering standards. This was no esay task, as I was hired Dec. 11th, and was given a hard deadline of March 5 to deliver 2 multiplayer games which were to be the focus of Sony's booth at SXSW in Austin Texas. But first I had to run a quick evaluation and convince a very proficient team of Engineers which framework was the best fit for Sony to invest considerable resources into for SXSW and which was the right coice to take them into future projects. Yhis wa a huge consideration as the WebGL framework which was to be chosen was to play a much greater role at Sony Electronics considering the group I was assigned to works well ahead of the rest of the industry... developing what most likely will be native intelligent applications on Sony devices (especially smartphones) in the near future. These are applications which benefit the consumer in making their day to day interactions simple and informative. Thus the WebGL framework to be chosen needed to be an element in displaying information as well as entertainment for a greater core technology which is developing daily in a unique tool set used by the software engineers to build applications which allows Sony to remain the leader not only in hardware technology, but in the applications which consumers want to use on Sony devices. But as I was working for Sony, I also had a greater task as there were existing expectations in developing a game on Sony devices which needed to be on par with what consumers already were experiencing with their Playstation consoles. As unrealistic as this might initially appear, that had to be the target as we couldn't take a step back from the quality and playability the consumer was already accustomed to. So back to the first task... selecting the WebGL framework for Sony Electronics to use moving forward. Rather than telling a story, I'll simply outline why there was little discussion as to which framework to choose. Initially Sony requested someone with Three.js experience as is more than often the case. So when they approached me for the position, I told them I would only consider the position if they were open to other frameworks as well. They were very forthcoming to open their minds to any framework as their goal was not political in any way - as they only cared about which framework was going to provide them with the best set of tools and features to meet their needs. And one might certainly assume that since Sony Playstation is in direct competition with Microsoft Xbox, and Microsoft is now providing the resources in house to develop babylon.js, that Sony Electronics might see a PR conflict in selecting babylon.js as their WebGL development framework. However, I'm proud to say that there was never a question from anyone at Sony. I was very impressed that their only goal was to select the very best tools for the development work, and to look beyond the perceived politics and to develop the very best applications for the consumer and to fulfill their obligations to their shareholders in building tools that consumers want on their smartphones and other electronic devices. So once again... Three.js vs. Babylon.js. This was a very short evaluation. What it came down to was that three.js had far more libraries and extensions - however, this was not the strength of three.js since there is no cohesive development cycles with three.js and although many libraries, tools, and extensions exist, more than often they are not maintained. So it was easy to demonstrate that practically any tool or extension we would require for the SXSW production would require myself or the team updating the extension or tool to be compatible with the other tools we might use on the project. This was due to the failings of the framework since each developer who writes an extension for three.js is writing for a specific compatibility for their own project needs... and not for the overall framework... as this is not within the scope of any developer or group of developers. Thus I find that it requires weeks if not months of of maintenance in three.js prior to building content, just to ensure compatibility between all of the tools and extensions needed to use for most projects. As for babylon.js, the wheel is not generally re-invented as it is with three.js, as most extensions are quickly absorbed into a cohesive framework quickly - provided they have universal appeal - and this integration ensures compatibility as there are fewer and fewer extensions to use, but instead an integrated set of tools which are thoroughly tested and used in production revealing any incompatibilities quickly. The bottom line is that there are no alpha, beta, and development cycles in three.js, thus no stable releases. Whereas the opposite exists with babylon.js. There is a cohesive development of the tools, and Sony is smart enough to see beyond the politics and to realize that having Microsoft support the development of babylon.js is a huge bonus for an open source framework. And if anyone had to choose a company to support the development of a WebGL or any framework, who better than Microsoft? With practically every other useful WebGL framework in existence spawned by MIT, most all are barely useful at best. And why would anyone pay to use a limited WebGL framework such as PlayCanvas when Babylon.js is far more functional, stable, and free? This baffles me and most anyone who chooses one project using babylon.js. The only argument against babylon.js is that the development of the framework is now supported in house by Microsoft. But for myself and others, this is a positive, not a negative. I've been assured by the creators and lead developers of babylon.js that they have secured an agreement with Microsoft ensuring the framework remain open source and free. This ensures that anyone is able to contribute and review all code in the framework, and that it remains in the public domain. Sony gets this and we quickly moved forward adopting babylon.js as the WebGL framework within at least one division of Sony Electronics. At the end of this post I'll provide a link on youtube to a news report of not only the games we built for SXSW, but the exciting new technology on built on Sony phones which uses the phones camera to capture a hight resolution (yet optimized) 3D scan of a person's head. This is only a prototype today, but will be a native app on Sony phones in the future. So our task was not only to develop multiplayer games of 15+ players simultaneous in real-time, but to have a continuous game which adds a new player as people come through the booth and using a Sony phone, has their head scanned. This was an additional challenge, and I must say that I was very fortunate to work with a group of extremely talented software engineers. The team at Sony is the best of the best, I must say. All in all, it was an easy choice in choosing babylon.js for the WebGL framework at Sony Electronics in San Diego. Below is a news report from SXSW which shows the new scanning technoogy in use, as well as a brief example of one of the games on the large booth screen. And using Electron (a stand-alone version of Chromium), I was able to render 15 high resolution scanned heads, vehicles for each head, animation on each vehicle, particles on each vehicle, and many more animations, collisions, and effects without any limitations on the game - all running at approx. 40 fps. The highlight of the show was when the officers from Sony Japan came through the booth... which are the real people we work for... gave their thumbs up, as they were very happy with hat we achieved in such a short time. And these were the people who wanted to see graphics and playability comparable to what the Playstation delivered. And they approved. Link: Thanks to babylon.js. DB
  2. 24 points

    Babylon.js v3.2 is out

    It's celebration time! I'm so thrilled to announce that Babylon.js v3.2 is now out. Once again this could not have being possible without all of you (contributors, testers, bug hunters, doc writers)! Thanks folks! We have a wonderful vibrant community. So feel proud, share it, love it, use it Here is the release notes: http://doc.babylonjs.com/whats-new The blog will it the social network at 10am PST! And the announcement video:
  3. 18 points

    Babylon.js v3.3 is out!!!!

    We did it guys!!! Let's share the love: Feel free to retweet as much as you can!!!
  4. 15 points

    I Love This Forum

    Hey Devs and All, I'm just feeling a bit sentimental about how far this forum has come the past 4 years. @Deltakosh and @davrous ( + others) have given us a creative outlet that has turned into a new frontier. I just wanted to say how much I appreciate that I am able to come to a place that provides me not only technical advice, but I've made many new friends as well. Much love to you all. DB
  5. 13 points

    Web Game Editor (MMORPG)

    Hello, I'm proud to talk about version 2 of my MMORPG editor (FR and ENG) that I renamed to "Web Game Editor" instead of "HeroonEngine" which was a name that looked too much like another existing editor. This version 2 comes with a new, more modern, community-based website. It will be possible to find a manual and video tutorials for getting started, as well as a shop and a forum (FR and ENG). The editor has undergone many improvements, new features and various fixes to make it more stable, more functional and more successful. Some things have been totally rewritten. It will come with a small Integer demo that contains two terrain and plenty of media on offer. I should hopefully release version 2 in the month and make an announcement of its release. For the moment I present it here. I have been working on this editor for years since BabylonJS was born. The editor has been renamed 4 times and rewritten 3 times totally and this name is the last change. Content and features: Here is some screenshot:
  6. 13 points
    Hi Everyone, I recently launched a preview version of my game made with BJS, and you can try it here. It's a 3d billiards game, but currently only Snooker available in this preview version. Hope you'll like it, and have fun. It currently supports these browsers on desktop: Firefox, Chrome, Safari and Edge. (To BJS team: I have added a "powered by babylon.js" in the 'about' page of the game, please let me know if it is allowed to use your logo, and if I have used the right logo, since I just grabbed it from your home page, and converted to png.)
  7. 11 points

    Inspector v2.0

    Hey team!!! I'm so happy to start sharing what I was working on for some times: https://medium.com/@babylonjs/dev-log-creating-the-new-inspector-b15c50900205 I hope you like it as much as I like working on it This is the repo issue associated with it: https://github.com/BabylonJS/Babylon.js/issues/5415 I plan to merge it to master probably this Monday
  8. 11 points
    Cryptovoxels is my ethereum virtual world. You can buy parcels of land in the world, then build shops and stores using the in world voxel tools. I started this project in babylon.js about 3 months ago and sold the first parcels of land last week. A video of the editing tools: The world is multiuser, I use websockets + a node.js server (using babylon on the server side) so that you can see other players as they explore the world. The voxel engine uses a greedy mesher with ambient occlusion to generate the meshes, and then a custom fragment shader to do the texture lookup in a texture atlas. The performance is really good on mobile, and it works well in VR as well (mobile VR and desktop). Babylon.js has been really awesome to work with, the typescript bindings are great and the playground has helped me out heaps. I also created a .docset file for browsing the documentation using Dash on os x. Glad to be part of babylon.js community!
  9. 11 points
    Here's a video I made that shows the process of using mocap data in a 3D web-page. Basically I did this: Used Perception Neuron suit to mocap dance move 3D scanned in my mate Used Blender to create avatar from scan and apply mocap dance Used CLO3D to add clothing Published on web using Babylon.js The live demo is at https://punkoffice.com/hype
  10. 11 points

    New GUI control: The Grid

    Hey guys!!! I'm glad to announce the availability of a new container for GUI: The grid Doc here: http://doc.babylonjs.com/how_to/gui#grid With this new tool, it's gonna be easier than ever to build complex UI
  11. 10 points
    Awesome HTML5Dev community..: BABYLONJS on STEAM!!! Appreciation for BABYLONJS and HTML5GAMEDEVS ... special thanks: The game is called BOXiGON: https://store.steampowered.com/app/842490/BOXiGON/ GOAL: the entire purpose is to TEST THE HTML5 MARKETPLACE. Including: - attempt at FaceBook "Instant" - "MS App Store". - and braving the "HTML5~Portal~Jungle"!!! PURPOSE: figure out the "3DWebPipeline" then BabylonJS (Cinematics) "Episodic Visual Novels" - ready to roll. Post here if you have questions or comments. BABYLONJS TEAM Thank you,
  12. 10 points

    AmmoJS support

    Hey, AmmoJS physics plugin has been added to Babylon preview. It should work well with composite meshes which we've had trouble with in the past with other engines. Let me know if you find any issues or have any feedback. Note: Support for motors, soft bodies, other ammo specific features are not yet supported so yell if you need anything specific for your project. vid.mp4 Examples: Basic impostors: https://playground.babylonjs.com/#7149G4#31 Loading mesh and colliders from file: https://playground.babylonjs.com/#66PS52 Loading and adding colliders manually in Babylon: https://playground.babylonjs.com/#FD65RR Loading and adding collider with joints and pointer interactions: https://playground.babylonjs.com/#DGEP8N WebVR grabbing and throwing: https://playground.babylonjs.com/#ZNX043#1 Docs: https://doc.babylonjs.com/how_to/using_the_physics_engine
  13. 10 points
    Hi Babylon.js community, It is my pleasure to announce BabylonCpp, a port of Babylon.js to C++, facilitating the creation of lightweight, cross-platform 3D games and applications with native performance. This port is a manual translation from the thousands and thousands of lines of Babylon.js TypeScript code into C/C++. Some history In 2015, I was looking for an interesting pet project. Due to my interest in 3D and modern C++, I stumbled upon Babylon 3D (C#/native port). I used this project as a starting point for mine and started updating the code with the latest code of Babylon.js. In beginning of 2017 - after a long time of porting, frustration and testing - I decided to publish the code on GitHub. Since then I kept updating the code and adding examples on daily basis. The Good TypeScript makes it really easy to port to C/C++ compared to JavaScript. For most parts, it is basically copying the code, updating to the proper syntax and updating the header. To get a good overview of the current state of the project I refer to the screenshots on the samples page. Not really a surprise, but if you look at the samples code you will see that the API looks very similar to the one of Babylon.js. Not all functionality is supported yet, but this a work in progress. I am really pleased with the performance of Babylon.js and the speedup of BabylonCpp. I am aware that I am comparing apples and oranges but I can give you some numbers. On my Intel NUC NUC7i5BNHX1 (Intel Iris Plus Graphics 640 GPU) I am getting the following numbers for the relatively simple Grid material example for a resolution 1680x1050 on Fedora 28: Babylon.js engine (v3.3.0-rc.3), Firefox 62.0: +/- 15% fluctuating CPU load, 270 MB RAM usage, fluctuating fps between 45-60 fps BabylonCpp (library size is 7.6 MB): constant 2% CPU load, 16 MB RAM usage, constant frame rate of 60 fps Some possible use cases of BabylonCpp include: Native apps development on iOS, Android Using the library as a WebAssembly module Using the library in existing desktop applications or integrating third-party libraries (i.e. Recast & Detour, Bullet Physics engine, etc.) Technical exploration (i.e. testing functionality that is in OpenGL and not yet in WebGL, supporting Vulkan API) The bad Most of the time goes into keeping up with all the Babylon.js code changes. Every month I take a snapshot of the latest code and port the changes into my version. As a result, the code is always very up-to-date but code on which people are still working or that might be thrown away in later versions is also integrated. An alternative I am going to follow for Babylon.js 3.3 is sticking with the stable version and focus mainly on features and stability. Porting will be done in a branches and less frequently. Not all code can be easily ported. For instance, C++ does not have reflection. There are third-party libraries available to support this, but this means introducing a new dependency. ...and the Ugly Linux is my main development platform. The code compiles on Windows (MSVC 2017) and OS X but is not really tested and buggy. On Linux I am also getting different behaviour between the debug and the release version. So the library is for moment only really usable on Linux in debug mode... Looking forward to hear what you think about the project or where you want to use it. If you have some suggestions for improvement or want to contribute or help resolving some of the issues described above feel free to contact me any time or let them know in this forum, it certainly would help a lot! Cheers, Sam
  14. 10 points

    New examples tab in documentation

    Hello team! I'm glad to announce the availability of the new Examples tab: http://doc.babylonjs.com/examples/ The goal is to present useful PG in a filterable way. Every example will open the PG in the right iframe and you can then click on edit to see it directly in the Playground. If you want to add more please just update this file: https://github.com/BabylonJS/Documentation/blob/master/examples/list.json Icons are saved here: https://github.com/BabylonJS/Documentation/tree/master/examples/icons and must be 125x125 images Hope you will find it useful!
  15. 9 points
    Hey, Gizmo's (position, rotation, scale, bounding box) and Mesh behaviors (pointerDrag, sixDofDrag) have been added to the latest Babylon preview. Gizmo docs Mesh behaviors docs GizmoManager playground GLTF bounding box playground Please let me know if you have any feedback. Thanks! 2018-07-06_10-08-12.mp4 2018-07-06_10-11-54.mp4
  16. 9 points

    BabylonJS Editor V2

    Hello awsome community! The BabylonJS Editor V2 is now available and online! It comes with a web version and a native desktop application (Electron)! From the V1, this new editor comes with a better user interface and more tools to write less, less, less lines of code Demo This demo video shows a project 100% made inside the editor. It includes custom scripts written using TypeScript, path finding, custom post-process and custom animations Features Create and edit particle systems Create and edit animations Create and edit lens flares systems Create and edit physics states on meshes Create and edit materials (including materials library) Add and edit sounds Add and edit textures (including render target textures & procedural textures) Save projects on OneDrive / local with Electron Deploy project template on OneDrive / local with Electron Scene graph view Create and edit custom post-process Create and edit custom materials Attach custom scripts (JavaScript and TypeScript) to your objects Test your scenes with debug support Video tutorials The documentation is available in the BabylonJS Documentation but now comes with videos to illustrate the written documentation: https://www.youtube.com/channel/UCNogU8tcA5IegFvMwE2Rckw/playlists Some links Full documentation: http://doc.babylonjs.com/resources/ Editor: http://editor.babylonjs.com/ Desktop Application: http://doc.babylonjs.com/resources/getting_started Git Repository: https://github.com/BabylonJS/Editor Conclusion If you encounter a bug, don't hesitate to report in the forum and I'll make my best to resolve it. Thanks for being BabylonJS users. Hope you'll like using this editor
  17. 9 points

    Deltakosh out for 2 weeks

    Hey team! I'll be out for two weeks going to some needed vacations Do not expect any answers from me during this timeframe See you all in 2 weeks!!
  18. 9 points
    Hello. I'm working on a fighter game, and while it's not finished yet, you can enjoy it ahead of time via video, which is open source, and I'll post its github address when I finish the first phase. //On October 8, github address:https://github.com/renjianfeng/flightSimulator github.io:https://renjianfeng.github.io/flightSimulator/released/index.html update:On October 21, new video:
  19. 9 points

    The Earth Magnetic Field

    This is an scene showing the earth magnetic field. Link: EarthMagneticField The buttons on the right:
  20. 9 points

    Bezier Surface

    I was inspired by this topic to produce a bezier surface. The surface is not a mesh but a logical object that contains the data from which you can build the mesh using a ribbon. I restricted myself to a bicubic surface. Over the next weeks I will add some other methods and who know perhaps try to write a typescript version and PR it. This PG animates the surface by changing the control points, https://www.babylonjs-playground.com/#KT9EE7#1 In this PG you can move the control points (purple spheres) in the direction of the chosen axis. Click on a control to move the axes to that control, click on a cone to set the axis along which you move the control ( done by giving mesh behaviours a go) then drag the control https://www.babylonjs-playground.com/#KT9EE7#2 Work still in progress. have fun.
  21. 9 points

    Dancing in tracksuit pants

    Another demo with fabric animation. Just some dude who's doing some cool dance moves. https://punkoffice.com/tracksuit/
  22. 9 points

    Playground saved scenes hosed

    Thank you guys..I was a fun wake up for me 6am: my inbox full of alerts, 2 issues created on the repo. I jumped naked from my bed to my office 6:30am: Issue seems to come from the snippet server not able to communicate anymore with our azure SQL server. 6:45am: Ok the SQL server is forcefully refusing all incoming requests. 7am: Even with no firewall, all incoming connections are rejected. Opening a ticket. I have to pay to get support. Closing the ticket 8am: My daughter woke up. I need to dress and to stop my investigation but seems related to a hard limit linked to the subscription I'm using (Free) 9am: Ok my daughter is at school, let's go back to business 9:15am: Bumping the SQL Server instance to a bigger subscription. Problem solved
  23. 9 points

    More examples for PG

    Hey team! Did you see that ?
  24. 9 points

    //Build 2018

    Hello team! I won't be able to help on the forum until this Thursday as I will be with @davrous, @Sebavan and @trevordev on the Babylon.js booth at Build 2018 (Seattle) If by chance you are around please come and say hi:)
  25. 9 points

    //Build 2018

    Some pictures of the booth:
  26. 8 points


    I keep changing my avatar. A character defect? 🤒 Anyway I created it using BJS: https://www.babylonjs-playground.com/#SVZL1I#3 https://www.babylonjs-playground.com/#SVZL1I#4 I needed to take a break from long-term projects, so I did this instant gratification stuff. 😁 Take a look, they're short, fun, & tinkerable!
  27. 8 points
    The Babylon Toolkit Getting Started Video
  28. 8 points
    The Babylon field editor has gone into version 2.0 and is more stable. Many corrections, optimizations and improvements have been made. The interface has also undergone some small modifications with some patches. What you can do with the TerrainEditor : Create a new terrain with 5 sizes to choose from or load a recording. Rename or copy a loaded terrain or delete one. Create mountains or dig lakes, rivers. Smooth the terrain to soften your mountains or rivers. Raise trays rather than mountains. Paint up to 8 different diffuse textures for maximum terrain customization. (Thanks @Luaacro for the mixMaterial) Create ramps on the highlands or mountains to access your characters. Create holes in the ground to enter the basement, cellar / cellar ... Export the land in babylon format with all the textures used. An example file and html test is exported with. Export file meshes separate added in the terrain. Import and add meshes in the terrain Edit meshes with Inspector of properties Add water areas in the scene Add collision boxs in the terrain Add sound and music areas in the terrain Add portals in the terrain Each tool can be controlled to have more or less radius of your brush. You can choose the type of brush to have different shapes to paint textures. The brush is visible by a red allo on the floor following your mouse. Its radius defines what the brush will paint with precision. For texture paints, you can control the hardness and scale in addition to the radius of the brush. When raising mountains, you can control the maximum height limit of your mountains or the minimum limit if you dig. A grid allows you to see the sea level and is set to coordinate 0,0,0. This is useful when digging your rivers and lakes. You can save your work at any time and resume it on another day. When your field seems finished, you can export it for use in any project using the Babylon engine. Just take the hardware code of the export of the html file. I do not think that a publisher's documentation is necessary, but if you think you need it, leave me a message and I'll do one. But I think the editor is very easy to use. I hope this comprehensive field editor will help you. Do not hesitate to tell me if you have problems and tell me what you think, the improvements to make ... The publisher is open-source. You can download it on this repository The editor integrates a mini server to start it: https://bitbucket.org/JSbabylon/terraineditor/downloads/ Enjoy. Some screenshots:
  29. 8 points

    geometry Builder product design

    full design bu GeometryBuilder | size :GB model size = 50 kb with html - main .obj model size = 65 MB https://demos.5kb.me/Revival/index4.html
  30. 8 points

    Car Light Physics Engine

    Hi people, I'm currently investigating about some car games (car races in towns or on circuits or on mountain roads, etc). I know BJS can work great with some nice physics engine like Cannon, Oimo or Energy but I like to have lighter and more dedicated stuff when possible. That's why I took a look at this nice library : https://github.com/spacejack/carphysics2d There's a live demo here : http://www.spacejack.ca/projects/carphysics2d/ Use up and down arrow to push the gas throttle or the brake, the left and right arrow to steer the wheels and the space bar to pull the e-brake... drifting is so fun. Well, this is a light 2D library dedicated only to the car physics : you know, all the stuff about mass transfert on the wheel axis, acceleration, frictions, tire gripping, etc, etc. It's really light : the commented and un-compressed part of the code about the physics themselves is about 100 LOC only. So I just had a quick try to adjust it to work with a BJS example. This is not a real port, not even an adaptation in some BJS-esque style, just a plug to make it work with some 3D objects instead of 2D ones. Of course, I had to add some tiny logic to have 4 wheels rotating according to the current car speed. Here's a first quick and dirty proto : http://jerome.bousquie.fr/BJS/test/carSim1.html The car front is blue, the back is red. Up and Down arrow to speed up or to brake. Space bar to pull the e-brake. Just click once in the canvas before because the keyboard controls of the ArcRotateCamera have been disabled in order to be used as car controls instead. Note : the car can't drive backwards 😉 This could be proted, refactored in the BJS way and optimized then (added to my todo list).
  31. 7 points
    Hi all, I've created this sub-forum specifically for discussion about Facebook Instant Games. Use it to chat about the API, ask questions and post links to tutorials or code you've found useful. It doesn't matter what HTML5 game framework you're using (if any), but if you are using one, please say so in your post, so others can better help you. The FB API is the same regardless, but how you implement it is likely framework specific. This forum will be moderated by Facebook Instant Games staff where possible. Cheers, Rich
  32. 7 points

    Inspector v2.0 is ready for testing

    He is here and already deployed to sandbox and Playground Feel free to report any issue!
  33. 7 points
    I made a progress bar using two rectangles, a container and a text block, here I thought I would share because I am very proud of myself ! You can find the code to run it just here: https://playground.babylonjs.com/ts.html#P3XLK9
  34. 7 points

    Web Game Editor (MMORPG Editor)

    Hello, I announce the release of Web Game Editor. More info here: http://www.html5gamedevs.com/topic/39884-web-game-editor-mmorpg/ Link of the site:=> http://www.web-game-editor.actifgames.com/ To download the editor you must be registered on the site. Feel free to consult the manual and tutorials videos or ask questions on the forum. You welcome. I hope you like this new version. There is still work to be done, but this version is more accomplished than the previous ones. Be sure that I will make every effort to make this editor as functional as possible with regular updates. Have fun. Some pictures:
  35. 7 points

    [WIP] Classic Space Adventure

    I have created a platform game in 2D for the desktop that is based on the Classic Space theme by LEGO. It is still under testing so I will make a new post later on when it is finished, but here is a little preview of the game. It is written from scratch in Javascript without using any libraries (except for jQuery sometimes), and since it is quite big it probably takes more then 5 hours to finish. In total there are 6 bosses and about 50 different enemies. The graphical style is a mix between Nintendo 8-bit and C64. I also wonder if you got any tips on how I can spread this game to a bigger audience?
  36. 7 points

    Combine Babylon.js with Pixi.js

    Hello, * Introducing a bit of pixi.js: pixi.js has full webgl support, a best framework for 2D game with rendering very fast. Would be great if you want make UI game with pixi.js and combine with babylon.js. (Will I get paid for advertising? NO..🤣) Demo babylon.js + pixi.js : https://jsfiddle.net/y5q7Lb1v/21/ This is a perfect duo for your web game world, which you can create high quality games. 😁 Moreover, you can also use GSAP for creating high-performance animations. Demo babylon.js + pixi.js + GSAP lib: https://jsfiddle.net/y5q7Lb1v/28/
  37. 7 points

    My Phaser Story

    Over a year and a half ago, I started to learn how to program while using Phaser. Since then I've released a number of mobile apps that have been commercially successful and allowed me to work from home and basically do anything I want with my life. Since I've had a blast working with Phaser, had lots of help from the community, and have anxiously waited for every Phaser newsletter since I started using it, I figured I should share my little story with you guys. I'm one of the few who uses Phaser solely for mobile apps, but I never actually planned on doing that. 2 years ago my friend and I were developing a language learning app focused on writing the alphabet of non-latin based languages. We were using html5 canvas for our writing recognition using a custom framework my friend made and I wanted to add some cool effects to the writing strokes. But had no idea how to do it and at the time, I couldn't print a "Hello World" from memory! Looking for a solution, I stumbled upon Phaser and slowly learned how to program while making a bunch of little prototypes. I never actually intended to make a commercial game with it though. Fast forward a few months and my friend, the programmer of the writing app, got married and took a month off. I decided to spend that month making a small language learning game with Phaser. I made a very simple game where you learn numbers and colors and I was like... you know what? I'm just gonna release this even though people probably won't like it and there's almost no content. I made one app for Japanese and copied everything over and made one for Korean as well. Within a month both of them were getting ~1,500 downloads a day, which was better than our writing apps. I was pretty surprised because the game was clearly not finished, and you could blow through all the content within 30 minutes, but the vast majority of people only had positive things to say about it. Since Phaser was the only thing I had experience in and I loved working with it, I continued to use Phaser even though I had no plans on doing anything with web. I then spent the next 4 months adding a lot more categories, hired professional voice actors to voice all the words, and added more languages, and the app really took off after that. The rest is history. From lurking on this forum for quite a while, I've noticed that finances comes up quite a bit. What I did, which will work if you don't have any location-specific responsibilities, would be to move to a very cheap place, go abroad if you are in a developed country. I saved up $10k and moved to China & Taiwan for about 2 years, spending an average $60 - 120 / month for rent. This gave me a 1.5 year runway whereas if I stayed in the states, that money would have barely lasted me 5 months with the same lifestyle I enjoyed in China & Taiwan. This was crucial because I was able to completely focus on learning and developing, ignore every part-time job offer that came up, and still being able to live a full life of traveling, eating out, extracurricular activities, and having fun every weekend, which is crucial for efficiency. And that's my Phaser story. Thanks to Rich for an excellent product, without it, maybe I wouldn't have learned how to program. iOS and Android links: https://jernung.com/infinite
  38. 7 points
    Hi there! I've created a detailed tutorial on how to create a full cross-platforms WebGL game (using Babylon.js of course) from mobile touch devices, to desktop up to VR! https://www.davrous.com/2018/08/14/using-webgl-and-pwa-to-build-an-adaptative-game-for-touch-mouse-and-vr-devices/ I've tried to create small samples for each section often pointing to the playground to explain you how to do each part. I hope it will help people discovering some Babylon.js principles and will also generate some forks to create other fun 3d experiences! At last, I'm explaining how to manage properly offline via a Service Worker coming from PWA coupled with our embedded IndexedDB layer. As a bonus, you'll discover how to push your game to the Microsoft Store Hope you'll like it! Cheers, David
  39. 7 points

    Please read FIRST

    This forum is used to ask questions about the framework's features, and about subjects you don't quite understand. Don't know how to use CSG? Don't understand what a physics body impostor is? this is the place for you. Please don't forget: Show us what you did so far. We are all very happy to help (always), but we won't do your homework for you. Start a playground, share a link! A functional demo (with a question at the end) will give everyone the chance to understand what you mean. If you share an external link, have the babylon.max.js version available on the server. Otherwise it is impossible to debug. If this is not possible - share some code. Unless it is a philosophical question about the life, Babylon.js and everything, code is the right way to go. Try searching the forum before submitting a question. Chances are, this question was already asked by a different user and was already answers. Pro tip - the forum's search (thou revamped) misses topics from time to time. Try searching using google/bing/duckduckgo/altavista, adding "babylon.js" before your question. If you have your question answered, mark it as solved using a tag. This will surely help other people in the future! Some general Guidelines: Be nice! Don't expect anyone to help you just because you have a problem. Don't forget - this is an open source framework. We are all working on it on our spare time. Please try being clear! We are all international users, English is not always our mother tongue. We do understand that! Liked a post? Press the like button! It will only make the other side feel proud. It is also a way for you to bookmark answers you liked. If you have any personal questions, contact one of the forum moderators. Anything else belong in the forum for everyone to learn from! Don't be afraid to make mistakes or to post questions you feel are silly. They are sometimes the most important ones!
  40. 7 points
    I've created a Phaser3 game template example, it's available on GitHub here: GitHub: https://github.com/BdR76/Phaser3-example-game Play demo: Phaser3 example game This is a Phaser v3 example game template, it's intended to show the structure of a typical Phaser3 game and using some of the key features of Phaser. It shows how to use separate scenes, a simple but effective loading bar, sprite atlas loading, sprite animation, buttons similar to Phaser v2 and more. It's a bare minimum game, a starting point of sorts. I hope it's useful for someone just starting out with Phaser development. Have fun with it let me know if you have any improvements. (Btw the only thing still missing is scaling or a scale manager, I'll add that at a later time)
  41. 7 points


    Hi everyone, Been away for a while but I've kept practicing with Babylon. This is at a prototype phase with no 3d/sound/artwork. Just pure javascript code for now. Trying to get the mechanics working properly first. One question I have is how the projectile rotationQuaternion is cloned. It seems to follow the lookAt() quaternion from the origin tower even after the quaternion is cloned. How can I ensure that the rotationQuaternion is not linked to the original quaternion it is taken from? This causes problems when a tower shoots a projectile and then rotates to target another enemy. The previously mentioned projectile rotates in midair still copying the rotation of the tower. Here's the relevant code taken from line 53 of https://github.com/xtreemze/defend/blob/master/src/js/main/projectiles.ts const clonedRotation = originMesh.rotationQuaternion.clone(); clonedRotation.normalize(); projectile.rotationQuaternion.copyFrom(clonedRotation); Comments, questions are welcome! The project is hosted here with open source: https://github.com/xtreemze/defend View the project here: https://xtreemze.github.io/defend
  42. 7 points

    TYPESCRIPT in Playground

  43. 7 points
    This happens a lot in Melbourne, Australia too. webGL jobs always mention three.js. Its simply because that's the only webGL framework they've heard of. If I'm on a project and no work, or minimal work has been done with the three.js framework I can always convince them to switch to babylon.js. For the record, I actually started with three.js and it got frustrating. Parts of it felt incomplete and broken, so I switched to babylon.js and never looked back.
  44. 7 points


    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); }
  45. 6 points


    https://en.m.wikipedia.org/wiki/BabylonJS EDIT 17 Nov 2018 On hold again as it was put on by a banned user. EDIt 1 Dec 2018 Back on line again - hope it holds this time
  46. 6 points

    draw font inside of shader

  47. 6 points
    Jacky Rusly

    Multiplayer RPG Online Demo

    Built With Node.js (Express.js) Socket.io Parcel Demo Youtube Demo Heroku (Please wait a minute for server to wake up) See Code
  48. 6 points

    [Phaser 2] Mini MrDriller

    Good news everyone! Recently our team was able to collaborate with guys from Bandai Namco (creators of famous game series like Pacman, DragonBall , Tekken and many more). We have created a web version of a good ol' arcade game MrDriller. Please take a look and let me know what do you think - https://robowhale.com/games/mini-mrdriller/
  49. 6 points

    Spirographic Particles

    Following an idea by @Wingnut here is an attempt at generating particles (Wingys addition) along a type of spirograph type of generator. I say 'type of' since I am not entirely sure I have the maths correct for multiple circles, however the patterns are pretty https://www.babylonjs-playground.com/#1BTGPV#15
  50. 6 points

    Babylon Toolkit Developer Portal

    Yo @Deltakosh and @Sebavan ... The first beta of the Babylon Toolkit Developer Portal (Also Available From Toolkit Menu: Developer Portal) website is now up. This site will be dedicated to babylon toolkit web game development. It is where i will HOST toolkit game projects, store developer files and training videos and maintain a Babylon Toolkit Developer Blog specifically for for toolkit features and demos. Check it out, tell me what you think