Popular Content

Showing content with the highest reputation on 10/15/18 in all areas

  1. 3 points

    Pixel perfection

    Hey ! Welcome to the forum Try this - http://jsfiddle.net/zmatocef/ and here's the PG- https://playground.babylonjs.com/#M9XT7F#3 as you can see, if you use diag, the FOV for 0px offset still leaves some area(coz of sq root) which is because of the fact (basic maths) let's say you render size was 500*500; diag = Math.sqrt(500*500 + 500*500) => 500 * Math.sqrt(2); because of this (sqr 2)1.41 there's some region left in the view area. (same case happen with Three.js; you can try yourself! ) This is how the formula is derived -> tan(x) = height/ base. Now for FOV ( we have to find 2tan(x)) In our case tan(x) = (renderHeight/2)/ (distance) ; //(distance btw camera and mesh; because camera is in middle) now x = tan-1(renderHeight/ 2* distance); and FOV = 2x; if you use diagonal; you can't get accurate result (x in this case)
  2. 2 points
    Tomm Huth

    Basic infinite scroller game

    @kcoley i actually managed to fix it by tweaking the iterations param of the cannonjs plugin, but it would be interesting to know why that seemingly solved it. thanks!
  3. 2 points
    As far as clones, these are just meshes sharing geometry. Disabling one has no effect on others. Also, there is no such thing as a MASTER clone, which means the first mesh can also be deleted with no effect on others. In general, these "tricks" as you call them are due to people perceiving that they are operatiing on meshes. In the GPU / reality however, the primary thing be operated on is materials which translate into a vertex / fragment shader pair. This difference of what is really being done to how you THINK you are operating, is causing your disconnect of what should be the way "things should be". For instance, having vertices in the CPU does not mean anything to the GPU until a material is created for them to be used as data. This compiling of shaders / GPU programs is what causes the latency. As @JohnK says, adding a mesh & disabling gets the shader programs compiled, so everything is ready when you want that mesh (really material) to be seen. Not straight forward, unless you look at it from the GPU's point of view.
  4. 2 points
    Your water does not need as much subdivision. your water is flat, a subdivision of 4 is sufficient.
  5. 2 points
    Hi Deltakosh should be around by tomorrow. As mentioned, this happens because of a loop in calls, Here's a temporary fix for until it's fixed; Accessing absolutePosition directly, instead of getAbsolutePosition() function which forces computeWorldMatrix. Include the snippet in your code, after the main babylonJs file. BABYLON.ArcRotateCamera.prototype._getTargetPosition = function() { if (this._targetHost && this._targetHost.absolutePosition) { var e = this._targetHost.absolutePosition; this._targetBoundingCenter ? e.addToRef(this._targetBoundingCenter, this._target) : this._target.copyFrom(e) } var t = this._getLockedTargetPosition(); return t || this._target } https://www.babylonjs-playground.com/#9XBPW4#4
  6. 2 points

    loading screen with a video

    Here's one in HTML that just makes a black background container and a video element. https://playground.babylonjs.com/#GC1S7W#1 (You may need to click run before the video works, issue with video elements need interaction.) side-note: PG with timeout( for extra video time ) will bug when clicking run again before the timeout finishes (and video is hidden).
  7. 1 point

    Phaser 3 - Video tutorial series Free

    I'm doing a video tutorial series for Phaser 3 since the only alternatives are paid Zenva courses(which aren't bad but not many can afford). I'm aiming to do videos once a week and if you want to help out, I'll be on discord open to discuss the scripts and what to go over.
  8. 1 point

    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:
  9. 1 point

    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:
  10. 1 point

    Canvas rendering and JS code optimization

    Hi all, as already title points out, this will be once more a thread about different possible ways to optimize performance of Canvas rendering and JS code execution. I hope I will not get too long with everything. At the same time I hope this thread will help a lot of other dev enthusiasts to optimize their games as much as possible. In the end, we all love playing flawless gameplay I'm creating some sort of Match3 game for desktop and mobile devices, and I'm using Phaser CE (v2.11.0). This work week will be reserved for doing and trying out different optimization options, and I hope you can give me advice about which changes should bring me the biggest performance boost for my game. I will list a few options, which I think could be beneficial for improving the performance. What I'm trying to figure out, is how big of a performance boost will I get out with such a change, and what is the best way to measure performance changes, How to figure out if some change improved or worsened game behavior. For now I'm tracking FPS, DrawCalls, and from Chrome Task Manager Memory Footprint, GPU Memory and JS Memory. One think that I still need to look up and learn is how to make use of Performance and Memory tabs from DevTools - does anyone know for any good tutorial? So, let's start: 1. RENDERING SIZE Adapting the game size to the actual devices screen size is beneficial. You can right away notice change in reserved GPU Memory size. My system checks devices screen size, and then picks one of the four different supported resolutions -> 1080p, 720p, MID size, and LOW size resolution. It then also auto picks appropriate pre-scaled assets. Afterwards it's scales the whole game up or down to fit the entire screen (i'm keeping the AR). Methods for those are: ScaleManager.setUserScale(...) and ScaleManger.setGameSize(..) 2. USING CSS BACKGROUND IMAGE The game has one full screen fully opaque background image. It is pretty straightforward placing and positioning the BG image with help of CSS as its own DOM element placed behind the canvas. One of the things you should not forget though is setting the canvas transparent property to true. All good and fine, until I saw funky behavior of my animations that were using Blending Modes. Suddenly there were some strange black borders visible ((you can check the provided short video)). So I'm left with: a) use CSS bg image (using transparent Canvas bg), and not be able to use effects done with help of Blend Modes b) bg image is still drawn with Canvas and I can still use Blend Modes How could I now check or measure the performance difference using one or other approach (bg image with CSS, or rendered with Canvas)? 3. INTEGERS VS FLOATING-POINT COORDINATES I've noticed that Phaser supports working with round pixels --> Phaser.Game.Renderer.renderSession.roundPixels. Enabling this option f**k-ed up my translations and scalings, because you were able to notice annoying flickering. I could do nothing else but disabling it. What I'm now doing is to manually Math.floor values wherever I don't see any issues afterwards. Once more, how big of an impact has this on the performance? Let's say that the game has like 60 sprites on the stage, half of them in constant movement. 4. FRAME RATE You are able to set through Phaser.Game.Time.desiredFPS property a frame rate for the whole game. As far as I'm aware of this can bring you some improvements to the game in a way that the renderer does not need to draw the whole game 60 times per second but only 30 times for example. It can be beneficial if you can notice some lagging, and probably can be used set to default 30 FPS for mobile devices if your game isn't heavy physics dependent? I would like to know something else regarding the desired FPS, is in Phaser a simple option for setting different frame rate per Phaser.Group? For example, I have my whole User Interface in one Phaser.Group, which does not need to be updated 60FPS, but would be perfectly enough to set it to 20FPS. 5. COMPRESSED TEXTURES FOR MOBILE DEVICES This is one of the more classical ones, which should every developer be aware of. Use compressed textures wherever possible if possible. Why if? Some compression formats can f**k up the quality of your images, depends on the number of details, gradients, transparency, etc...But it significantly reduces memory footprint, and improves performance. I'm already using and compressing Atlases , where there is a possibility to do it (read: minimal artifacts). 6. Phaser.Sprite vs Phaser.Image How do those two perform? If I do not need any physics on my objects, will I get any boost using only Phaser.Image type instead of Phaser.Sprite? The main difference between those two is that Sprite has additional 3 or 4 components on it? Again if I change all my objects from Sprite to Image, how to measure performance changes? 7. USING OFFSCREEN CANVAS First of all I just stumbled upon that option a few days ago. Guys at Mozilla are mentioning that it should improve the rendering performance. Sadly I don't know enough knowledge to explain why and how it improves rendering. And as far as I know it is supported only on Chrome and Firefox browsers. Would it be worth writing an extra system to do rendering with help of OffScreen canvas? Is anyone using it? What are your thoughts about it? 8. USING OBJECT POOL This is a classic game programming pattern system which I'm already using in my game, for all the moving object, which appear/disappear, and thus optimizing GC. 9. CROP RECT vs ALPHA MASK UPDATE I would like to know what performs better. I've created kind of a reflection effect (you can check the provided short video). part of the code using Alpha masking: let reflBMData: Phaser.BitmapData = this.game.make.bitmapData(w, h); reflBMData.alphaMask(refl_glow, refl_mask); let reflectionImg: Phaser.Sprite = new Phaser.Sprite(this.game, 0, 0, reflBMData); reflectionImg.blendMode = Phaser.blendModes.ADD; this.robinHood.addChild(reflectionImg); let tweenX = this.game.add.tween(refl_glow).to({ x: refl_glow.x + 1500 }, 1500, Phaser.Easing.Linear.None, true, 1000, -1, true); tweenX.onUpdateCallback(() => { this.reflBMData.alphaMask(refl_glow, refl_mask); }, this); vs part of the code using CropRect let cropRect: Phaser.Rectangle = new Phaser.Rectangle(0, 0, 0, target.height); reflImg.crop(cropRect, false); let tweenX: Phaser.Tween = new Phaser.Tween(cropRect, game, game.tweens).to( { width: Math.floor(w) }, duration, Phaser.Easing.Linear.None, autoStart, delay, 0, false); tweenX.onUpdateCallback((tween: Phaser.Tween, value: number, tweenData: Phaser.TweenData) => { reflImg.x = (cropRect.width - w) * 0.5; reflImg.updateCrop(); }, this); I would guess that using CropRect is better. I think this will be enough for now So my main questions are: what's the best way to measure performance changes, AND in what order would you sort above mentioned possible ways to improve the game, from most important/beneficial to less important. Also, if you think I've missed something that should go into the list, please let me know. Any kind of optimization options are more than welcomed. br, mcofko refl_effect.mp4 win_effect_blendMode_ADD_transparent.mp4
  11. 1 point

    Full Game Tutorial: Making Minesweeper

    Tutorial: Making Minesweeper (Preview of what we'll be making) Introduction to MineSweeper (Image 1. The classic Minesweeper. You can play a version of it online at http://minesweeperonline.com ) Minesweeper is a classic game, which just about everyone who’s ever had a computer has played before. It’s a sometimes frustrating puzzle game, that mixes a bit of luck with a head for numbers. It’s a simple design that can challenge the player again and again no matter how many times they play it. Basic Design Before we can get into writing any code, let’s take a look at the design of the classic Minesweeper. There will be three basic game objects: A square, the playing field that contains all the squares, and the ‘Smiley’ faced button. The basic gameplay is the player has to uncover the whole field, except for the mines. He can place a flag on top of mines by right-clicking to avoid clicking on them. If he accidentally clicks on a mine, it blows up, and he loses the game. If he manages to clear all the squares without clicking on a single mine, then he wins. Each object will have the following behaviors: Game Objects Table 1.1 Square Playing Field Smiley Face Could be a bomb Could be next to a bomb. If it is, then the square has a number. Flags can be placed on top of squares. Is a list of Square objects. These squares need to be created in the room, and the bomb needs to be randomly placed. If all the non-Bomb squares are cleared, then the player wins. Looks anxious when the player presses a square. Looks dead when the player presses a bomb square. Looks cool when the game is won. Tools Panda2 Link: https://www.panda2.io/ Panda2 is a visual way of writing HTML5 Javascript games. It allows you to immediately see the code changes you're doing onscreen. It's built on the Panda Engine, which is an opensource html5 engine. ImageEditor Any image editor for creating png’s to use for the game’s graphics. But don’t worry, the game resources are included with the source code so you can get coding without spending time trying to create game resources. Step 1: Setting up the Base So you’re ready to make the latest, and greatest MineSweeper game. Great! But how will we start? In Panda2, create a new project. (Image 2. A blank project). The first screen we’re presented with the base game setup: This is where the core ‘engine’ is loaded for the game. You can see first it’s loading the engine, then the config, before it starts main.js. We don’t need to worry about the engine, so first let’s add some graphics we can use in the game. Click on the asset tab, and then add graphics: (Figure x. Adding assets to the game). Go to where your game graphics are stored, and selecte the Square graphic to load. (Figure 1.x the assets for this game) Click on ‘Main’ in the sidebar. You’ll be presented with your ‘game logic’. (Figure 2. Main.js. This is going to be the starting point of your game). Click on line 12, to get your cursor there, then press the (+) button, which is indicated by the red arrow in Figure 2. It’ll create some code for new, a new Class. Go ahead and call it ‘Square’. After creating the Square, now we have to add the sprite for it. Click again on the asset tab, hold down Alt and click on the ‘square.png’ image. You should now see the following code added to your game: game.addAsset('square.png'); Make sure this code is just above your ‘Main’ definition. Now: Inside Square, change the init function to this: init: function(x, y) { this.mySprite = new game.Sprite('square.png'); this.mySprite.position.set(x,y); this.mySprite.addTo(game.scene.stage); } And inside of Main.init(), add the following line of code: var playingField= new game.Square(96,96); All together, it should look something like this: game.module( 'game.main' ) .body(function() { game.addAsset('square.png'); //press alt+click on square to add it to game. game.createScene('Main', { init: function() { var playingField= new game.Square(96,96); } }); game.createClass('Square', { init: function(x, y) { this.mySprite = new game.Sprite('square.png'); this.mySprite.position.set(x,y); this.mySprite.addTo(game.scene.stage); } }); }); Save and refresh. (the red arrow in Image below points to the Refresh game button) Congratulations! You’ve created the first step of the game. You’ve used Panda to add a new Asset to your game. You’ve created your first game object, and you’ve created your first sprite to draw into the game. What we’ve created so far can be found in the minesweeper_01 project in the source code. Now: While what we’ve achieved is not that impressive, we’re getting familiar with the workflow of adding game resources like images, and creating new gameobjects. Now that we’re familiar with this, we’ll now be able to quickly create new objects and display them however we please. Other resources, like music and sound are added in much the same way. Next up: We want to create a playing field. And we want to add some game function to the Squares (Like Bombs!). Step 2: Creating the Playing Field and adding interactivity. In this step, we’ll create the actual playing field of squares, we’ll turn some of the playing fields into bombs, and we’ll let the Player click/tap on the squares to reveal them. We need to add more assets to the game. This includes loading 2 font resources: Fonts have 2 files associated with 2 files: *.fnt file, and a *.png file. Load the extra assets into the game. Add a PlayingField game object. Add Bombs and code for checking for bomb. Our game now looks like this: It’s getting there! Squares now know if there’s a bomb next to it, or if it’s a bomb. Square are also randomly assigned a bomb. The full code for where we’ve gotten to so far can be found in the minesweeper_02 project files. Step 3: Implement basic game logic. In this step, we code the game to have win/lose logic. We add some of the classic Minesweeper features, such as marking squares with flags, and adding a ‘Smiley’ face to the GUI The game now looks like: Full source code can be found in minesweeper_03 project files. Step 4: Adding some final polish. Final code polish. Flagging mines on game complete. Exploded sprite. Adding Animation. Game now looks like: Full source code is in minesweeper_04 project files. Final Step: You! The next step is to take this game to the next level. Here’s some suggestions: Traditional Minesweeper is a fixed grid. Add some level design! Change the pattern. There’s no reason to even keep it to be squares. Use hexagons, or circles. Put it in space! Polish the game! Add Music and sound effects. Add a Title screen. Add some cool explosion animations if the player clicks on a bomb. Make stars fly out when the player wins. One thing that players of the traditional minesweeper do is play for the hi-score. Add a timer and track their scores. Let them share their scores on Social Media Release it! The Panda2 editor has some features to easily export and release your game across multiple platforms. Some of the platforms it currently supports are Android, iOS, Facebook Instant Games, AndroidTV, XBoxOne. Source Downloads: minesweeper_01.zip minesweeper_02.zip minesweeper_03.zip minesweeper_04.zip And Finally... Leave some feedback. Cheers!
  12. 1 point
    If you dont want to use indices there is another way setCollisionByProperty You'll have to add the property to the tile in Tiled
  13. 1 point
    Using the concept of layermask, you can also have at least 4 simultaneous scenes in the same place at the same time. A camera has a layermask, as do meshes. You could set all the meshes for one scene to a mask. The meshes for "another scene" can have another mask. If you set the mask of the camera to one or the other, then a different "scene" will be shown. If you set the camera's masks to a bitwise or of both, then both will show. If you are familiar with Blender, same concept. One Blend file / scene. If you wish to show only certain meshes put them on the same layer. If multiple layers are selected, more than meshes for one layer with display.
  14. 1 point
    Well because it is a Pass postprocess It just pass the data (but can be used to scale up/down)
  15. 1 point
    Cheers @Deltakosh, will check it out this evening.
  16. 1 point
    Hello! this camera extends the ArcRotateCamera and then use this inputManager: http://doc.babylonjs.com/api/classes/babylon.arcrotatecameravrdeviceorientationinput You can use the xxxCorrection properties and set then to -1 to change the direction A doc about inputs: http://doc.babylonjs.com/how_to/customizing_camera_inputs
  17. 1 point

    GLTF Extras

    Here it s for the main extras field: https://www.babylonjs-playground.com/#10D6YT#154 It logs undefined as my gltf does not contain extras here but you can get the idea and then extract what you want from the JSON. This event will be raised before any of the other processing in the loader.
  18. 1 point
    setEnabled takes the mesh out of the rendering loop and so does not consume processing time. Whereas isVisible hides the mesh but keeps it in the rendering loop. As always the best way to find out if something works is to try a simple example in the playground https://www.babylonjs-playground.com/#6W0A00 When cloning the geometry is copied but you can change materials. An alternative is createInstance this copies the geometry and the texture, so an instance cannot have its material changed. My preference is SPS solid particle system this takes a single mesh and allows you to group copies, as a particles, into a single mesh, so one draw call, but still allows a number of aspects to access individual particles.
  19. 1 point

    Pixel perfection

    well thanks a lot for the explanation, you made my day sir!
  20. 1 point

    BabylonJS Toolkit Problems

    You can literally HOST that Export folder as in IIS / ASP.NET There are so many options... The toolkit itself HOST the export every time you hit build and preview... IT ALSO SUPPORTS Serving compressed content... Just look at the Web Browser Network Panel... On eof the columns shows the actual gzipped size that is transfer. You could just Copy the Export folder to a hosting company like GODADDY... The bin folder has the HttpModule if you have that selected to export... and it generates the web.conifg that associates all the scene content stuff. Dude... If you are using My Toolkit... You are literally ready to rock and roll for web release Just HOST the Export folder somewhere (When not using the Toolkit for development)
  21. 1 point
    Interesting question and from my point of view it is a bit like asking why does Picasso paint faces with both eyes on the same side of a head when they are clearly on opposite sides. Answer because he wanted to. Developing any system depends on the life experiences and views of the developer and since these are different for us all we all see things dfferently. When I first started with Babylon.js my expectations often led me down the wrong path until I learnt not why things were done in the way they were but how things were done. When you are learning it is too easy to look for the pieces you expect to find so you can put them together to build the system you want. However these pieces might not exist. You need to think about what it is that you want to build and what pieces are available that will allow you to build it. For example an alternative way to approach your number 2 could be to load your mesh and then use mesh.setEnabled(false) to keep it out of the way until you need it or even just mesh.isVisible = false. If you need lots of copies of the mesh then perhaps the SPS system might be a better way than cloning. Keep learning and there are many contributers here to help.
  22. 1 point
    Absolutely amazing - many thanks on that!
  23. 1 point
    defaultBuildToolsVersion="27.0.1" //String Installed packages:=====================] 100% Computing updates... Path | Version | Description | Location ------- | ------- | ------- | ------- build-tools;19.1.0 | 19.1.0 | Android SDK Build-Tools 19.1 | build-tools/19.1.0/ build-tools;20.0.0 | 20.0.0 | Android SDK Build-Tools 20 | build-tools/20.0.0/ build-tools;26.0.2 | 26.0.2 | Android SDK Build-Tools 26.0.2 | build-tools/26.0.2/ build-tools;28.0.3 | 28.0.3 | Android SDK Build-Tools 28.0.3 | build-tools/28.0.3/ See the problem ?
  24. 1 point

    Text styling

    Looks like there's no letter spacing for text in Phaser 3 So here's a little solution if someone will need it textline = 'qwerty'; letterSpacing = 10; letter = null; startPositionX = 400; for(var i = 0; i < textline.length; i++){ if(!letter){ letter = this.add.text(startPositionX, 1020, textline[i]).setStyle({ fontSize: '60px' }); } else { letter = this.add.text(nextLetterX, 1020, textline[i]).setStyle({ fontSize: '60px' }); } nextLetterX = letter.x + letter.width + letterSpacing; }
  25. 1 point

    Basic infinite scroller game

    for show you what happen you don't need terrain i just have one mesh and in any step prepare that again http://www.babylonjs-playground.com/#1QC9DP#175
  26. 1 point
    @blackhawx Okay I just kept typing and my post was getting a bit out of hand. So I decided to just write it out as a post on my dev blog here: How to Re-Use Phaser 3 Animations for Different Sprite Sheets I hope this was clear and useful! Feel free to "like" the post if it was good or leave feedback how I can improve it. Thanks again for helping me understand this process!
  27. 1 point


    Hi everybody from the html5 and babylonjs forum! This is a topic where I wanted to give you some feedback on my experience with babylonjs since I started working on it and to thank you for your help! SUMMARY : First I think your goal is fulfilled. Indeed Babylonjs is a complete Javacript framework for building 3D games and it's simple ( At least for a developer which love JS like me ). The game https://wazana.io which is now in 3D thanks to babylonjs is one proof of that. DOCUMENTATION : The way I use it is the following : when I find a babylonjs tool which I want to add in the game, I went to the 'HOW TO...' page of the tool. There I can find how I can make the tool work and apply it in my scene. Plus I can see different application of the tool. The playground examples are very very helpful as you can see immediatly the rendering. Then if needed I sometines went to the 'CLASSES' to find the function or the parameter I wanted or if I didn't use some function in the correct way or with the wrong arguments. I don't really use the other part but when you look for ideas or new way to improve your game, just surfing in the doc can give you a lot of possibilities (with the extensions for instance). PLAYGROUND : Awesome to test test and re-test before integrate. Most of the time, I start from one playground with the base code of the tool I want to test and then I make my change to see if I can obtain what I am looking for. I saw how convenient this is to allow you babylon dev to see what's wrong in our code. But this only works with small and precise issues. The bigger your project is going and the harder it will be to share a playground and find a solution. INSPECTOR : I found out about the inspector very late. I think it can be a very powerful window but I haven't really understood yet how it works. For instance I would want to see what is making the fps slow. Is it the particles, materials, number of meshes, etc? It will be great to instantly know what you can change in your code to improve the perf of your game. However I didn't find a way to have that information in the inspector. YOURFEEDBACK : I would really appreciate your feedback on the game WAZANA.IO. As an indie game developer I am always searching for player's feedback in order to get to the best experience and gameplay possible. So this topic is also the opportunity to tell me what you think about the design, the gameplay and give me improvement ideas if you have any. THANKS : A big thanks to you all who have helped me during this development of the 3D version of WAZANA.IO game. You make me gain some precious time and this is really thanks to you that I manage to be fast at deploying this new version. I explain some steps here in this article : https://blog.wazana.io/2018/01/09/how-wazana-io-has-gone-from-2d-to-3d-in-3-months-only/ FINALLY : You can imagine we are always looking for support so if you want to share, like or put me in contact with people that could be interested in the WAZANA.IO game in any way, feel free to do it! https://www.facebook.com/wazana.io/ https://twitter.com/wazana_io Sorry for my not very perfect english Cheers, PICHOU
  28. 1 point


    A lot of very nice feedback since WAZANA.IO is featured on the BABYLONJS homepage. I suspect you guys to help me make this game even better! Huge thanks
  29. 1 point

    The Wingnut Chronicles

    Hi girls. A little update on the SKAP tumble-recovery auto-pilot, as well as the new automatic "orient" auto-pilot. (skap - station-keeping auto-pilot) (tumble-recovery) https://www.babylonjs-playground.com/#PBVEM#292 Just RUN it and relax. Spacecraft is auto-tumbled, and SKAP func (lines 1318-1371) auto-activates after 3 seconds. It uses a combination of throttled thrusting, and a tiny bit (more) of physicsBody angularDamping. So far, I have not seen the SKAP phase fail. You can watch the av: numbers (angular velocity) as the skap "grinds" those numbers toward low magnitude values. When SKAP reaches a reasonable threshold of tumble-recovery... it shuts off. 3 seconds later, auto-orient activates... thrusting the spacecraft toward 0,0,0 on the erot (euler rotation) and qrot (quaternion rotation) values. It takes a while, and it is NOT perfect. But, if I ask it to be MORE perfect-resulting, it takes even LONGER. So, it's a trade-off. Most astro-crews probably don't care if they have a tiny bit of angular drift... at the end of a short auto-orient function. It seems to work pretty well, but SKAP phase COULD still fail... sometimes. It's "on the fence" Maybe that's part of the fun of the game. SKAP failures happen when the craft is ALMOST PERFECTLY done spinning... but then the av numbers start increasing again. I have not figured out WHY that happens. But, all in all, I can programmatically "watch for" indications of a SKAP about to start failing, and have it shut-off the SKAP immediately (prevent craft from slowly re-entering violent tumble again). I am still in search of the reason WHY SKAP failures happen. I think you can promote more SKAP failures... if you remove line 1351, and increase amp in line 1337... to perhaps 15 or 20. At a certain point of slow angular velocity and low rotation, the whole thing reverses... and my thrusters appear to start INCREASING angular velocity, going against their code logic. Interesting note (yeeeah): If I see the av: numbers start increasing, and manually shut-off the SKAP (by clicking any SKAP button)... then wait a few seconds, and click a SKAP button again (to re-start SKAP)... the "backwards-ness" is STILL there. The SKAP thrusting starts increasing the tumble speed. Bad, bad, bad. I wonder what causes this "suddenly, all my thrusters work backwards" problem. hmm. See lines 130-138? It's a cool little function that DK showed me. What it does... is calculate the very-current rotation/orientation of the craft. EVERY TIME I generate a physics translation impulse, or two rotation impulses (I "twist" the craft with 2 opposed'n'offset physics impulses... to cause a rotation thrust)... this function gets called. EVERY thrust pulsing! I dunno IF or WHY this function would/could "invert"... where it starts doing everything in the opposite direction... but that's my best suspect so far. SKAP works just fine... thru its "coarse" phase... counter-thrusting almost all angularVelocity magnitudes... using only thrusters and EVEN with UN-throttled thrusters. I hate (highly-dislike) setting/varying throttle values on the thrusters. It seems like cheating. By initial design, they are supposed-to always thrust at the same set power. But noooo. Ex: Line 1344... the Math.abs(av.z*amp) portion... is a thruster throttle-setting value. (Wingy pokes it with a stick and hopes it will leave). It should probably be Math.abs(av.z)*amp, too, but I guess that doesn't matter. ANYWAY... when the SKAP starts working on the "vernier" phase... the little-thrustings.... the final tweaks... THAT'S when I see the SKAP sometimes start failing. Most/all the av: numbers start increasing instead-of decreasing. SO, this persistent and annoying "thrusters suddenly start working opposite when av values get low" -problem... is still a huge issue and a major puzzle. All help welcome. Thx. Click here for 2 meg .zip of entire box-flyer package - no keypress observers - no spacecraft model attached. Meantime, I think I'll start working on linearVelocity SKAP now... when the craft is changing position at an insane rate. Just possibly, I will need to ensure the craft is NOT TUMBLING... before I can begin counter-thrusting the unwanted translation. So, rot-skap first (but maybe no auto-orient needed)... and then lin-skap. Then orient. Complete vehicle insanity-recovery. It's not like any of us would EVER pilot a spacecraft... in a way that would cause it to tumble violently thru space, right? Nah. Update: #295 is ready. PG starts with craft tumbling and translating uncontrolled. Click 'Rot Skap' and wait until that is finished. After that, you can click Trans Skap or Orient in any order, and maybe at the same time. Do Rot SKAP first, because Trans SKAP does not work well... while craft is tumbling. All 3 buttons are toggles. Old 'null rot' and 'null trans' buttons are still active... for instant-stop, as wanted. Trans-SKAP is brand new... and fails often... same problem as rot SKAP... thrusters sometimes operate in wrong direction. Still testing.
  30. 1 point
    Well, although I didn't arrive at a finished level, the retro competition still helped me make lots of progress and add new features to my work-in-progress game. You can play the uncompleted model train retro level (created for this challenge) here: https://quintushegie.com/gardentrains/#retrotrains2 This level (and all others) will become more exciting as my programming progress continues. Yesterday for example I added the shadows and improved lighting, which look nice. So my benefit of the challenge was that it helped me get excited about trying out new things and getting things to work. Not so much that I was able to complete a whole new mini retro game... but that wasn't my goal anyways. 🙂
  31. 1 point

    loading screen with a video

    Hi @Buzul . Have you seen these docs on creating custom loading screens?: http://www.babylonjs-playground.com/#1WXS3J Here is a sample playground that uses a custom scene loader: http://www.babylonjs-playground.com/#1WXS3J You can implement a function in displayLoadingUI that implements a video texture.
  32. 1 point

    Dynamic Terrain

    Little uncomplete demo of a bat flight simulator in a cave : http://jerome.bousquie.fr/BJS/test/cave.html 2 dynamic terrains, one inverted
  33. 1 point

    BabylonCpp - A port of Babylon.js to C++

    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
  34. 1 point

    Best way to learn Phaser 3?

    Months later and I still can't learn Phaser 3, so frustrating to spend hours just to find the proper syntax or way to do something.
  35. 1 point

    is Phaser 3 not for newbie?

    Trying to learn Phaser 3 has been a frustrating experience, Unity 3D might be easier to learn with all the Youtube videos and tutorials that are available.
  36. 1 point
    Hey @jdavid It's all in the math. Look at the least common hardware you want to support, and do an evaluation of vertices, materials, and textures. Always use a power 2 texture until we enter full support of WebGL 2.0. I always look at my code as a water pipe and a bathtub... how much water can I push through the pipe and how much water can the bathtub hold? DB
  37. 1 point

    Best way to learn Phaser 3?

    Hi @EpicKingdom_ For me the best way to learn is by picking a project (make it a really basic one for your first game), and learn what you need as you go. I'm sure others will have different ways of doing stuff, but for me, this has always worked. Need a menu button? Learn how to display a button and click on it. Need to change scenes? Find info on the forum about changing scenes. This is what I did when learning the Panda 2 engine and it has worked really well. If you get stuck, post a question on the forum
  38. 1 point

    2D Text in 3D world

    @aWeirdo Seems to be in the right direction. How do I make the plane transparent though? (without making the text transparent as well) http://www.babylonjs-playground.com/#1WHJCE#0 I'd like to not have a background (the actual plane) behind the text, just a floating text with a transparent background.
  39. 0 points

    Best way to learn Phaser 3?

    It is discusting I fully agree! Rich take the money from mozilla and make the phaser 4, then phaser 5, then... 1000. Who care. It is all a joke!