Popular Content

Showing content with the highest reputation on 04/17/2017 in all areas

  1. 3 points

    Texture Generator De Luxe

    There are a lot of combinations by the two input channels "generator-input" and "mixing-input". The following scene is showing some combinations with two pattern/noise-settings and one image, live system HERE.
  2. 2 points
    Hey @scheffgames, quick answer is that most of the techniques you use are more applicable to larger applications, its one of the first things Dan Abramov (creator of Redux and a big speaker on bringing functional techniques to JS and web app development) often mentions when tackling that question. There is usually a little more initial overhead when employing functional techniques but the savings you get further down the line only become more significant as an application grows in maturity and complexity. The initial overhead is sometimes more boilerplate (this is solved by the glut of top-quality modules and libraries over the last year or so hitting the ecosytem) but usually in more thought going in to data structures and data flow throughout an application (which is hardly a bad thing). The key decisions here help to structure what your app will look like and decouple various parts of the system you are creating, if done right (and there are lots of good architecture examples out there when you dig in to it) then you'll find your app more resilient, more thoroughly tested and easier to adapt if (when) requirements change down the line. Employing pure functions (as an example) means you can change that function as you need and its super easy (often trivial) to test, plus, the real kicker, you know what is happening with those functions, you know what goes in and what comes out and so you can not get caught out by making changes and creating bugs in other areas of your code. Functions that touch other areas are your side-effect generating functions and you'll know about those and closely monitor them, preferably employing far more rigid and larger tests to deal with them. As a quick case study: my current day-to-day is not gaming, its creating a major ecommerce platform, its a client-side (well, isomorphic) application driven by restful apis and after pretty thorough due diligence we hit the functional bandwagon hard. After several hard months and some changes of requirement our app is nice and resilient to those changes, we can develop with agility as our app is highly decoupled. A huge portion of our application is now utility functions, small, composable, pure functions that we then use to create more complex data flows throughout our app. Performance is incredible. So far (we're close to shipping) we've hit no real awkward bugs such as data inconsistencies or race conditions because our architecture makes it hard to slip into those pits. See this great article on the pit of success, our React/Redux stack (with some complimentary stuff) and our architecture choices have meant that we continue to reap the rewards of falling into the pit of success (we toyed with full Elm but too risky for us). There is no reason a game application would not receive the exact same benefits. Some of the things I mention (such as data consistency and data flow) can be managed in a wholly OOP world too (of course they can, its the predominant programming style for many many years) but its just that functional techniques often end up this way with no additional effort, you fall into that pit of success simply by following the rules, it really feels like your systems are working for you, which is a wonderful situation to be in. It's rare I've thought 'this is a ballache to do with functional stuff', but, when that happens you make a decision on it and employ the right tool for the job (a key skill for developers, well, for anyone), JS supports both styles well (yes, we can bikeshed on truly supporting either but probs not helpful right now!). The flip side is some things are more difficult, delivering data on demand can be computationally expensive and wasteful, but, on that, I think we're all aware of the dangers of optimising too early, even for something very computationally expensive like your average game (particularly fast moving ones) you might be surprised at how far you can get before perf becomes a problem and you might find some things you're worried about initially never become a problem. Test for performance early and make your decisions based on those tests, two bonuses here, you can measure to find out where you can get the most bang for your buck regarding changes and you can monitor those changes to make sure they're doing what you think (again, these concerns/solutions aren't functional exclusive, you should be doing these no matter how you write code). Moving back to the case-study: we're initially targeting mobile web and I was extremely worried about perf given the metric ton of JS we're running to do anything, but, we monitored early and performance easily exceeds anything I've been involved in previously which is also coupled with development speed—both our app running perf and our development cycle performances are amazing and I wholly contribute this to our initial arch/tech choices. tl;dr Functional techniques can often seem overkill or long-winded initially but come into their own as an app grows in complexity, meaning that larger projects benefit more from this approach. As with all things, do your research, monitor early, and make your decisions based on that. There is no silver bullet, functional or OOP, the good news is, even if you go for an OOP arch you can slip in plenty of functional stuff that can help you and vice versa. Know your tools and employ wisely!
  3. 1 point

    Phones as controllers ?

    Hi. Is it possible to use phone as controller to steer my HTML5 application in the web? Should I use socket.io? And may I write my android's application in Android Studio - without use phaser? I want to do something like airconsole or justdance Please help.
  4. 1 point

    Numerous files vs large states

    I'm kind of a newbie at this, and working on a project that is probably way over my head. But so far so good, I would just like some input from some more experienced programmers The game involves the main character walking around on a top-down map, similar to Legend of Zelda: A Link to the Past or Chrono Trigger (when not fighting). But when arriving at certain coordinates, I would like to trigger some sort of minigame, like when walking on a big stone overlooking a river, instead of the controls moving the character left/right/up/down using velocity, the character would jump from one lilypad to another (somehow, some of them can hold the character's weight) to cross the river, in a more frogger-like fashion. Once the river is crossed, the movement with velocity resumes, creating a somewhat fluid experience. I can get all that done with an event indicator in the update function. If eventInd == null, then check for the arrow keys to move the character. If eventInd == "riverJump", then check the arrow keys and do the jumping across the river. That is the only "minigame" I currently have in mind for the maps, but I do want to expand on the game and add more. Now my question: My understanding is that at the start of the game, all states should be loaded and good to launch when needed. So I either have my main game state with all those checks built in to the update function, and have one massive update function, or create multiple states, such as a regular game state for maps that have no minigames, a state for the map with the river crossing minigame, a state for the map with another minigame, etc, and have lots of duplicated code (player movement), making the states easier to keep track of and read, but more code loaded in memory. Which would be preferable? Thank you for taking the time to read my long post
  5. 1 point

    Texture Atlas Tiling At the Shader

    Hi @fenomas and all. I like MY explanation of ShaderBuilder... and @NasimiAsl gave me a LIKE, so perhaps I wasn't TOO far away from truth. Sorry for the "kiddy-level" talking, if it feels like such. I have been bothering Nasimi for a "print it" option, so that shaders which are appended-together, piece-by-piece, on-the-fly, with ShaderBuilder... could also be used as standard custom shaders. Standard custom shaders are most-often stored in .fx files, in BABYLON.ShadersStore, or in html <script> elements. You can think of ShaderBuilder as the 4th way to "store" shader code. Perhaps one other thing might be useful to you, F. Here is a post where Nasimi replied to my "Can we have a shader code printer?" -request. He did not show me how to print it, but he printed it FOR me. SO, I think we are seeing the end-result... of the shaderBuilder operations... that were used in that playground. As you can see, the static shader code is HUGE by comparison to the ShaderBuilder code seen in that playground. Perhaps this is an indicator of how much stuff ShaderBuilder does... behind the scenes. Not necessarily any "effects magic", but instead... take care of some/all annoying "wrapper" and/or "template/boilerplate" stuff... things that make shader code stored in the other three methods... fat and unwieldy. In other words, ShaderBuilder takes care of the annoying, repetitive base-requirements. I think it still allows you to turn all the important "knobs". Hope this helps a little. You might want to take note of THIS good Dad72 question, and Naz's answer. "you can make that from custom shader too". In other words, yeah... you don't NEED to use ShaderBuilder to assemble the shader code on-the-fly (and compile and store in umm... engine._compiledEffects[name]._program?). Instead, you can use "static" custom shader code, stored in any of the other three ways.
  6. 1 point


    Hello, Very nice game! What HTML5 game engine do you use, if any?
  7. 1 point

    Sprite height relative to stage / container

    I think the closest thing is stage scaling. That way no matter how many sprites you add, on resize you only have to set the stage's scale instead of each sprite's. Here's a little Code Pen that does this to keep the sprite sized at 100% by 50% of the stage dimensions (you have to open on CodePen to see it resize).
  8. 1 point

    Particles circle effect

    Yeah. But... there's nothing wrong with your .75 values, too. Those are 'sane' values, as well. And... you successfully nailed ANOTHER version of a 0-4 horizon line... using a diagonal image. COOL! I'm learning. I can smell it. Thx for the stuff, guys. I think @kaitek666 is hanging-around with us now, too. He was the originator of the "corner ribbon" issue. (that rotten son-of-a-... errr I mean... what a great learning adventure he started!) UVs are SO aWeird! Not as aWeird as @aWeirdo's last playground, though. I can't get my eyes to focus on that cylinder, and I'm not even hung-over. Wow! (Wingy bangs on the camera, but it doesn't help) heh Oh yeah, on a different subject... do either/any of you guys have touch-screen devices? Would either/both/anyone want to test/troubleshoot a (supposedly) touch-active playground? It uses absolutely-positioned html. https://www.babylonjs-playground.com/#143CL7#3 (It MIGHT need to be RUN... twice. If error, press RUN again, I guess) I don't have any touch devices, but if this thing is working, it SHOULD produce output to console... with touch-dragging on the two blue HTML nodes. Thx for tests/reports/repairs... by anyone/everyone. Perhaps, even the red nodes in the middle... move during dragging, too. JQuery touch code stolen from here. Thx guys, party on.
  9. 1 point
    @mattstyles That's awesome! @b10b Here's my explanation of how functional programming works and how I use it. The idea behind functional programming is to have most of your code be pure functions. A pure function is one that returns the same thing every time given the same arguments, just like a mathematical function. A pure function also has no side effects, like printing to the screen or saving to disk. Here's an example: const f = x => 2 * x f(3) will always return 6. f(6) returns 12 every time. This what Matt means by "referentially transparent"; if you wanted you could make a table of arguments and return values instead of actually calling the function. Also, calling f never causes side effects like modifying the database or opening a network connection. If most of your program behaves in this predictable, purely functional, way, it's easier (so claim functional enthusiasts like me) to debug and refactor. Of course your program still needs to have side effects, but if you push that stuff to the edges and keep it out of program logic, the rest of your code becomes much simpler to understand and modify (again, imo). So how would you write a game this way? Here's my approach: Think of game state (the position of your player, monsters (their health and positions on the field), pretty much everything your game is keeping track of) as one big data structure called gameState. This is @mattstyles's single source of truth. const gameState = { monsters: [ /* monster data goes here */ ], player: { /* player stats go here */ }, //...and whatever else you need to keep track of } Then think of player input, as well as the game clock as a big stream of data. Every time something new comes down the stream we call the game function: const game = (oldGameState, input) => /* a pipeline of functions that return a new game state */ The game function then returns a new game state, which triggers a re-render to the screen, the playing of a sound, or whatever. Replacing old game state with new game state is a side effect, as is rendering to the screen or playing a sound, but that doesn't happen in the game function, the game function stays pure, and thus remains easy to reason about, extend or fix. One problem with this approach is that the game returns a whole new version of game state every time, which is expensive in terms of memory. But libraries like immutableJS can optimize this for you. Also, languages like Elm, ClojureScript, and PureScript do this kind of optimization at the language level. Like Matt says, it's also possible that you might run into performance issues, this is more true for JavaScript itself than an actual functional language that optimizes at the compiler level. If you run into that kind of problem you can look at whatever functions are your bottleneck and write them in an impure but optimized way. In my game, there is a constant input stream of clock ticks, commands to create new asteroids, as well as up and down button presses from the player. The game function takes these along with current game state and returns a slightly modified version of game state with the rocket's position changed and/or a new asteroid appearing. I don't see why this approach to programming wouldn't work for any game genre. I'm starting another game project using Elm that will be a simple rpg battle engine and (possibly) a shop you can use between battles. Any time new input comes in, the game function will respond with a monster attack, the using of a potion to heal a player, or changing game state so the game renders "You Died" to the screen.
  10. 1 point
    Hiya @danksch, welcome to the forum. Let's tour THIS playground: http://www.babylonjs-playground.com/#9WUJN#22 First, you should know that this was ORIGINALLY a 180 frame animation, but I added 5 more frames in lines 37-40 (box does not change position at all during that 5 frames at the end). I do this... because we are about to put a BABYLON.AnimationEvent on frame 180. BUT, a 0-180 frame animation... might never "land-on" frame 180. Often, the last frame is 178.6 or 179.2, etc. An animationEvent placed on frame 180... might never occur. Now you know WHY I added some frames BEYOND the AnimationEvent on frame 180. Watch the JS console. You'll see the AnimationEvent (from lines 45-48) report to console near/at the animation ending. There is ANOTHER way... a "callback" called 'onAnimationEnd'. It is available as a final arg/parameter in line 61... scene.beginDirectAnimation(). This calls my onAnimationEndFromCallbackFunc()... in lines 54-57. Okay, NOW you have TWO different types of "triggers/actions" that signal the end of an Animation. What can you do with it? Well, you spoke-of stopping keypresses during animation runs. BUT, WHAT IF, instead, you block startMyAnimation()... IF boolean flag OkToStartAnim... is set false? Begin by using a function to START your animation (perhaps called from within your keyDown handler func). Example: var startMyAnim = function() { if (OkToStartAnim) { scene.beginDirectAnimation(blah, blah, blah); OkToStartAnim = false; } }; As soon as you start your animation, ALSO set global OkToStartAnim flag... to false. If OkToStartAnim is false, the user can do keypresses until they go crazy, but no repeat-starting of THIS animation. Using EITHER method of "my animation has ended", you can set your OkToStartAnim = true; THEN the user will be able to start a "repeat" animation. SO... OkToStartAnim is this one animation's "starter lock", right? You can use EITHER of the end-of-animation handlers to toggle that boolean lock. With me? I hope so. Holler if you have any questions. Party on!
  11. 1 point
    You can add the cursor to the InteractionManager's cursorStyles dictionary like this: app.renderer.plugins.interaction.cursorStyles["ew-resize"] = "ew-resize"; this.interactive = true; this.cursor = "ew-resize"; // Works now! Here's a working Code Pen that sets the sprite's cursor to "ew-resize": Disclaimer: I got this approach from reading the source and docs for InteractionManager and trying it out in the Code Pen. So it may not be the official/best way to do it. And I only tested for the latest Pixi version 4.5.0
  12. 1 point
    Just opened a new online FREE Slots and Bingo Casino - all HTML5 http://www.softwareamusements.com/casino.html Enjoy!
  13. 1 point
    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.
  14. 1 point

    Particles circle effect

    I'm beginning to think that the diagonal texture is not a workable solution. heh. This is WHY Mister Wingnut still doesn't have his UVs pilot's license. My "newest idea" is that the picture needs to be upright and level, but also diamond-shaped on square backdrop. Here is an approximation: http://www.babylonjs-playground.com/#21VLCN#26 Pretty close to perfect. AND, all with 0, .5, and 1.0 UVs and NO WANG (texture.wAng)! YAY! But, there is probably a LOT of "Wang" where you live @BangTao, yes? Okay, okay, that joke COULD BE in bad taste, sorry. But still, pretty funny. Okay, I just checked my mailbox. My UVs "Learning Permit" arrived. I can drive UVs, but only during daylight hours, and only under supervision of a UV-licensed adult. Back into CorelPaint I go, to find a "45-degree corner crop" feature. I'll be back - someday. Update: Alright, I'm back, and... yessir, things are starting to look more sane... with the diamond crop mask thing. hmm, interesting. I really like the non-negative and numerically-friendly values... for the UVs, too. Neat.
  15. 1 point
    More reading about normals http://babylonjsguide.github.io/advanced/Normals Mesh.CreateBox creates a flat shaded mesh Mesh.CreateSphere and others do not
  16. 1 point
    You need to convert it to a flat shaded mesh. http://www.babylonjs-playground.com/#53YWDR#1
  17. 1 point

    Particles circle effect

    Cool! Hey, you accomplished the task... horizon line between 4 and 0. Well done. I think it is "un-natural" for a square picture to be mapped onto a diamond shape. Perhaps the BEST way... is to create a horizon picture that is rotated 45 degrees... in 2D painting/image software. I wonder if we would see ALL 0.0 and 0.5 and 1.0 UVs... if that was done. hmm. I wonder if texture.wAng (texture z-rotation) will be involved. hmm v2.0. These darned UVs sure are goofy things, huh? https://raw.githubusercontent.com/wingnutt/misc/master/diagorizon01.jpg (diagorizon02.jpg available, too - rotated 45 degrees the OTHER way) Ok, now we have a 45 degree horizon line. Feel free to re-publish those pictures on any server you wish, if wanted/needed. I installed diagorizon01.jpg in a playground, but I didn't experiment with the UVs yet. (ok, I did a LITTLE, but they didn't do what I expected AT ALL) heh http://www.babylonjs-playground.com/#21VLCN#25 I'm not sure what we might discover. I think I'll get a HUGE cup of coffee before I start playing. Perhaps some heavier drugs, too. heh. You know about control-drag... to move-around the arcCam target, right? Often handy. Thanks for your time/testings! I am enjoying working with you... and working on this little experiment. I think others are learning and enjoying, too. Be well, party on! Keep those cards and letters coming. Pouet, sorry for all the notifications, if you have them turned-on. Did you know that EACH standard BJS particle... is a "quad", just like this ribbon? Yep, except not bent in the middle. And they are EACH part of a single mesh, like a subdivided ground grid, except their indices are done in a way... so that each grid cell appears as-if each is a unique, separate mesh. This is what makes them so high-performance. Standard BJS particles are not really flying mesh... but instead... flying vertices. We have a Solid Particle System (SPS) that can emit/fly actual mesh. Actually, all mesh transforms... position, rotation, scaling... are done with moving the vertices, I believe. I don't like to think... at that low-level, though. It sort-of hurts my brain. BJS makes it easy, yet doesn't block the way if we want to "get difficult". How's that for circling the topic "back home"? hehe. Pretty bad attempt? Yeah. lol
  18. 1 point
    Extremely beautiful and atmospheric. I was sucked into the narrative in no time. Is only the demo available or can I buy the full game yet?
  19. 1 point

    Particles circle effect

    hehe. Hey, great analysis! Well done! Excellent diagrams and narratives! I noticed that the picture is not square (it is 2,592px × 1,944px) and is not "power of 2". I wonder how well a 1024x1024 image would look/work. hmm. I might do some more experiments. You can, too, of course. I find CORS-approved images (for using in our playground)... with Google Image Search. I can filter for "free for re-use" and even exact sizes. Anything that comes from wiki, wikipedia, wikimedia commons, etc... is all CORS-clear for re-use. Here is a tinyURL of an example. https://tinyurl.com/n6ojxng It is a search for "horizon" and it filters-out pictures from pixabay and flickr (both DON'T have CORs-clear images, and clutter/contaminate the search returns/report). As you can see, the search above... returns many wikimedia-based images of horizons... all 1024 x 1024. Bookmark that link, and when you need a CORS-clear picture to use in our playground, start with that link, perhaps. Change "horizon" to ANYTHING, change size to anything, and hit search. It seems to always return a good amount of re-use-OKAY images. Paste their URL's into a playground... they work (almost) every time. Handy. I don't understand the "power of two" requirement/preference for webGL textures. I'll let you read about that on the web and with a forum search. Something like... both dimensions should be divisible by 128? 64? 256? I can't remember, and probably never knew it, so how COULD I remember? heh. I think I'll do some experiments with some of those 1024 x 1024 images... see what can be learned. Most of the things you discovered... seem to be pointing-to image size and image width-to-height ratios. Wow, again, I can't believe what a GREAT JOB you did with this UVS research and in teaching us what you discovered. Very nicely done! You are certainly qualified to help us with our documentation/tutorials, should you ever wish to do so. I am seriously impressed. THANK YOU! Fantastic! I bookmarked that post in my browser. TWICE, in fact. Update: Here is a 1024x1024 using your #19 playground. Looking pretty good. Interesting! You're a genius, BT! You are DEFINITELY on the correct trail, here. Soon, we will have horizon line being parallel to ground, crossing between points 4 and 0. Yay! Errr... is that what the objective is? I dunno, I can't remember. I guess we can learn, and have fun, no matter WHAT the objective is.
  20. 1 point

    3d reference grid

    A 3d reference grid using BABYLON.MeshBuilder.CreateLineSystem http://www.babylonjs-playground.com/#P6XHUB
  21. 1 point

    ball webgl multiplayer

    holla guys! i made a simple multiplayer game, but its's obviously still in progress. physics ball-pad
  22. 1 point
    http://www.babylonjs-playground.com/#1ZEABJ#14 http://www.babylonjs-playground.com/#1ZEABJ#16 planet
  23. 1 point
    @awbummer I am not used to playing text adventure games, but this game was pretty catchy:p suggestion: if you plan on adding more music , maybe a player so that you can scroll trough the soundtracks (next previous track)? Nice work!
  24. 1 point
    Good news @MrVR, I found that using video texture for panoramas it's possible!!!! Look at https://threejs.org/examples/webgl_video_panorama_equirectangular.html So, now we need to wait for BJS "big dogs" (as @Wingnut call them) to know how to do with BJS...
  25. 1 point

    Good Ways to Fight Distractions?

    Looking through the daily routines of some of the most creative and productive people from history (e.g. in infographic form) there is one thing that they have in common that is having a bit of resurgence recently which is 'down-time'. From that infographic and ones like it, specifically that means exercise (blue) and social (yellow). Don't underestimate the importance of time away from your obsession.