Leaderboard


Popular Content

Showing content with the highest reputation since 02/23/19 in all areas

  1. 4 points
    Hey. Some info from us. Please note this is an info for a full catalog of our games (88 titles in total, 5 new games added in 2019). Browser Html5 games - we (team of 5) make a living out of it. Some licenses, some b2b deals, some ads. Facebook Instant Games - was super nice in 2018. In 2019 our reveue from games (old and new) is rather small. Still makes a little sense to publish new games there. Mobile games - zero. null. nada. Not a single dollar.
  2. 3 points
    https://valhallaepisodes.com/ This is the first game I've ever made and released to the public. Made in Phaser 3, using React for UI elements. Full list of all technologies are available in game. It's an adventure puzzle game adapted from an old Amiga game of the same name; You must guide the Prince through the castle in order to Reach the Lord of Infinity and take your rightful place on the throne. You must think both logically and laterally to complete your objectives. Hi. This is my very first game created, and I'm happy to take any constructive criticism you guys can throw at me
  3. 3 points
    8Observer8

    Javascript Courses!

    I like to learn by practice with writing simple games. Start here: 2D breakout game using pure JavaScript
  4. 3 points
    plicatibu

    Javascript Courses!

    I recommend you give a try here: https://javascript.info
  5. 3 points
    Stephan

    Is Panda 2 Dead?

    Hi all, I just wanted to let you know that Panda is still my primary game engine and I have no plans to abandon Panda. The absence of @enpu is unfortunate but don't forget that Panda is open source so most of the time, it is possible to fix minor issues yourself by having a look in the source code. Currently I have two large commercial projects powered by Panda and it is expected that these project will be running for at least several years. Don't forget that Panda by itself is a great engine and that it has a couple of features that not all other engines currently are supporting. Take hires support and the custom Panda GUI for example, these are just great! I will continue to read this forum on a regular basis. If there are questions that I can answer quickly, you can count on my support. Stephan
  6. 3 points
    dimanux

    Relic Runway

    RELIC RUNWAY Are you ready for crazy adventures? Run as far as you can, collect coins, upgrade useful bonuses, pick up parts of ancient relics, unlock amazing characters, and compete with your friends to be the best relic runner! LINK: https://gemioli.com/relicrunway/ MAIN FEATURES: Beautiful and dangerous Inka Ruins 10 brave heroes to unlock A lot of ancient relics to discover on your way Play with your Facebook friends And it's free for embedding on your website <iframe src="https://gemioli.com/relicrunway/" name="Relic Runway" width="640" height="480" frameborder="0" scrolling="no" allowfullscreen="true"></iframe> Please contact us at contact@gemioli.com if you have any questions, suggestions, etc.
  7. 3 points
    b10b

    Everything to create fb instant game

    I'll have a stab at these as I like to snapshot my view on things periodically ... Yes and yes. Pixi has a very decent power to size ratio and solid compatibility (v4.8 may be wisest in 2019?). For a competent developer capable of spinning their own game structure Pixi is ideal for a lightweight browser game. Coming in at less than 5MB total for your IG is wisest. Red tape aside, it's possible but improbable to make money releasing a single game. Primary monetisation choice with FB IG is in-game ads (which are a low value transaction for a developer and an intrusion to the player). In-game purchases have more value but will require significant retention first. Or consider indirect value generation such as consultancy services, brand building, learning for the next game? FB IG is inherently multiplayer (async). Within the SDK are context (group) leaderboards, notifications, packet sharing (challenges). That being said the vast majority of initial plays will be in solo mode, so a compelling single player experience is necessary for retention. Get creative for the crossover! For more advanced multiplayer use a custom backend. Having some separation / abstraction from the Facebook SDK might be wise in case other markets are a better fit for your game? For Multiplayer specifically? Yes there's a TicTacToe example that covers the basics of a client-server model. My advice is play some of the popular titles, understand what the FB IG audience seem to be attracted to and how other developers are leveraging the SDK to create retention and monetisation - warning, some of it can be ugly. Iterative development is going to be crucial, however you'll likely only be promoted once - so use it wisely, and use each territory to run a split test. Or build several games and apply the learning from one to the next etc. If you haven't built dozens of games already, FB IG probably isn't for you yet? Imo there are better platforms that can help evolve game development skills and player retention mechanics. Instead see FB IG as a specific audience with a specific style of game - developing a game precisely for that might work out very well (FB has a HUGE potential audience after all). Imo Messenger games should be about decorating a conversation, in the same way filters decorate a photo. So quick, contextual, personalised, fun, indisposable. That's not necessarily a standard casual game, so changing some assumptions and expectations may be wise. Just my advice, your mileage might vary!
  8. 3 points
    Greetings everyone! Check out our FREE asset packs at: rottingpixels.itch.io You can also follow us on social media and support us over Patreon! patreon.com/RottingPixels twitter.com/PixelsRotting rotting-pixels.tumblr.com facebook.com/Rotting-Pixels Cheers!
  9. 3 points
    enpu

    bugfix for Panda2 p2 plugin

    Yeah i'm still here! Just been a bit busy lately, but i am working on Panda 2!
  10. 3 points
    Hello, My goal is to update a small part of a texture the fastest way possible with WebGL2, preferably using Pixi.js v5 (RC 3 is out). Am I right that a RenderTexture is going to re-upload the whole texture whenever there is a change? (this would not be good for a big texture, hence why I am looking for another method) I'm a complete noob when it comes to OpenGL, but I've googled a bit and figured that I can use gl.texSubImage2D() to upload just the part of the texture that I need to change. I didn't find a way to get the WebGLTexture object of a PIXI.Texture, so to be able to use that command I did something like this (not the complete code): renderer.addSystem(PIXI.systems.TextureSystem) renderer.TextureSystem.contextChange() // needed to do this loader.load(main) // and could not use gl.texSubImage2D() on tex before the loader called main function main() { let tex = resources['test'].texture let imgData = new Uint8Array(32*32*4) renderer.TextureSystem.bind(tex) renderer.gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) renderer.TextureSystem.unbind(tex) } But I wish that I had the WebGLTexture available so I could avoid messing around with PIXI.systems.TextureSystem, because I don't really know much about it or when and how it should be used. I also want to read the previous data and change it, I figured it can be done with: gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) But that needs the frameBuffer to be binded first... Hence I tried to also use the PIXI.systems.FramebufferSystem, lol: renderer.framebufferSystem.bind(fb) //fb = new PIXI.Framebuffer(tex.width, tex.height).addColorTexture(0,tex) gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) But it was not that easy, I didn't even find a way to unbind it. But I guess it is not supposed to be used for my little problem...? Maybe there should be some Pixi.js functions to do this? Maybe something similar to this: texture.getPixels(x, y, width, height, ArrayBuffer) texture.setPixels(x, y, width, height, ArrayBuffer) I'm new here btw, this is my first post I don't have much Pixi.js experience yet, but I really like it.
  11. 3 points
    No bans are happening here (yet). @5neia_opo2@google-mail.ooo, try to understand the frustration people are experiencing. A new user came to the forum and in nearly every post they made trashed the project they were asking about. A lot of people here put in a lot of time and effort to not only to develop the project, but answer questions here as well. I was definitely frustrated reading your responses as someone who has put 6+ years of their life into this project. @botmaster did a poor job of handling that situation, but has apologized and I'm sure will do better in the future, as will you as well. Let's all be adults about this, acknowledge we did something wrong, and move on. @5neia_opo2@google-mail.ooo you are free to ask any question you need help with, but I definitely recommend reading through some tutorials, the examples, and checking the API docs before asking questions. It will often lead to you finding the answer yourself, and there will be less fatigue for the people answering here on the forum. I'd also recommend you approach things you don't understand, or decisions you disagree with, with a more open mind. Try to learn and grow the new library, not all libraries are alike and different problem spaces call for different solutions. Having a bad attitude is a good way to earn ill-will in the community and you may no longer get the help you expect if you are ungracious about it. When you find inconsistencies, or things you think should work differently, then change it! Pixi.js is an open source library built by the community. Everyone gets a chance to make the library better by contributing to it. The best way to get problems you have fixed, are to fix them yourself.
  12. 3 points
    I had some similar problems with this yesterday so I wrote up the workflow I found to work step by step. Hope this helps anyone else who finds this thread in the future. https://www.adammarcwilliams.co.uk/creating-bitmap-text-pixi/
  13. 2 points
    yulijun

    Pixi.js Showcase

    How to make pixi.js game with webpack step by step. The tutorial is focus on how to build development environment from initizlize the project to publish the project. the tutorial is here https://github.com/proudcat/pixi-webpack-demo , welcome to star.
  14. 2 points
    vornay

    Google GameSnacks

    https://www.gamesnacks.com "Bite-sized HTML5 games, accessible to everyone." https://www.gamasutra.com/view/news/358551/Google_wants_to_bring_HTML5_titles_to_lowend_devices_with_GameSnacks.php "Google has announced a new HTML5 platform called GameSnacks that's designed to help devs bring quick, casual games to any device."
  15. 2 points
    charlie_says

    Use PIXI.Graphics as button

    Thanks @ivan.popelyshev I almost replied immediately, explaining that was exactly what I had been trying... Then when I reviewed the code, it transpired I need glasses (actually, I do), I'd made a typo in "event", so of course it didn't work...
  16. 2 points
    b10b

    complex games with html5

    Unity exports to a WebAssembly and WebGL output, no "plugin" needed. But that's not to say it's ideal for web, especially not mobile web (search up Unity "Tiny" instead) Possible yes ... but consider this first ... Motion Twins' "Dead Cells" is authored with Heaps, a Haxe based game framework (which has Javascript WebGL output options). Also Motion Twins' catalog before this title was predominantly web games so they clearly have web capabilities. Therefore ... it's reasonable to conclude there's no all-blocking "technical" reason why there isn't a browser version, but there are likely many commercial or user-experience reasons why such a game isn't being published on web (yet). Same issues would likely apply / hinder any other similarly scoped game intended for web, irrespective of authoring tools? Conclusion, as always, is ** understand the audience ** ... on what platform do they want their game (big, complex, small, tiny) to be on. Or ... make web games that absolutely require, embrace and leverage the "web".
  17. 2 points
    Hello! There's one small isometry demo: https://pixijs.io/examples/#/plugin-projection/iso-basic.js However that's not how I usually do isometry. Usually I just use Y scaled by 0.5. You even don't need those "x+z" "x-z" coordinates, if you want to make tiles - take whole two-dimensional array and remove "odd" cells. Like, use only "black" cells of chess board. Then the only problem is to detect which tile is under mouse, but then it will be the only place where you have a isometry math. Everything else is just "x=x'; y = y' / 2" I have many things to tell about isometry: how to sort elements, how to make walls on tiles and intersect/sort them too, but I want to sleep. Try to do something, then I'll give you more info. and Welcome to the forums!
  18. 2 points
    nice editor dude ! very nice !
  19. 2 points
    Hey ivan (thanks for your help) I thought i'd throw an update to this. I've sorted out a majority of the issues just some polish left. I've linked to a video to see the result of what i've been working on. Any thoughts? Suggestions? If anyone else has run into this issue, reply to this topic and i'll setup code examples. https://nyrion.ca/Cyndar.mp4
  20. 2 points
    Hello! My name is Brian and I'm the Developer Community Manager with Legends of Learning. Legends of Learning is a EdGame platform looking for HTML5, Unity or Construct 2 developers to build 500 short (5-25 minute) Math games. Payout ranges from $1000 - $50000 per game depending on performance. To date, $4 Million has been paid and 1000+ games have been built. Sprint open now with slots on first come - first serve basis. Average of $4000 per game. Creative control left entirely to the developer! To learn more about the company and opportunity and to submit your information, navigate here: https://www.legendsoflearning.com/interested-game-developer/
  21. 2 points
    hum from individual test on Vivaldi browser (chromium) ~2sec test, ms per frames . (100% cpu usage for all!). It a fast test, if you guys can also take and shares same kind of screen plz. Hardware. Result link source code used: http://fatidol.com/phy-benchmark/
  22. 2 points
    ohmed

    DatTank multiplayer webGL game!

    this one is nice
  23. 2 points
    ivan.popelyshev

    Need help with shader code

    https://www.pixiplayground.com/#/edit/s~VNyhMHDC32k41fJ4iD7 OK, so, vTextureCoord is normalized input, mouse is screen coord. We convert mouse to normalized input too. power is also converted to normlalized input, by dividing. If you want to get rid of division - pixi also gives 1.0/inputSize in its "zw" part. No way to put int constant there, have to use js interpolation. Its easy to fix aspect ratio there if you need, but, since original shadertoy source didnt have it, i dont want to add it for you. I'm depressed because my articles do nothing and people still ask me to do all the stuff for them.
  24. 2 points
    I want to share a small PDF booklet with JavaScript coding challenges: https://codeguppy.com/site/download/50_coding_challenges.pdf These coding challenges are designed for beginners and intended to offer the foundation that they may need when developing mini-games on https://codeguppy.com or any other platform.
  25. 2 points
    i was made this demo, maybe it will be more revelen with class https://www.pixiplayground.com/#/edit/WqMGLC7M3Fre3boCU1c1b
  26. 2 points
    rje

    Viewing number of draw calls webgl

    https://spector.babylonjs.com/
  27. 2 points
    rich

    Alexa and HTML 5 Games

    Hi @Chelsea - I've also signed-up as it sounds very interesting! We are the developers of Phaser and I'd love to take a look at what would be involved to enable our game engine to work with the Alex platform directly.
  28. 2 points
    Hello guys and basically this topic is for you guys/developers that upload games on gamedistribution so, I read too many topics with gamedistribution and all you guys/developers that you read all bad comments, "gamedistribution not pay me yet", "gamedistribution this, that" but you still continue upload to this website and support it? Serious? And the funny is, upload too many games to get in 1-3 or more months ........ What/How earning? 50euros? Or less? They own complete chain in advertising. So officially you get 1/3 of the income of a game. But they get often 2/3 because 1/3 for gamedistribution but also 1/3 since they own big game portals like Kizi. But also: You get 1/3 of the net income. But the ads are sold by their own advertising company so they can control different between Gross and Net. So they get up to 70% and you get 15% ............ if you are lucky! My experience to them? -> Of course. I get ~100euros in 6months from 10+ games... And when i remove all and i upload to other portal, i get ~200euros in 1 month from 2 games only. Imagine how % you get from your games. Even your game is addictive, even is top of the top....... You still lose a lot money. So you can continue upload your games, no problem. And open topics again or post to ask for help. Send them unlimited emails, will answer when they want. Cheers. By the way, @GameDistribution Support I'm still waiting "success stories" ? Can you share some original-success stories? Remember? I post under your post in this topic (June 18): P.S 1: Why open this topic ? -> One (1) only answer : To help new developers and their games. I learn from my mistakes. Bad experience with this company and similar. So i share true stories, that's all. P.S 2: How know and share all this ? -> This is personal sorry but thanks to a friend, he knows. P.S 3: Am i wrong? -> As i said, no problem, you can still continue upload your games. Your results from your earnings is the only truth.
  29. 2 points
    decrease the quality parameter -> less texture2D calls -> works on mobiles. I have better glowFilter, to be published soon
  30. 2 points
    jasonsturges

    Change cursor view in PIXI.js

    Since this is the #1 Google Search result for changing Pixi cursor, just noting the URL appears to have updated: https://pixijs.io/examples/#/interaction/custom-mouse-icon.js
  31. 2 points
    -AAG-

    I hate designing levels!

    There! I said it! 😡
  32. 2 points
    utkayd

    Need some help with a Free Drawing App

    Worked like a charm! You are a lifesaver, Ivan, thanks a lot.
  33. 2 points
    Usually its good to use "position" because it affects transform and not the shapes inside graphics. But in your case, you have to rebuild shape every time because UV's are changing, that means you have to change ONLY the shape, not the position. store position somewhere else, not in "position" field. this.brush.position.set(0, 0); this.brush.clear(); this.brush.beginTextureFill(this.resources.t2.texture); this.brush.drawCircle( event.data.global.x, event.data.global.y, this.currentWidth ); this.brush.endFill(); If you want to apply brush multiple times you can just drawCircle multiple points in it. I'm not saying that its best practice, but just if you understand how transforms and texture shift work (and they work like in a Adobe Flash), then this method is probably the best for the case. There's also "matrix" param in beginTextureFill that can help you . Of course when you experiment more, you can start using position + custom matrix inside beginTextureFill but at this point im afraid to suggest that, it will only confuse you.
  34. 2 points
    Dumadu

    Bouncy Jump (3d)

    My new game in html5 done in Playcanvas engine For game licenses contact: arif@dumadu.com https://playcanv.as/p/0OdQ0ldY/
  35. 2 points
    ZYandu

    Pixi.Text v5.1.1 doesn't work

    import myBitmapTextFont from "myFontsFolder/myBitmapTextFont.fnt"; let loader = PIXI.Loader.shared; loader.add([{name: "bitmapTextFont", url: myBitmapTextFont}]) .load(setup); function setup (loader, resources){ let text = new PIXI.BitmapText("abcdefg", { font: "50px Arial", //Arial is the face attribute located inside the .fnt file align: 'center' }); } Here's my quick code example made with a custom .fnt file from bmGlyph. You really need to follow the instructions closely in the instructions link Ivan shared! 🙂 https://www.adammarcwilliams.co.uk/creating-bitmap-text-pixi/
  36. 2 points
    ivan.popelyshev

    Pixi.Text v5.1.1 doesn't work

    Found it here: https://github.com/pixijs/pixi.js/wiki/v4-Resources https://www.adammarcwilliams.co.uk/creating-bitmap-text-pixi/ the only difference is that "BitmapText" is not in extras anymore.
  37. 2 points
    First try ... Double check Chrome is really using WebGL. Spine mesh deformation can be quite intensive for Canvas and could easily account for these FPS variations (if WebGL isn't working).
  38. 2 points
    This is a really tricky question for a generic answer as there are so many variables which _could_ dictate whether your project structure works well or not so well. Personally, I'd take any answers with a pinch of salt i.e. there is no single 'best' structure, like, not at all. Have a think about what the problems you are trying to solve are and how the processes and concepts you employ for organisation are going to solve that problem? To the above question, the answer is usually 'I do not know'. This is fine. With the above in mind it is usually better to follow this sort of process: Start the project. Put stuff anywhere, it does not matter at this stage. Get something working. Keep going. Now you have a working product and you can start to identify what organisational problems you have and think about how to solve them. Until this point you are largely guessing. If you have created several similar projects before your guesses are probably good, if not, then they might not be. It is relatively easy to apply some structure and organisation to a project that doesn't really have one, it can be pretty tricky to change organisational structure (can be, depends on many things again, you certainly should not be afraid to change later on if your current system turns out to be not very efficient). There are some rules of thumb that might help you though: Small files and folders are easier to manage than larger ones i.e. small in scope, not necessarily small in lines of code. Decouple things as much as possible, this makes them easier to work with, and makes organisation easier to change. Tight coupling is a nightmare, avoid at all costs. Uber objects (and, similarly, uber-projects) are hard to manage, this is really the above concern worded differently. Divide and conquer. UI and logic (rendering and smarts) are good things to separate. Avoid logic duplication, if you end up writing similar logic in multiple places, consider generalising and abstracting it. Utility functions can form a huge part of your codebase and is _usually_ a sign of good organisation. MVC is fine for games. As are other methodologies. Go with what you think makes most sense for you (and your team) and the project.
  39. 2 points
    hi, Have you set up the code in Mainscene correctly? It should look something like this: add world this.world = new game.Physics({ gravity: [0, 1], }); //add eventhandler collision this.world.on("beginContact",function(event){ if(typeof event.bodyA.collide !== 'undefined'){ event.bodyA.collide(event.bodyB); } if(typeof event.bodyB.collide !== 'undefined'){ event.bodyB.collide(event.bodyA); } });
  40. 2 points
    void main() { gl_FragColor = vec4(vColor, 1.0) * 0.5; } We use premultiplied alpha everywhere. Instead of (r,g,b,a) we store (r*a, g*a, b*a, a)
  41. 2 points
    Are you sure you didn't turn on Battery Safe Mode when trying Cordova?
  42. 2 points
    I wrote an article on this. Thoughts welcome! https://medium.com/@michelfariarj/scale-a-pixi-js-game-to-fit-the-screen-1a32f8730e9c
  43. 2 points
    Anchor and Pivot are your friends. If you don't wish to use them because you want to maintain left alignment then consider using a child Sprite, or other arrangement of Containers. Then you can freely adjust the anchor (or pivot) of any child, do the transformation as would be intuitive and the parent will be unaffected. There is minimal overhead in using children and they can improve code readability and maintenance. The alternative (using a single Sprite) involves translating (x=-width) before the flip (scale.x*=-1) or rotation, then translate back again when done. It's unlikely to feel as intuitive - and is likely more prone to mistakes or confusion later?
  44. 2 points
    Yes, there is! Here's an example of Shockwave that you could include w/ a `<script>` element. https://cdn.jsdelivr.net/npm/@pixi/filter-shockwave@3.0.1/dist/filter-shockwave.js All filters are published to NPM with bundler file versions ("lib" folder) and a browser version ("dist" folder). You can use jsdelivr or other CDN that allows you to include files from published NPM versions.
  45. 2 points
    You are lucky! We are working on examples for playable ads. Unfortunately, they are not available yet. Wait a month or two. Also "no one ever posted their code for the issue" is MY phrase, that's how I explain people why is feature X not available. Someone asks help, I provide a few snippets, they make their app and do not share the result. Then second person asks the same thing. Then third. On 10-th attempt we have a hero who makes an article or repository and shares it with community!
  46. 2 points
    If you don't need gradients, there is this clever 3 sprites approach :
  47. 2 points
    themoonrat

    PIXI Interaction Touch

    You rang, m'lord? @JECKL try looking at `renderer.plugins.interaction.eventData.data.global` instead
  48. 2 points
    mattstyles

    I hate designing levels!

    Procedural generation can be a load of fun, but its a butt-ton of work to get working well. You could even use a genetic algorithm (GA) to create levels, have an automated actor play them, test the 'success' of the actor using fitness functions and then loop that process until you get levels (again, based on a heuristic function) that are fun to play. The up-shoot is that you can, potentially, create a near infinite number of levels like this. Or at least generate a manageable amount (say, 30) and manually curate them. Depending on how good your heuristics are you can create levels that are harder or easier for humans to play. It's a ton of work though. So depends on your mindset. Some crazy people find that a wonderful coding challenge.
  49. 2 points
    I've got a situation my physics simulation is running at high framerate (60fps), but some devices my app runs on cannot run the graphics (PIXI) at 60fps without causing the physics simulation to stutter and jump, causing undesired artifacts. So, in pursuit of performance, I shoved the physics simulator (in my case, matter.js) into a web worker, but then still found that some devices couldn't handle updates at 60fps in the main thread. So I started setting an interval to apply updates from the simulation to PIXI at a fixed rate - 30 fps to start. However, sometimes even on some devices that was unsustainable. So, the question came down to - what FPS *should* my app run at? And when I say "run", I'm talking about changing the position of PIXI objects base on updates from the physics simulation, not about changing the speed of the PIXI's ticker. Since the speed at which I could apply updates from the physics simulation and still achieve sustainable render speeds without lagging varied from device to device, I decided the best way to decide on the FPS to run at would be ... let the app itself decide at run time. So instead of coding a fixed FPS, or giving the user a slider to adjust, I let my app measure and adjust it's FPS based on what it measures as sustainable while it's running. Enter my solution for my app, FpsAutoTuner: https://gist.github.com/josiahbryan/c4716f7c9f051d7c084b1536bc8240a0 - contributed here to the community in case it may help someone else solve a similar problem. It's framework-agnostic, no external dependencies, written as an ES6 class, but could easily be rewritten as a ES5 if you wanted. FpsAutoTuner works by measuring the FPS (which you tell it by calling `countFrame()`) and then every so often (at `tuningInteval`ms), it compares that measured FPS to the `fpsTarget`. When the measured FPS goes below `fpsTarget` less `tuningMargin`, the `fpsTarget` will be decreased by `tuningRate` and the `callback` will be execute with the new `fpsTarget`. Likewise, when the measured FPS exceeds `fpsTarget` less `tuningMargin`, then `fpsTarget` will be increased by `tuningRate` and `callback` will be called with the new target. Example usage: // Somewhere at the top of your file import { FpsAutoTuner } from './FpsAutoTuner'; // Then later in your code, probably in your constructor of your game object this.fpsAutoTuner = new FpsAutoTuner({ fsTarget: 30 callback: fps => this.setFpsTarget(fps) }); This assumes that you have a function called `setFpsTarget()` on your class, probably that does something like this: // This is just an example method, on your own class... setFpsTarget(fps) { clearInterval(this._fpsTid); this._fpsTid = setInterval(this._render, 1000 / fps); } Then later in the rendering portion of your code: // inside the render loop of your code, call: this.fpsAutoTuner.countFrame(); That's it! Your app will now automatically adjust it's FPS as needed when it detects lower/higher frame rates available. (FpsAutoTuner automatically starts it's auto-tuning timer in it's constructor.) There are plenty of options you can pass to FpsAutoTuner to tweak it - they are all documented at the top of the gist. Specifically of interest, you can set `tuningInterval` (default 5000ms) to change how often it measures/changes the FPS. This all has just been a humble attempt to give back to the community. Use and enjoy. Contributions/changes/suggestions to the gist are welcome! Download FpsAutoTuner from GitHub here.
  50. 2 points
    I could not choose what to study for coding games and I decided to study these tools: Pure WebGL 1.0 and pure WebGL 2.0. I like to study linear math, trigonometry, shader math. I like to study this book which uses pure WebGL and glMatrix: Build your own 2D Game Engine and Create Great Web Games I want to understand how game frameworks works under hood, I mean: Pixi.js, Phaser.js, Three.js, Babylon.js and so on. I like to write very simple clone games like: Snake, Pong, Tetris and so on without game frameworks and game engines. I can use C++ books about OpenGL to study WebGL because WebGL 1.0 is based on OpenGL ES 2.0 (WebGL 2.0 on OpenGL ES 3.0). There are a lot of books and examples in C++ and GLSL that I can translate to WebGL. I can use ThinMatrix video tutorial to study OpenGL using Java and translate his examples to WebGL. I study C# for Unity Game Engine and I write my own simple game engine in C# and OpenGL 3.1 (OpenTK) by rewriting example from this books from deprecated/legacy OpenGL to modern OpenGL: C# Game Programming: For Serious Game Creation This book is a great. It study how to write a good modular architecture and how to develop software using TDD (Test-Driven Development). I like TDD and BDD (Behaviour-Driven Development). I am a fan of these methodologies of software development. I want to rewrite the code from this book to TypeScript/WebGL because TypeScript is very similar to C#. I liked compiled languages like C# and Java. But I study JavaScript 5 (2009) because it is very popular and I will be able to find removed jobs like freelance in the future when I will be a skilled computer graphics and game programmer. Pixi.js and Phaser.js for 2D games. It is very popular frameworks. A lot of works was made. You can write your own shaders in GLSL for these frameworks. Three.js and Babylon.js for 3D games in interactive 3D applications. These are 3D libraries based on WebGL and Canvas API like another popular graphics libraries. You can write shaders for this graphics libraries in GLSL too. Unity Game Engine for 2D and 3D games. I can write WebGL games for Desktop and I can build them for Android, iOS, Desktop (Mac, Window, Linux) to native applications and these native applications will not have browser restrictions. I can write shaders in HLSL and this shader language in very similar to GLSL. I can connect my WebGL, desktop and mobile clients to Node.js server that your Socket.io or WebSockets. For WebGL version I can use pure WebGL frameworks because Unity WebGL build does not work on mobile devices P.S. Sorry for my English. I study it but it is very hard. I did not use Translate Google for writing this message, I wrote this myself.