Popular Content

Showing most liked content since 07/17/2017 in all areas

  1. 17 likes
    We did it again Congrats to all our great community, we've just shipped Babylon.js v3.0: https://github.com/BabylonJS/Babylon.js/releases/tag/v3.0.0 I hope you'll like it! And the blog post: https://github.com/BabylonJS/Babylon.js/releases/tag/v3.0.7
  2. 12 likes
    Hey team! we were clearly heads down working on 3.0. Now that we successfully shipped it I would like to get the help of our wonderful community. I would like to improve the content of our documentation. If you go there: https://github.com/BabylonJS/Documentation/issues you will find a list of issues related to the doc. There are 2 kinds of issues: Missing documentation: These issues are used to flag a missing tutorial / documentation / overview Incomplete documentation: These issues flag articles / topics where we consider we should add more info If you want to help, you can: Create more issues to help identify what is missing / incomplete / unclear / using bad english / whatever could be wrong Take one issue and fix it: My favorite one Pick an issue, read this small tutorial and contribute to the best doc ever made for a 3d engine One of the goal of the 3.1 will be to add helpers everywhere to make common tasks even simpler. And I'm convinced that doc will be an important part of this simplification as well. Thanks a LOT
  3. 10 likes
    Hi, An interpretation of Picasso's Guernica; my tribute to you Frenchmen! Press "Start Animation".
  4. 10 likes
    Hey all, this topic is to help you contribute to the documentation. This is where all newcomers will go and it has to be great (as far as possible ) Contributing - The easy way To update an existing page, just head to https://github.com/BabylonJS/Documentation/tree/master/content This folder is the root of all static content used by the site itself. Then pick a page you want to update and select the edit button: You can then use the great in-browser editor to do your update. When done, just select "Create a new branch for this commit and start a pull request" and hit Propose file change. This will alert the admins who will be able to review or comment your changes Going further You can also go further by cloning the repo in order to work on your own copy before sending all changes that you did to the main repo. To do so, you first have to fork it: You will then see a new repo (a fork) on your own space. Please note the clone url just there: Then you have to clone the fork on your disk. I'm using the great TortoiseGit to work with Git but you can use any compatible tool obviously: - Install GIT: http://www.git-scm.com/downloads - Install TortoiseGIT: https://code.google.com/p/tortoisegit/wiki/Download - Install Node.js (the documentation site runs on node.js): https://nodejs.org/download/ Once everything installed, pick an empty folder, right-click on it and select "Git clone": Use the saved clone url you just grabbed before and hit OK: Your setup is now done. Congratulations Please now open a Node.js command prompt: You will have there exactly the same folder structure as the original repository. To get all the tools used by the site, just execute the following command line: "npm install" (just do it once) You can then start the server with "grunt serve". This will launch a local server and a bunch of tools that will "compile" the changes you'll do. To change any file just head to /content and make your changes on .md files (I'm using Visual Studio Code which is a great editor that works on Mac/Unix and Windows). You changes will be automatically done and visible on http://localhost:3000 Adding new content Now that everything is working well, you may want to add new content. To do so, please open /data/statics.json: This file is a catalog where you can reference new files added to the repo. Sending pull request Once you're done and ready to send a pull request, just right-click again in your "documentation" folder and do the following: - Git Commit->master: - TortoiseGit/Push (still on the right-click menu): - Create a pull request: Now you did your job It is then up to me (or any admins) to validate it If you have any issue, please use this topic to ask your questions.
  5. 8 likes
    Hello, this is a project for my college. It's a simple multiplayer game building with Babylon.js 3.0 and Matterjs. http://overbount.me I hope you enjoy it. Use W A S D to move and left click to shoot. (There might be some lag issue) Thank you.
  6. This post cannot be displayed because it is in a forum which requires at least 5 posts to view.
  7. 5 likes
    I've already partly answered to this question here: https://news.ycombinator.com/item?id=9335460 "...First of all, babylon.js for instance, has been made specifically for the web. It's been tested on all browsers & on as much mobile devices as possible. Our shaders architecture has been made for that: to run on as much platforms as possible, mobile included. We're also spending a lot of time optimizing the performance for the web browsers and we're taking into account some of its specifics: offline via IDB, support for multi-touches (Touch & Pointer Events), streaming of assets, GC friendly, etc. We have plenty of tools to help you testing the behavior of our engine and your code in the targeted env, the web: the sandbox tool, the debug layer, emitting user marks for F12 tools. We even have something we’re very proud of, our playground: http://www.babylonjs-playground.com/. Test & debug your code directly in the browser. Learn by experimenting in the target platform. Moreover, babylon.js is free & open-source. You can debug your game and our engine directly in the browser. You can tune our engine to your needs if wanted as you have access to the source code, fork it and do whatever you want with it. You’ll also write the logic of your code in pure JS (or any great compiler like TypeScript or CofeeScript). Babylon.js offers then a pure web experience. You can customize everything you want, handle the UI yourself with the ton of existing libraries, add some cool CSS features on top of it, mix it with SVG. Well, it is the web. Last but not least, we have almost finished our Unity exporter to Babylon.js that will dump all the graphics & sounds assets from the Unity scene to our .babylon format. It even seems much more efficient that the Unity 5 export. Well, you see that this is a completely different philosophy. On the other hand, Unity 5 benefits from a huge community & assets. But creating a simple scene with a couple of meshes could take several minutes to export to WebGL and create up to 100MB of JS! And it's a very specific JS based on asm.js that can't be read by human nor modified. Plus it will only run correctly on Firefox (soon on Spartan too). At last, you will have to write the logic of your game in C#. But it’s a real great option for games developers that don’t master the beauty of the web. Unity is doing everything for them. Conclusion: Unity 5 targets people with games already built for mobiles and will offer a very specific WebGL option. It's closed source. Babylon.js targets web games developers that build games specifically for this platform. It's free & open-source." Moreover, I'd add that the WebGL export is currently based on asm.js which is only fully supported by Firefox and MS Edge. This means that targetting mobile is a no-go. In the future, they should use WebAssembly. WebAssembly can potentially used by Babylon.js in the future by adding some annotation to TypeScript for instance. Talking about WebGL 2.0, yes this is in our roadmap for Babylon.js in a futur major release. But WebGL 2.0 support will be limited. Again, the main point of web technology is to target the most important number of platforms/users. David
  8. 5 likes
    Here is how I did it. I am fairly new to Phaser so take it with a grain of salt. In your update function: if (this.game.input.activePointer.isDown) { if (this.game.origDragPoint) { // move the camera by the amount the mouse has moved since last update this.game.camera.x += this.game.origDragPoint.x - this.game.input.activePointer.position.x; this.game.camera.y += this.game.origDragPoint.y - this.game.input.activePointer.position.y; } // set new drag origin to current position this.game.origDragPoint = this.game.input.activePointer.position.clone();}else { this.game.origDragPoint = null;}
  9. 4 likes
    Hey guys, My name is Mike and I'm from Korea. Me and 14 other guys are making a HTML5 MMORPG called "Mad World". Here's its trailer. [youtube]B9_5arnNDAw[/youtube] And here's rain animation The game has all the familiar features of MMORPGs but the combat is more face-paced. It has hand-drawn artstyle like you see here. I will be posting some updates here from now on, and maybe some development tips we learn along the way. We want to be a pioneer in the area HTML5 in Korea which is still very new in the country. We want to make it available worldwide by the end of 2018, so we still have a long way to go. Any feedback is welcome by the way. Thanks and let me know what you think of the game! For more information on the game, you can visit our website: www.jandisoft.com or follow us on Facebook Twitter Youtube
  10. 4 likes
    Hi. Here is an example of something you could use using arcade physics: The idea is to first draw any primitive shape you like using bitmapData and interpolation. The shapeData array can be modified to create any shape you like. Then in your plot function you evenly distribute dots (with physics) along your shape. Then you create three to four "mouseBodies" that follow your mouse and collide with the dots. this way you can determine how far off you are from the actual shape. The collision checks are then done and based upon which "mouseBody" is colliding, so you add or even subtract score (see example). Notice that the trail is drawn using rendertextures (example), but this is certainly not a must. You can also draw your mouse trail using graphics. You could also stick to rendertextures, but make your own sprite (simple gradient circle made in photoshop, 64x64) and replace it with the gameboy. You will probably have a nice looking cloud trail. A final note, the actual primitive shape can also be drawn as a polygon using graphics. These are all implementation details, but maybe it will give you more ideas for your own game...
  11. 4 likes
    Job done, pull requested! http://www.babylonjs-playground.com/#L5LTN3#1 I've animate what I call the solid version, but it seems that animation is not exported, here Blender viewport render: [edit] I'm a about to create a dedicated thread in demos & project [/edit] [edit2] hop! [/edit2]
  12. 4 likes
    I'm fully on the functional bandwagon, its a wonderful way to program. If you've ever experienced a race condition or problems with synchronising data structures then you'll know how painful they are. Functional is hardly a silver bullet here but if you follow along and do things properly with functional techniques then you rarely run in to these sort of difficult and time-consuming errors. At its essence functional program aims to eliminate (or reduce) transitional state, as an example, if you have a data structure representing a unit in your rts game then its likely you'll want to use bits and pieces of the full unit data in difference instance i.e. you'll want some of it for displaying an update view, you'll want some different bits of it to display in a tooltip, you'll want very different bits of it for when it attacks another unit. Functional languages force you to create transformation functions to change that data into what you want, the key here is that they force you to do it when you want it and get rid of it afterwards (JS doesn't force you at the language level but you can still use the theory, JS does have language support for most functional techniques making it a good candidate for writing in a functional style, it was designed this way too, not just a coincidence). By enforcing transforms to underlying data structures it pushes you down a few key avenues: * Each view on to the data is independent, they request data when they want it so that it is fresh, there are no syncing issues here, data is represented once (single source of truth) and can be minimally represented as your transforms can add specifics for their use-cases. * Changes to data are carefully managed (many functional languages enforce this with immutable data structures) so that it can become hard (or even impossible, depending on the language) to have data inconsistencies. * Race conditions aren't necessarily eliminated but as you're managing changes and actions in a single place its easy to manage things so you never hit a problem caused by it. You can't really do the above with OOP because OOP involves writing and creating objects (and classes usually) and having all this state hanging around, see the banana-gorilla-jungle explanation. Some of the most useful functional techniques can be adopted even if you're in an OOP world though. Creating pure, or referentially transparent, functions is a boon for developers. Pure functions take an input and produce an output based only on their inputs, they effectively do not touch the outside world, they are idempotent, i.e. you know that you will always get the same output given the same input/s. This means you can reason about what that function does, you can understand it fully by taking it in isolation, you don't have to understand the system around it to understand what it does. They become easily testable so any bug or error states can be discovered by automated unit tests but if one does sneak through your tests and you find you need to make changes later then you can do so easily because you know you won't create issues elsewhere in the code. This is absolutely golden. The downside is of course performance. For certain use-cases you're potentially running the same transforms multiple times when you don't need to i.e. being inefficient. Functional programming likes to do things on demand but games often want to work with an update loop as things are often changing very frequently so sometimes some transients states hanging around reduces load (at the expense of far greater complexity). This is the biggest problem I've faced for fast paced games using these techniques but you might be surprised at how far you can get and there are lots of techniques for improving this stuff without creating more state. The 2nd biggest problem is that many libraries out there don't want to play nicely with functional techniques, this isn't so much of a problem for the general web app/website world as there are numerous libraries out there for those use cases now but it is a problem for many games-related modules/libraries.
  13. 4 likes
    This worked for me! (typescript) it requires https://github.com/stackgl/headless-gl Bit hackish but it works also with collision. GLOBAL.window = {}; GLOBAL.window.addEventListener = () => {}; GLOBAL.navigator = {}; GLOBAL.document = {}; GLOBAL.document.addEventListener = () => {}; GLOBAL.window.setTimeout = setTimeout; export class HTMLElement { } var gl = require('gl')(10, 10, {}) var engine = new BABYLON.Engine({ getContext: function() { return gl; }, addEventListener: () => {} }); var scene = new BABYLON.Scene(engine); var scene.collisionsEnabled = true; var camera = new BABYLON.FreeCamera('camera', BABYLON.Vector3.Zero(), scene); var ground = BABYLON.Mesh.CreateGround('ground', 10, 10, 20, this.scene); engine.runRenderLoop(function() { scene.render(); });
  14. 3 likes
    Hi Folks, I've started a youtube series on game art direction. If your'e having trouble finding the right look for your game this might help! If you have a favorite concept or any feedback I'd love to hear it!
  15. 3 likes
    Hi all, We with my colegue decided to share texture generator node-js tool that we created. Its port of compresed texture generator script to node, so it can be used cross platform not just on win machines, also included in build scripts. NPM: https://www.npmjs.com/package/babylonjs-texture-generator GIT: https://github.com/evolution-gaming/babylonjs-texture-generator Feel free to post issues and suggestions on github. More information is located inside README.md file.
  16. 3 likes
    maybe custom material can help https://www.babylonjs-playground.com/#Y5IZCF#3 @rdzar @Sebavan you can put grid material shader in custommaterial diffuse method for have gird material with shadow
  17. 3 likes
    See if this helps. https://ssatguru.github.io/Vishva.ts/public_html/ A third person camera keys "a" and "d" rotates the character left and right , in other words rotates the character around y axis and the camera seems to follow. I say seem because that is not quite true. It is not the camera which follows the character but the character which follows the camera Rotate the camera and then rotate the character based on the camera rotation Here's the code https://github.com/ssatguru/Vishva.ts/blob/master/src/ts/component/CharacterControl.ts Here are the lines for rotation https://github.com/ssatguru/Vishva.ts/blob/master/src/ts/component/CharacterControl.ts#L262
  18. 3 likes
    I've finished porting my Snake Slider puzzle game using Phaser. >> Snake Slider playable demo << It's a unique sliding puzzle game. The goal is to move the green snake to the exit. You can slide any snake by dragging them by their head or tail. Use as few moves as possible to earn all three coins. There also are apples and mushrooms that will make the snakes longer or shorter, blocks to push around and locks to unlock. The game also features hand-drawn graphics and multi-language support. It's based on an older iPhone/Android game, this is the JavaScript version which is completely re-written. It's powered by Phaser and it's slightly improved compared to the older version; it has an animated tutorial hand, a visible cursor, sound effect when moving, and overall more animations (menus, buttons etc). Let me know what you think. Can you can solve all levels?
  19. 3 likes
    After many tests i do not know why isPointerBlocker not work. So your tip about register function onEnter and onOut is perfect. Now my code, makes my game GUI more user friendly let self = this; control.onPointerEnterObservable.add(function() { self.game.sceneManager.environment.ground.isPickable = false; }); control.onPointerOutObservable.add(function() { self.game.sceneManager.environment.ground.isPickable = true; }); Additionally I used your code from PG and it don't work too. Thanks @Wingnut
  20. 3 likes
    Answering myself: Blender has a "artistic color model" which is turned on by default. You can turn it off under Scene->ColorSettings->Display Device: None
  21. 3 likes
    I've been working on a fun project the last few weeks. I've created a "Build your own Kendall Jenner t-shirt" web page. This is in relation to the incident where she used shirts with famous bands on them, added pictures of her face then tried to sell them for twice as much. She's taken them down, but I've put up a webpage where you can make your own in 3D. http://kendallshirts.com The decals gave me some trouble. I'm using CreateScreenshotUsingRenderTarget to store the canvas content so it automatically generates a FB og:image file. The problem is that function does not handle transparency well. The result comes out looking messed up. As a workaround I make the textures alpha 1, screenshot, then put it back to transparent. Its so quick the user won't notice. I can't get this working in Firefox. The inspector says there are meshes in there, but for some reason they just don't show up. I can't get babylon v3.0 working either. The decals don't show up. This is just a quick demo so I didn't put any time into solving those problems. If anything seems broken, pls report here. Enjoy!
  22. 3 likes
    I've just updated BabylonHx repo on github https://github.com/vujadin/BabylonHx I've done quite a lot of work but there is a lot more to be done. Here's a little demo from BabylonHx-Next: http://babylonhx.com/next/ Things to be done: 1. Rendering pipelines (DefaultRenderingPipeline doesn't work, haven't tried others but I guess they don't work too) 2. Animations 3. Shadows 4. Tons of other things... I've dropped support for two Haxe libs that BHx was compatible before: Snow and NME (these aren't used by Haxe people that much anyway). So now BHx works only with Lime/OpenFL. This will make further work much easier. Right now only WebGL build is working. For anyone interested in getting involved - grab latest Haxe here and latest OpenFL(Lime) here and help me with BabylonHx-Next
  23. 3 likes
    Hello I have the plan to work on a headless version of babylon.js that could be used in this scenario: https://github.com/BabylonJS/Babylon.js/issues/2529
  24. This post cannot be displayed because it is in a forum which requires at least 5 posts to view.
  25. 3 likes
    What I will write here is how it works for me best - other people may have their own ways. It will be example of horizontal scrolling game and explanation will be applied to this type of game. Let's say we have basic resolution 800 x 600 and browser window is 1200 x 700. Grey rect is browser window and blue one is our basic game resolution. Besic resolution for me is mainly best resolution from game design point of view. As we are making side scroller, it is ok for us if player can see a little bit more or less to the right. On the other hand we have no extra content to display vertically. So, we want to fit our game into window height primarilly and see what happens to width. First, we calculate vertical scale: scaleY = window_height / game_height ... 700/600 = 1,1667 in our case, If we scaled game uniformly, what would be its scaled width? It would be 800 * scaleY = 800 * 1,1667 = 933 pixels. But window width is 1200 ... we want our uniformly scaled game to fill entire window, but if we scale 800 x 600 by 1,1667 we only get 933 x 700. So, we have to consider different game size than 800 x 600 to pass into Phaser. We know, we want to fill 1200 pixels wide window after 1,1667 scale. So our game has to be 1200 / 1,1667 pixels wide ... 1200 / 1,1667 = 1028 pixels (rounded down). When creating game, pass 1028 x 600 instead of 800 x 600. Now you game will look like this: solid area is original 800 x 600, but together with stripped part it is 1028 x 600. We still do not fill entire window. Now, Phaser scale modes come into play. Following picture is from my book, where is full chapter related to scaling horizontal endless runner game (https://gumroad.com/l/CZuhn). Our current state is in fact NO_SCALE: Red rect is game, blue is window. Beside these modes, Phaser also has USER_SCALE that allows you to set custom scale for both x and y. As you already recalculated width, you can now simply use EXACT_FIT. It will not deform your game, as you adjusted its width, so it will scale uniformly. All these modes scales whole game canvas after it is rendered! Do not scale individual game objects, gravity, velocities, etc. or you will get lost quickly. You do not need it - your game is now 1028 x 600 (originally it was designed for 800 x 600). Y dimension did not change - no reason for changing gravity, height of sprites, etc. In X dimension you can now see more of the level to the right, but again: no reason to change velocities, sprite scales, etc. The above is simple example - we are calculating new game dims before game is created. But you can make it all dynamic (which is how it is made in that mentioned book). Phaser tells you when window size is changed and you can handle it. Look at Goblin Run game here: http://sbc.littlecolor.com/goblinrun/ (it is game created in book) and try to resize browser window - game will dynamically match it ... even very crazy dimensions like this:
  26. 2 likes
    Yep, let your "upset" motivate you to code-up a nice demo for us. We're an all-volunteer team, and not a customer service center. We can use your help - Mythros' HeightMap Physics FPS Game Starter Kit. BabylonJS is a framework for user-friendly accessing of webGL via JS, and the physics engines are 3rd party (with their own help forums). It is the users of BJS that build the advanced toys, and you are one of those users. The core team for BJS... is primarily concerned that the webGL 1.0 and now, 2.0 specs... have their API as exposed to JS as is possible, and that it works as best it can. A side-team works tirelessly to ensure that exporting models from popular modeling software... works (even with ever-evolving modelling features). Another side-team is working on importing all the newest filetypes for models and textures. This affords a sweet open-horizon and potentially lucrative opportunity for people like you. You can start a company of video game-making tools, based-upon the BabylonJS WebGL framework. Pretty nice of Deltakosh and the core team... to provide you with that opportunity AT NO COST TO YOU. It is as if Deltakosh (and the 3rd party physics engine authors) GAVE YOU a wonderful building and property... to open a game-tools company. Other users GAVE YOU an interface between BJS and the 3rd party physics engines, FREE. And let me tell you about performance considerations. Thousands of hours by core team and testers have been dedicated to making JS->BJS->WebGL run just as fast as it can... all without ANY work done by you. Think of what has been provided to you.... for free. An opportunity for success SO LARGE and SO tweaked... that you are ALMOST guaranteed a successful game series and business opportunity. It is as if 1000 webGL experimenters... put all their tools into a semi-truck, and backed it up to your computer room window... for you to use... for free. Has ANYONE EVER done something SO NICE for you, before? Do ALL the tools in the truck.... have hand-holding documentation on how to use all those tools? No, but we're working on that very sternly and steadily. Problem is, people are inventing tools faster than we can tell folks all the cool things those tools can do. That is because these cool tools can do SO MANY THINGS, and we can't even start to imagine-up all the scenarios that could benefit from any given tool. We would need to be able to predict user's dreams and imaginations... to do that. It is an overwhelming amount of work for an all-volunteer spare-time-only documentation team. If you take the time to "see" just how many wonderful features and demo playgrounds have been made with BJS (and even some that use the 3rd party physics engines, who have their OWN forums)... you would understand. Core team is a small team. Why? Because as soon as someone starts using BJS... they have difficulty getting work done - because the framework is SO MUCH FUN! We have seen SOME ragdoll-ish physics-active skeleton/bone walkers, but none with inverse kinematics that can transfer mass, friction, and foot push-away... thru an entire physics active skeletal structure... on non-level ground. Most... fake it. But please, feel free to create the skeleton with mass, climbing hills. Pick your shoe impostors, get your bone-to-bone forces transfer calibrated, and then see if the 3rd party physics engine can properly calculate the amount of foot-slipping on the ground. Those users who DO make things like that, and get it right, are not always willing to give that work away. It is part of THEIR company's "trade secrets" and, can you blame them for being that way? They are competing, and thus, they don't WANT the competition to have that free code. Yet, I do understand what you feel. But webGL is still an "unfolding" and evolving tech. It's bleeding edge. It runs in a browser and requires no game client to speak-of. Can you say HOLY CRAP, BATMAN? Please take a moment to see what a wonderful opportunity has been given, for free, and with SOME very friendly and quick customer service. Please take a careful look at the tools that are in the semi-trailer that is freely backed-up to your computer room window. BJS is a pile of tools that can be used (easily) to build game-starter scenes, but generally-speaking, we do not build or provide game-starter scenes. Be well, party on. PS: Here is some recent work by @Raggar, working to advance older @Samuel Girardin demos... to newest BJS, and for future use with CannonJS instead of Oimo. https://www.babylonjs-playground.com/#G9ZBQ1#6 Keep tapping P, with an occasional H and G. Here's the thread... a real recent one. Sammy has over 100 hours into this. Raggar probably has 40 hours into it, along with his brand new syncBoneWithImpostor framework mod. Nice of them to give it to us for free, eh? *nod* Love thy coder.
  27. 2 likes
    Hello, I have just finished the second level for my html5 game, Adventure of Ryan Hunter. Please check it out and let me know what do you think. https://www.tweaknow.com/RyanHunter.php Thank you, Priyo Hutomo http://www.tweaknow.com/
  28. 2 likes
    Just some trivia, but V8 follows "single static assignment" form, so internally local variables never change values. That is, if you reassign a new value to tm5, the optimizing compiler will compile it as if you had created a new variable. AFAIK v8 is smart enough to create temp variables in registers if it knows they won't be needed for long. For the function we're talking about I imagine it may not have enough registers to do this for all the floats, so some may get created on the heap as well, but this gets into the kind of areas where v8 may not work the same way on all platforms, or it may allocate registers differently next month than it does today. I don't think it's possible to say anything with certainty without looking at decompiled IR. That said, for what it's worth I played a little with optimizing multplyToArray, and got a moderate speedup just by moving code around: http://www.babylonjs-playground.com/#E2HVNG#2 All the alternate version does is move some var assignments down to occur right before they're needed. My guess is that this lets the compiler make better guesses about how to reuse registers. (E.g. putting tm0-3 into registers, and then later putting tm4-7 into those same registers because tm0-3 are no longer needed.) I've experimented with it, but it's not ideal, since my scene doesn't always have 800 meshes, that's just a rough upper limit. So I'd probably need to create and destroy SPSes according to demand, which would be hairy.
  29. 2 likes
    Howdy All Check out my latest game. Its in a kind of permanent beta at the moment. Works on Desktop or Mobiles, touch controls etc, all thanks to the awesomeness that is the Phaser framework. Wizard in a Bubble
  30. 2 likes
    Here's a helper function I made to create each shader plugin with just a simple function call like this: createShaderPlugin(name, vertShader, fragShader, uniformDefaults); Then you can create each sprite that you want to be drawn with your custom shader like this: var sprite = createShaderPluginSprite(name, size, uniforms); Update: I started a GitHub repo for it here if you want to check it out. I also made this little CodePen to demonstrate the usage with some comments. The encapsulated code is based on the plugin example and on the worldTransform/vertices calculations that I boosted from PIXI.Sprite. I have tried to optimize and condense for the use case where the Sprite doesn't have any Texture to be filtered and tried to make it easy to use and behave expectedly... But please let me know if you find improvements/mishaps or have questions about it
  31. 2 likes
    Hi all, Babylon.js makeIncremental script port to node/gulp , so it can be used cross platform and integrated in build tasks. GIT: https://github.com/evolution-gaming/babylonjs-make-incremental NPM: https://www.npmjs.com/package/babylonjs-make-incremental Feel free to post issues and suggestions on github. More information is located inside README.md file.
  32. 2 likes
    Here are the finished concepts ready for the next stage. Do you have a favorite?
  33. 2 likes
    var distance = 5; camera.position.addInPlace(camera.getDirection(BABYLON.Axis.Z).scale(distance));
  34. 2 likes
    After studying your examples, I've come to the conclusion that I don't really like plugins --- or I can't really see how to use them for my purposes, which is an equivalent assertion in my mind I was forced to have a look into the WebGL thingy and PIXI.glCore in particular. I think, for my needs, it is a good compromise between high level Pixi v4 powerful and optimized features, but lacking some abilities to deal with the vertex shader, and the very low level WebGL context quite burdensome after some hours of practice. So, I came up to this small program which is able to display a transformed white 3D photorealistic... triangle! Don't laugh, because it costed me hours of studying since I'm new in the world of WebGL and shaders ^_^' /* Initialize WebGL Renderer */ const width = 800; const height = 450; const renderer = new PIXI.WebGLRenderer(width, height, { antialias: true }); document.body.appendChild(renderer.view); renderer.backgroundColor = 0x000000; /* Shortcuts */ const gl = renderer.gl; // WebGL Context const glCore = PIXI.glCore; /* Load shaders */ let shaderVertSrc = document.getElementById("vertShader").text; let shaderFragSrc = document.getElementById("fragShader").text; /* Initialize shaders */ let shader = new glCore.GLShader(gl, shaderVertSrc, shaderFragSrc); shader.bind(); /* Vertex Buffer */ const vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; const vertexBuffer = glCore.GLBuffer.createVertexBuffer( gl, new Float32Array(vertices), gl.STATIC_DRAW ); /* Vertex Array Object */ let vao = new glCore.VertexArrayObject(gl) .activate() .clear() .addAttribute( vertexBuffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 0, 0 ); renderer.bindVao(vao); /* Uniforms */ let mvMatrix = mat4.create(); let pMatrix = mat4.create(); mat4.translate(mvMatrix, mvMatrix, [-1.5, 0.0, -7.0]); mat4.perspective(pMatrix, Math.PI / 4.0, width / height, 0.1, 100.0); shader.uniforms.uMVMatrix = mvMatrix; shader.uniforms.uPMatrix = pMatrix; /* Draw */ vao.draw(gl.TRIANGLES, 3, 0); The live snippet can be found here: Now, my issue is to be able to turn my nice triangle into a PIXI sprite, in order to come back into a normal world. Any hint would be really appreciated!
  35. 2 likes
  36. 2 likes
    We will try to support both. Using a progressive enhancement technique to enable faster code-paths or more features when WebGL2 (or certain extensions) are available is the current strategy I am using. I currently use feature detection to resolve calls to make depending on the context we get, since we do want to support users passing in a custom context, we need to detect WebGL2 support both in the browser and on the active context.
  37. 2 likes
    The idea of looking at what is happening several decimal places in is sound. However just throwing away the leading figures will not work as you could be disregarding different quantities each time. You need to subtract a consistent quantity each time before scaling up. https://www.babylonjs-playground.com/#YCF2QS
  38. 2 likes
    One thing that I does strike is that most of those modules can be stand-alone, possibly when you include them into your framework you add some glue, but it would be a good thing to be able to install only parts of a larger framework. Things such as noise generators, terrain generators, UI components etc etc all have value standalone, even if their primary use-case is as part of a larger framework. Given that multiple instances of these types of modules already exist I've no idea why people (outside of a learning endeavour) code these things themselves but if you're going to, I'd look in to making them standalone and then work on including them in your framework project. So many benefits for both you as developer and for your users.
  39. 2 likes
    Hi and a warm welcome from me. The following PG uses the ArcFollowCamera which allows you to change the alpha and beta values. Hope it sets you on the way to what you want. https://www.babylonjs-playground.com/#12WBC#105 By the way as Deltakosh mentions, it is always a good idea to set up a simple PG showing your issue with other aspects of your project stripped out. It makes it much easier to see what you need. Good luck with your project.
  40. 2 likes
    Don't let him scare you, Brick. P8 has been snorting bytes since noon today... he's already well code-toasted. Inertia, reaction times, camera mass, overshoot, heavy momentum goods. (Wingnut opens the top of Pryme's head and looks around in there.) He calls it "the basics". heh. Um, the basics would be a nice playground with BabylonGUI sliders to adjust all the variables WHILE a violent high-speed chase is underway. Anyway, here's a terrible flight sim with a ton of BROKEN cameras and buttons, but it was ONCE used to test airplane-following cameras. With a little (a lot of) work, it could be hammered into being a follow-cam testing scene, once again. Perhaps @Pryme8 will install one of his inertia-cams in a new blue button. Perhaps someone will fix all the other broken cameras. Perhaps we need a robot stunt pilot for this airplane. Maybe much later, we spawn 5 of these airplanes and do a 1930's "Blue Angels" show! Cooooool. Five robot stunt pilots... communicating with each other... doing an air show for us. "Keep it inside the skybox and above the ground, boys" Air show choreography comes from a "script" or maybe a block of xml nodes. Excellent! I'll code the smoke systems for the planes. Sound good? Let's GO!
  41. 2 likes
    Yes sir THere is a plan for that (But I don't know when)
  42. 2 likes
    Hi all, I am pleased to announce that one of my biggest html5 projects was released this weekend. The project 'Taalblobs' is a commercial website with many educational games that is designed to practise Dutch spelling. It contains 25 games (all written in panda.js), approximately 5000 Dutch words, a reward system for pupils, an adaptive algorithm as well as the option for a manual override, an extensive monitoring system for teachers and many many more cool features, all designed to facilitate educational professionals. Currently Taalblobs will be available in Dutch only but I am thinking about porting the concept to other languages as well. (So if you are dyslexia expert and interested in participating, don't hesitate to contact me !) If you are interested in the project, feel free to have a look and give a few games a quick try on the website https://www.taalblobs.nl/demo. You can have a look at some screenshots below or a full overview online at: https://www.taalblobs.nl/spellen.html @Enpu: Once again thank you so much for your work on the Panda.js game engine and especially for making it publically available as an open source project. Stephan
  43. 2 likes
    engine.setSize(width, height) Make sure you do not set width and height as a css style. If you are using a template from BJS documentation delete width:100% and height:100% from #renderCanvas
  44. 2 likes
    Correction: You hope to implement some Web Workers. It's never that easy
  45. 2 likes
    I finished my first HTML5 Game which was very modest in scope. I wanted to build a simple connect the pipes via rotation game. It took me to 2 weeks to complete at 2-4 hours a day on my off hours, in total 38 hours. I build it using Phaser, CoffeeScript and Sinatra. It uses LZ and store.js for storing data. The hardest part was drawing the flow graphic overtop of the pipes as I had to reverse the animation depending one which way it flowed into the pipe. If anyone is interested, I am considering open-sourcing the game. http://www.kongregate.com/games/omenking/piepezania
  46. 2 likes
    Hi, Little Plane is another one-button game made for Gamee platform. Dodge dangerous pillars, pass through deadly tunnels and collect money. Game was made in Phaser and uses P2 physics. Play it here: https://www.gameeapp.com/game/5IsYwla
  47. 2 likes
    As a very much beginner to the world of shaders I did produce some tutorials on them, as much for me to refer back to as anything else. The first is here http://babylonjsguide.github.io/advanced/Overview with links to one or two more here http://babylonjsguide.github.io/advanced.html (click on shaders button to see short list).Definitely not comprehensive but a start. Deltakosh also has a decent shader tutorial at https://www.eternalcoding.com/?p=113
  48. 2 likes
    @b10b, use case : Live Event, video projection or big screen, people hop in the game with their phone as gamepad. Easy and cheap way to make them interact, you can handle more than 8 people. Sometimes you don't need pro arcade timings. i am interested too in a airconsole like but without the tie to airconsole.com.
  49. This post cannot be displayed because it is in a forum which requires at least 5 posts to view.
  50. 2 likes
    Hi, call to load does not load asset - it puts it into list that will be loaded later. And this later happen automatically when preload function is finished (in preload you list all assets you want to load) or when you call load.start(). I highly recommend to preserve Boot state separated from Preload state. If your Boot state has only little code, then be happy - best functions are those, that do their work and are short and easy to read.