Popular Content

Showing content with the highest reputation on 07/04/16 in all areas

  1. 2 points
    Hi all, I was experimenting with techniques for Web Font preloading and ended up writing an article ("Web Font preloading for HTML5 games") with my findings, along with some demos working in Phaser. There are several ways to detect whether a font has been loaded or not (like rendering a text in a DOM element and check for size/scrolls events, etc.), as well as a proper, standard JavaScript API that as of today, only a few browsers have implemented (Firefox, Chrome and Opera). There are several third-party libraries out there (like TypeKit's Loader, FontFace Observer, etc.) which use this JavaScript Font Loading API and do a fallback to workarounds if browsers don't support it. The problem is that Phaser's loader does not integrate anything like this, so right now you need to bypass the loader entirely and keep the font loading separate from other assets loading. This might cause some problems because once your game state hits create the font might not be loaded yet. This demo shows this technique by introducing some flags that delay text rendering until both the preload phase and the font load have been completed. If you'd like to integrate the font loading inside Phaser's preload phase, you'd need to write your custom loader extending Phaser.Loader. My own version of this custom loader involves modifying one internal Phaser.Loader method, which is not ideal and might break in future Phaser's releases. In the article I describe with more detail all of this, so if you are interested check it out. Now, looking into the future… Since WebFonts is the only way we have to render text with our own TTF files, I'd love for Phaser to acknowledge this and offer a way to load these TTF (or woff2, or whatever) files like the other assets. Since the JS API is not implemented in some major browsers yet (like Edge, or Safari), if we were to include this now, we'd need to use a third-party library, which would bump Phaser's build file –which is already big. A lightweight library would be FontFace Observer, which is ~5KB (1.5KB less without the Promise polyfill). I can see @photonstorm not wanting to make Phaser bigger, so my proposals would be: Include one of these libraries in a custom Phaser build. If a users selects that build, a method to load webfonts would be added to Phaser.Loader. Make Phaser.Loader a bit more flexible, so people can implement their own custom loading, without the need to overwrite an internal method. A way to queue an asset and tell the loader when it has been finished or not (via events) would be really helpful. (NOTE: if this is already possible please someone tell me how). Ignore this feature for Phaser and pray that the Font Loading API is implemented by all major browsers when Lazer is out. Make the Phaser.Loader use this API in a method that can load webfonts. I'm happy to contribute code and make a PR if Richard thinks any of these approaches is OK. Does anybody have other suggestion to make webfont loading happening in Phaser? Also, the this Google Fonts example in Phaser is kind of broken because it introduces an arbitrary delay of one second to render the text. By using two flags (one for when the create phase has started, and one for when the font has been loaded) we don't need this delay. Would it be OK to submit a PR to fix this example? Thanks!
  2. 2 points
    And this is now fixed Check your PG (clear cache obviously)
  3. 2 points
    Ah, okay, that's a lot better! So basically I've made this function: function setUVScale(mesh, uScale, vScale) { var i, UVs = mesh.getVerticesData(BABYLON.VertexBuffer.UVKind), len = UVs.length; if (uScale !== 1) { for (i = 0; i < len; i += 2) { UVs[i] *= uScale; } } if (vScale !== 1) { for (i = 1; i < len; i += 2) { UVs[i] *= vScale; } } mesh.setVerticesData(BABYLON.VertexBuffer.UVKind, UVs); } Calling it on each mesh seems to work as intended - can you think of any side-effects or am I golden?
  4. 1 point

    Quadtree LOD terrain

    Ok, time to share a preview of something I have been working on for a couple of months now: A quadtree LOD terrain for Babylon. So far I have: - Chunking system with infinite paging - Distance based LOD - Custom meshing - Basic UVs and texturing - Bakes to Babylon GroundMesh objects so all the usual functions, physics etc works. - Perlin based height data generation. The bad news is, its currently slower with the LOD than without it, mainly due to memory and garbage collection pressure. I need to make it more efficient at caching the unchanged data between updates and massively reduce the number of new objects created. I'm also duplicating vertices at the moment, I need to fix that. And of course... the infamous seams. At the moment there are cracks between the LOD which need to be handled with seam generation. If anyone has interest in helping, let me know.. I am going slightly crazy developing this
  5. 1 point
    Pixi-tilemap does something like that, its just all the sprites are stored in the buffer. Something like @Fatalist solution is used in my gameofbombs.com - here's the js code (not pixi) https://github.com/ivanpopelyshev/bombermine-shuffle . I ask you again to specify exactly how many textures are you going to use and what are they dimensions. I have experimental branch of pixi-tilemap that deals with 16 1024x1024 tilesets for rpgmaker MV, I can make configuration for your case or recommend how to improve it. Also I'm working on solution that allows to have a lot of z-ordered tile sprites with character sprites moving between them
  6. 1 point

    outline PostProcess as overlay?

    i hacked something together, something like this? http://www.babylonjs-playground.com/#24758V#4
  7. 1 point

    Ideas for Dynamic Map Drawing / Re-Tiling

    You mean, you cached the rendered map into a texture, and on the next frame, copied the middle part from the cache and redrew at the edges? I have implemented this approach, demo is here - http://forest.netlify.com/ (without PIXI, just 2d canvas). z-order should not be a problem, just save each sprite's z and sort by z before drawing....
  8. 1 point
    Hiya @Terminator. I think the camera has a bug/problem. That's what I think. http://www.babylonjs-playground.com/#AOL4N#3 Just goofin' around, using the camera's .cameraDirection, .rotation, .position, .lockedTarget... to try to get good results. I have failed, so far. Still thinking and testing. How do you like my line 19? I'm not much of a programmer, but... is that what is known as a "circular reference"? *shrug* Maybe just called a "back-reference". I should learn to program someday, huh? All in all, line 19 is a darned-funny way of sending the camera object to console (where I click on the 'Object' portion, and my Firefox object inspector pops-open)... (where I can easily find seemingly-useless camera properties to set and methods to call). Still, no joy. hmm. Something is whacky, somewhere. Might need a matrix transformation, but that seems like the long/wrong solution.
  9. 1 point

    Shader performance

    Sure: Windows: Chrome - 14fps(Initially I was measuring with devtools visible so it was not really fullscreen, that's why it reported 18fps) FF: 12fps IE 11: error - linkProgram: Complexity for at least one shader exceeds allowed limits Ubuntu: Chrome: 10fps FF: 7fps A10-5800k with integrated GPU, resolution - 1920x1080 Screen resolution?
  10. 1 point

    Shader performance

    On Chrome/Windows: Developer Tools->Console->Rendering->Show FPS meter (make sure you select "undock in separate window" in devtools) Chrome on Linux: enable "FPS counter" in chrome://flags/ Firefox: enable layers.acceleration.draw-fps;true in about:config
  11. 1 point

    Shader performance

    It runs at 18fps(fullscreen) on my low-end gaming PC. The Average non-hardcore gamer has a weaker machine. And you probably need other things in your game as well... You could try rendering it on lower resolution and decrease some of the constants like NUM_STEPS, ITER_GEOMETRY, ITER_FRAGMENT. It will get less realistic but such realism is too much for a game anyway unless everything else in the game looks as realistic as this. Yeah, they probably do different kinds of optimizations to the code. And Chrome(and maybe FF as well) on Windows translate GLSL code and opengl calls to DirectX, that will also bring in some unpredictability.
  12. 1 point

    Shader performance

    There should not be any noticeable difference with JS engines, all they do is push the shader program at the GPU, from there JS doesn't do anything. My little work MacBook Air with its lack of dedicated graphics runs it really slow, I'm guessing of course but its looks <30 fps so its fairly choppy. I'm a little surprised there is a difference between browsers as the program should be held in the GPU, if its the same machine and the same GPU then it should work just about the same. There will be a slight difference as the JS is probably updating a tick and passing that into the shader, or something, but thats a minimal amount of work. There will only be a difference between browsers and JS frameworks is you're asking the JS to do a lot, but, presumably almost all the calculations are on the GPU and, as far as I know, all browsers have the same access to it.
  13. 1 point
    Goblet Ed

    [Phaser] Wizard Quest

    The game is good and I like the story behind it. It is great that you still had the willpower to finish this game after this many setbacks. Certainly an achievement.
  14. 1 point

    [Phaser] Wizard Quest

    OkijinGames, thanks! It have to be a bug, probably involving the life rune being the faulty one - I'll check it out. And yeah, I have to admit the difficulty balance is quite poor, but at the end I didn't have any energy left to continue working on it and decided to publish as it is. With an overall good feedback though I may try to get back to it and work on a few extra things. nefertiti, thank you! And good luck beating the Elemental! ecv, thanks! Great to hear you enjoyed the game, it really means a lot. And yeah, the difficulty level balance definitely needs more polishing. Can you PM me the bugs you found? Can't guarantee it, but I will really try to fix them! ;] I also remember a few similar stories, but it's always "someone else's problem" and it doesn't matter until you hit the wall yourself and say "yeah, it's all true". Good luck with your projects!
  15. 1 point
    @dbawel that's very interesting. And it's good to hear that you will take some time in the future to give some advice and support for developers like me. A very good info is that you don't work with the samsung-browser but with other browsers like firefox or chrome. This is also my result after one hard day of testing the samsung browser :-) And it's not that I'm dissapointed about the current possibilities with babylon and the GearVR. It's just a new field to explore. And of course there are many things to get known. In my opinion it's espacially the documentation that could be better. Many classes (like the VRCameraMetrics) could be described in a better way, with examples and so on. But I also know that this is all growing up in the future. For now I will invest some more work to improve my scene and my skills :-) I'm sure we'll stay in contact with this forum.
  16. 1 point
    i really disagree about change uv in engine Buffer it is my personal advise because i think when we scale the uv we can not use correct texture we just use the Tiled texture. we can scale that in shader with best performance and very flexible * it used from shader Builder see this : http://www.babylonjs-playground.com/#1QQOJR#0 http://www.babylonjs-playground.com/#1QQOJR#1 notic : you most scale uv per texture more http://www.babylonjs-playground.com/#1QQOJR#2 how can you manage 2 or 3 texture in your floor or wall ? http://www.babylonjs-playground.com/#1QQOJR#3 http://www.babylonjs-playground.com/#1QQOJR#4 other way for make uv use planar Mapping http://www.babylonjs-playground.com/#2KMG5C#1 plan position.xy http://www.babylonjs-playground.com/#2KMG5C#2 plan position.zy
  17. 1 point

    cube face texture rotation

    This should be the default for cubes. With seamless textures you would get 4 faces that look nicely connected. With the default configuration you get 0 faces that look connected. What @eboo is asking is also the default cube configuration in frameworks like Second Life.
  18. 1 point
  19. 1 point
    Thanks @Deltakosh, works like a charm
  20. 1 point

    Smooth setTarget

    Hello @meteoritool I'm not quite sure what you are trying to archive. With 1 single line of code as in my example you get a nice zoom in to the object effect, when you want you also can add the rotation - with a single line of code. For any reason you catch fire to go with setTarget. And now you start to implement you own Settarget function. whitch is good, i also have to idea how to pick with rays, and don' t want to rewrite your achievements. Maybe it's gonna be the one for an update on github to the current one. Position, Rotation, setTarget,getTarget all all them are a Verctor3. Keep on experimenting. Looks promising The Problem with setTarget is that it locks your mouse to the target as well, so you have to care about it http://www.babylonjs-playground.com/#4HUQQ#89 Best
  21. 1 point

    Problem with shaking the camera

    Ok, alright. I set world bounds, and then I shake the camera manually and now it works fine
  22. 1 point

    [Phaser] Wizard Quest

    I'm already a fan of yours and your team for several reasons. You really intrigued me with this: So I decided I HAD to read the story after I played the game. I "wasted" a big part of the evening playing it, so thank you very much Yeah, I like it, that was addictive and I had a great time playing it. Simple and easily grasped game play along with all the FX. I do think the increase in difficulty is smooth, although I'm not sure if bombs and hearts are randomly added, and specially hearts do make a great difference in the outcome of the battle. The music is great and epic and goes well with the epic battles! Which they are, as they can and will get quite lengthy. I'd have never imagined this would suit a puzzle game that well. Of course after playing for a very long time, it does get repetitive. I did experience what Okijin mentioned too, and I found a bug, which I hit for 3 times, sorry. After reading your story, if I were you, I'd throw my keyboard out of the window and bury my head on the ground. I didn't want to spend a long time reproducing it so I just got a screen shot and some explanations I could give to help you find it. I think I found a couple of extra minor bugs too. Let me know in PM if you're interested (I would not ) Last but not least I found your article very, very insightful. While it's not the first time I've heard this piece of advice, "listening" to a real story around it, is an eye opener. I really struggle keeping things simple. I hope I'll eventually FINISH something. Cheers, Eneko
  23. 1 point

    [Phaser] Wizard Quest

    Congratulations , end3r. I love the theme of the game and the gameart is great. Im stuck with the fire elemental.
  24. 1 point
    Thanks, I solved by doing this: 1. add scene.constantlyUpdateMeshUnderPointer = true; 2. set the SPS as pickable (even without any action) 3. remove setParticles() from the render loop 4. Call refreshVisibleSize() after setParticles() http://www.babylonjs-playground.com/#HKEPK#5
  25. 1 point

    Canvas2D - Pictures

    just in case you want already start with experimenting with textures this works for me http://babylonjs-playground.com/#1WGYOL#11 works better with video http://babylonjs-playground.com/#1WGYOL#10 best p.s dont know how the bugfix looks like, but leave the video for Canvas2d this is awesome, exactly what i need to build a smart webpage.
  26. 1 point

    [Phaser] Wizard Quest

    Congrats on finishing the game! I can relate to your story. Not sure if this is a bug but I was able to beat last boss without losing any HP (it kept refilling somehow see screen below). Also, I got quite a lot of "no more move shuffles" so I was mostly spending time searching for the only one move available in the grid... Overall I like the concept but would be great with few more features / combo powers and better balancing.
  27. 1 point

    Sprite Flip / Boundig Box problem

    Yea, there is a bug in 2.8 that does that to the bounding box, the latest version in the dev branch works great and seems stable enough to me, so you could upgrade to fix the bounding box problem. Dev 2.4.9 RC4 - https://github.com/photonstorm/phaser/blob/dev/build/phaser.js