Leaderboard


Popular Content

Showing content with the highest reputation since 03/17/19 in all areas

  1. 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.
  2. 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!
  3. 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!
  4. 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!
  5. 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.
  6. 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.
  7. 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/
  8. 2 points
    bruno_

    How many webworkers to create?

    I don't know any link that explains this directly. But web workers are not part of javascript. Web workers are a browser feature that you can interact via javascript. This means that when you want to process your code in the background, you tell your browser using a javascript api to do your work and pass back the result in the end. This background process works the same way as any background thread your browser executes. If you execute 100 web workers, the browser will use its web worker pool to execute your workers, the pool may have 10, 20, ?? threads, but probably not 100.
  9. 2 points
    i was made this demo, maybe it will be more revelen with class https://www.pixiplayground.com/#/edit/WqMGLC7M3Fre3boCU1c1b
  10. 2 points
    rje

    Viewing number of draw calls webgl

    https://spector.babylonjs.com/
  11. 2 points
    Bitcanvas

    Appropriate use of the right tools

    Hi, I am trying to build an trading orderbook heatmap which basically takes all pending orders from a securities and plots it in the form of a heatmap shown below where brighter colors mean more volumes. Canvas 2D implementation has has performance issues given the number of blocks and so I am exploring the idea of using webGL through PIXIJS as I am familiar with Canvas 2D APIs. Would like to know which tools should I start experimenting with. I understand you may not have a definite set but a menu of tools to choose and experiment with for best performance). Use case is to efficiently draw large number of small blocks
  12. 2 points
    decrease the quality parameter -> less texture2D calls -> works on mobiles. I have better glowFilter, to be published soon
  13. 2 points
    I am making UI Components Framework for Phaser 3, that is driven by JSFL-generated jsons and atlases. It means that you can build your UI in Abode Animate, export it with given script, and forget about manual code positioning and building stuff! Please, try it out. https://xense.github.io/phaser-ui-comps-docs/tutorial-showcase.html Docs, examples, tutorials: https://xense.github.io/phaser-ui-comps-docs There are two basic things in this framework. First is ComponentClip, which is a view instance, it is recursively self-build by provided json and atlases. Second is UIComponentPrototype, which is clip controller. It can be easily extended to create any components, windows or whatever you need. Essential meaninig of it is that it doesn't need a clip to exist always. For example, you can change states of a root clip, and child clip can get new clip instances, ore lose them, and nothing bad happen. Some base components are already included UIButton has 4 states, "up", "over", "down", "disable" UIButtonSelect same as button, but behaves like checkbox, has 8 states, by adding "_select" suffix to UIButton's states when selected. UIButtonRadio Selectable buttons, that can be grouped to select only one of them. UIButtonDraggable same as UIButton, but also emits drag event, drag bounds can be self externally. UIScrollBar vertical or horisontal bar with draggable thumb and prev/next buttons. UIProgressBar Setup only start and end elements positions, scale, rotation or alpha, and this component will interpolate them according to provided progress value. UIScrollPanel Helper for scrolling any element with UIScrollBar. UIContainer Base container component to add other dynamically created components inside. Can be easily extended to create any types of lists, for example. I'm still working on new components and extending existing functionality. Tell me, would you use it, what other components you may need, and whatever you think about it. Any feedback is appreciated! Also I'll be thankful for any collaboration. Available at GitHub and npm
  14. 2 points
    Hello, Starting back from the Triangle Mesh Example, I would like to add it to a Container, and use the Container.alpha variable to act on my triangle (as it would do with a sprite). Please see this playground: https://www.pixiplayground.com/#/edit/5usZGTmqzQ4MtxP~QLUfF container.addChild(triangle); container.alpha = 0.5; // <- NOT WORKING (EXCEPT FOR 0.0) Triangle should be semi-transparent. What is the good way to do that? Thanks Romain
  15. 2 points
    -AAG-

    I hate designing levels!

    There! I said it! 😡
  16. 2 points
    PunyGames

    Why did the forums move?

    I am not sure on Discourse policy of sharing data with 3rd party, but you can't really escape tracking. Most websites use Google Analytics. Your best bet is probably using Firefox with disabled tracking, using throwaway email for each service, (+ KeePass so you do not have to remember) and VPN.
  17. 2 points
    utkayd

    Need some help with a Free Drawing App

    Worked like a charm! You are a lifesaver, Ivan, thanks a lot.
  18. 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.
  19. 2 points
    Velith

    SpineBoy Mouse Track

    Hi, It should be something like that : // 0. Listen which Pixi mouse event that you want (here PointerDown) stage.onPointerDown = (pixiEvent) => { // 1. Get the bone/constraint that you want to move using mouse const target = mySpineObject.skeleton.findBone("target"); // 2. Modify it's coordinate with the mouse event of pixi target.data.x = pixiEvent.data.global.x; target.data.y = pixiEvent.data.global.y; } Not test..
  20. 2 points
    Hello, and welcome to the forums! I like drawing apps and i helped with several before. Basically, you want a textured brush, right? Graphics.beginTextureFill might help with that, you just have to clear() and drawCircle(x, y, r) every time you draw a brush. Usually I use multiple brushes (whole stroke!), and render() a container that has them - its more efficient per frame. There are other tricks, like, how to make transparent (alpha=0.5) brush and not override brushes in the same stroke. As for your original question - you have to wait some time before someone reponses, because my telepathic abilities aren't enough. My post was written without preparation, i didnt even look at your demo yet. Precise answer takes time to prepare.
  21. 2 points
    Igor Georgiev

    Load all assets in a folder

    How about a script like this: var fs = require("fs"); var list = fs.readdirSync("game/static/assets/audio"); var dynamicAssets = "{\n \"paths\":\n ["; for (var i = 0; i < list.length; i++) { dynamicAssets += "\n \"/assets/audio/" + list[i] + "\","; } dynamicAssets = dynamicAssets.substr(0, dynamicAssets.length - 1) + "\n ]\n}"; fs.open('build/dynamicAssets.json', 'wx', (err, fd) => { if (err) { if (err.code === 'EEXIST') { console.log('dynamicAssets.json already exists'); return; } throw err; } fs.write(fd, dynamicAssets); }); and then you load them like this: let bootLoader = new PIXI.loaders.Loader(); bootLoader.add('dynamicAssets', 'dynamicAssets.json?version=' + version) let dynamicAssetPaths = this.app.bootLoader.resources.dynamicAssets.data.paths; for (let assetIdx=0; assetIdx < dynamicAssetPaths.length; assetIdx++) { let assetPath = dynamicAssetPaths[assetIdx]; let regExp = /([^\/\\&\?]+\.\w{3,4})/g; let assetName = regExp.exec(assetPath)[1]; PIXI.loader.add(assetName, "." + assetPath + "?version=" + version, {loadType:"XHR", xhrType:"blob"}); }
  22. 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/
  23. 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/
  24. 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).
  25. 2 points
    khleug35

    Space Shooter J Hit

    Hello Everyone. My new HTML5 shoot em up game made using Panda2 This game can play on mobile or desktop, but this game is no sound yet. Special thanks to @enpu, @Stephan and @Wolfsbaneteaching me coding skill, really thanks This game can play on mobile or desktop Try the game in here , hope you enjoy: https://superfranco.itch.io/space-shooterjh Android Version: Google Store Link ScreenShot: How to Play? For desktop control W key - Up A key - Left D key - Right S key - Down P Key - Pause the Game Space - use subweapon For Mobile control You can control the ship movement with JoyStick Click or press the icon to use subweapon and Pause the game. You can destroy the enemy and get money to buy a new ship and upgrade them. Mega Bomb - Mega Bombs damage and clears all forms of the enemy from the screen. When upgraded to level 3 or above,it can also clear enemy gunfire or bullet. Laser - Laser allows you to deal massive damage onto your enemies. Energy Shield - Energy Shield can protect player, When upgraded, it improves the duration of the shield. Mobile version. Android This is a classic vertically scrolling space shoot 'em up game. It has 9 levels with Easy and Hard unlocking regimen. The Hard mode can make double the amount of stars as your reward. You can go to store to upgrade your ship and buy a new ship. How to play -Control the ship movement with JoyStick -Click the icon to use subweapon and Pause the game. Item- Coin - Dropped from enemies , you can take this to upgrade your ship and buy a new ship. Health - Heals 20% of your ship. Subweapon item - increase one Subweapon amount of use. SupWeapon Mega Bomb - Mega Bombs damage and clears all forms of enemy from the screen. When upgraded to level 3 or above,it can also clears enemy gunfire or bullet. Laser - Laser allows you to deal massive damage onto your enemies. Energy Shield - Energy Shield can protect player, When upgraded, it improves the duration of the shield. Ship upgrades are Attack -power of bullets from main cannon. Speed - speed of ship. Health - endurance of the ship. SupWeapon - increase your SupWeapon power or improves the duration of the shield. If you clear all the stage with Hard mode. You are successful to complete the game. Made With: https://www.panda2.io/
  26. 2 points
    cafelatte

    Pixi.Mesh gl_FragColor Alpha Channel

    Hi, I've tried to change the Alpha Channel on gl_FragColor on a Mesh, but it doesn't show a result as I expect. For example, on the pixijs.io example ( https://pixijs.io/examples/#/mesh/triangle-color.js ) void main() { gl_FragColor = vec4(vColor, 1.0); } If we changed the line into void main() { gl_FragColor = vec4(vColor, 0.5); } It doesn't show any difference. Is there any workaround/settings I need to adjust to use the alpha channel correctly? Thanks.
  27. 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)
  28. 2 points
    Rezoner

    SpriteStack - 3D Pixelart Editor

    Ahoy there. I have just released a standalone version of my voxel editor where you draw models layer by layer like a 2d image. It features very neat spritesheet exporter with my handcrafted retro renderer made in WebGL. Please take a look at https://spritestack.io/ to get more info. I am also glad to anwser any questions.
  29. 2 points
    Dumadu

    3d Highway Racer

    My 3d game in html5. Looking to provide non-exclusive licenses of this game https://playcanv.as/p/f5b2f1db/ Contact me for more details: arif@dumadu.com
  30. 2 points
    Thank you for your answers! I was thinking about creating a custom tools, but I figure this should be a fairly common issue so there had to be a solution out there I didn't know about that PS to Spine exporter, that looks really promising! I'll take a look at it! Thanks!
  31. 2 points
    YMShen

    Text smooth scaling / text mipmaps

    I'm glad you that my old plugin can offer some help It is still at an early stage and only tested in pixi.js v4.7. Don't even have a README yet. Since pixiv5 have breaking changes in mesh & bitmap font classes, I still need time to learn and adapt. PR is welcomed! Take this snippet as a quick-start if you don't want to clone my repo and build it yourself: https://jsfiddle.net/g04xLqdh/ BTW: Here is a command line tool to help you generate MSDF bitmap font assets: https://github.com/soimy/msdf-bmfont-xml
  32. 2 points
    ivan.popelyshev

    Making GUI in 2019 with Pixi

    Do the right side with react, field with pixi. problem solved. The biggest collection of pixi ui elements is https://github.com/pixijs/pixi-ui/ but its not documented nor is it moved to v5 and typescript yet. Text input: https://github.com/Mwni/PIXI.TextInput SDF fonts: https://github.com/PixelsCommander/pixi-sdf-text , https://github.com/avgjs/pixi-richtext We are working on moving all plugins to v5 and we are making new tutorials. I hope in half of year we'll have complete set of stuff for games, but right now its not the case, so go for React to save time.
  33. 2 points
    Are you sure you didn't turn on Battery Safe Mode when trying Cordova?
  34. 2 points
    I wrote an article on this. Thoughts welcome! https://medium.com/@michelfariarj/scale-a-pixi-js-game-to-fit-the-screen-1a32f8730e9c
  35. 2 points
    Hey there, I made this little game called Life in the Static, the basic gist of this game is that you have an ability to stop time. LINK TO PLAY THE GAME: Tasty Link
  36. 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?
  37. 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.
  38. 2 points
    its not an edge case, sometimes just one resource can fail, depends on what server or service do you use. If its a problem for your users, make a fallback, for example you can start downloading everything again
  39. 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!
  40. 2 points
    Exca

    creating a animated soft color

    You can do that with vertex shader by giving each vertice a color and then gpu interpolates between those points. Or you can do the calculation in fragment shader to get more refined look. Here's an example how it could be done with fragment shader https://www.shadertoy.com/view/tls3zS For info on how the color palette is done read this article http://www.iquilezles.org/www/articles/palettes/palettes.htm
  41. 2 points
    themoonrat

    PIXI Interaction Touch

    You rang, m'lord? @JECKL try looking at `renderer.plugins.interaction.eventData.data.global` instead
  42. 2 points
    That's exactly why a year ago we've added this awesome API into v5. Right now v5 is almost there, and you can experiment with v5-rc3. I really hope that you like that system because I made it exactly for cases like yours, it was VERY difficult to explain to everyone in the team and get an approval. People need access to textures, authors of PixiJS cant possibly know everything that user wants. This is how you get GLTexture: https://pixijs.io/examples/?v=v5.0.0-rc.2#/textures/gradient-resource.js if you call "baseTexture.update()" somewhere before the frame, it will notify TextureSystem that texture needs updating , and then when one of pixi renderers asks to bind that texture, it will call "TextureResource.upload" method. That's how it happens: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/TextureSystem.js#L139 According to our main image resource, https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/BaseImageResource.js#L64, you can track the state not only by dirtyId, but also by "glTexture.width/height" . Basically, if width and height are wrong you upload whole texture, otherwise you go for subImage. As for previous data, readPixels is tricky thing, its the only synchronous operation there. When I use it, I call it only after whole render(), only one time. I suggest to maintain your copy of teture independently from glTexture: in an array or in canvas in your TextureResource, that way you wont need to call readPixels(). SUMMARY: If glTexture width and height are wrong, upload whole array. Otherwise modify part of array you need, put that part into temporary array and call subImage. Dont forget to set width and height to correct values. and HAPPY DEBUGGING!
  43. 2 points
    b10b

    ctx.clearRect() not working with Image.

    @James432213 hi, many issues here, all solvable. 1) The function named "canvas" rename this and avoid some confusion, call it "init" or similar 2) doKeyDown function has parameter "e" but references "event" in the switch - be consistent. 3) the functions doKeyDown, updateCanvas, drawPlayer are scoped "above" the "init" function, so they can have no easy reference to the "canvas" variable defined within "init". Notice also the name collision of "canvas" if we ignore step 1. Easy fix is to move these function declarations inside the "init" function. 4) There's nothing wrong with ctx.clearRect Some basics in how to debug your code will be beneficial, in particular the developer console (F12) is great, and using "console.log" can send helpful messages there from your code. Use that as a start towards watching the flow of your code when it runs, and where things are not actually working as might be expected on a first draft of code. This will lead to more advanced debugging techniques and more elaborate (and working) code.
  44. 2 points
    Do you draw something else than the video to canvas? If something taints a canvas then it stays tainted no matter what is rendered in the future. Or it might be due to stream becoming unavailable at some point for short duration and that could cause tainting (though the bug report I found on this should be already resolved, it was 5 years ago). Pretty sure it's some kind of edge case in security constraints which causes canvas to become tainted (by something), which causes security error when pixels are read from it.
  45. 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.
  46. 2 points
    there is no public property available but you could use the following private property timer._pause working example: var timer = game.Timer.add(1000, function() { sprite.remove(); }); if(timer._pause){ console.log("paused") } else{ console.log("Not paused") }
  47. 2 points
    @dataj, I am pretty sure you can find all the information in the documentation. Maybe you forgot to associate your game to your business? https://www.facebook.com/help/publisher/709041312624617/
  48. 2 points
    ivan.popelyshev

    Fading trail

    First demo will be here in 5 minutes or so : https://pixijs.io/examples/#/textures/gradient-basic.js It took me only one cup of soothing tea.
  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
    Thanks @NoxBrutalis I was focusing to much on the .createMultiple() method. Simply creating the coins in a loop and then adding them to the group worked for me this.gameitems = this.physics.add.group(); for (var i = 0; i < 20; i++) { var x = Phaser.Math.RND.between(0, 800); var y = Phaser.Math.RND.between(0, 600); var newobj = this.gameitems.create(x, y, 'sprites', 'coin1'); } Btw is there a way to get the width and height values (800 and 600) from the current scene or game instead of using hardcoded numbers for the RND function?