All Activity

This stream auto-updates     

  1. Yesterday
  2. view is canvas, so "width" and "height" are in real pixels. screen is a rectangle, and according to CSS. new Renderer({width: 800, height: 600, resolution:2 , autoDensity:true}) makes a renderer with view of 1600x1200, but screen is still 800x600, and those numbers will apppear in "view.style.width="800px"" All your stage has to be adjusted to 800x600 size in this case, not 1600x1200. - this helps for Retina displays or when tab is zoomed, or on modern phones. Its rare when someone makes it right from first try As for app in general, here's explanation: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop . Application on itself doesnt have any magic, it just creates a few components and consists of number of getters.
  3. Hello, I've started learning Pixi not so long ago, and everything seems to be going well so far, whenever I get stuck I consult the docs or the past posts. But these few terms actually confuse me a lot, app.renderer, app.renderer.view, app.screen, app.renderer.screen In this case I'm using app as the constant for the PIXI.Application. Can someone tell me what's the direct difference between those terms, and if there are others related/similar to them too that I should be aware of? Thanks in advance.
  4. Hi,ivan.popelyshev Maybe you can tell me how to achieve it?
  5. That requires coding and finding example with how make square animation first ( i remember i had one). Not simple to answer. You will have to wait for someone who has a bit of time, at least 20 minutes
  6. hello,everyone! effect: my demo:https://pixiplayground.com/#/edit/47wFCytmySTL5yl48dapG How to deal with the fill color of the border?
  7. nvm that code was really bad, got it working
  8. @grelf Thanks for the link following the rotation example on that page I have this code now: ctx.save(); // right rectangles, rotate from rectangle center // draw blue rect ctx.fillStyle = '#0095DD'; ctx.fillRect(150, 30, 100, 100); ctx.translate(200, 80); // translate to rectangle center // x = x + 0.5 * width // y = y + 0.5 * height ctx.rotate((Math.PI / 180) * rotAngle); // rotate ctx.translate(-200, -80); // translate back ctx.restore(); // Draw some text: ctx.font = "30px Arial"; ctx.fillText("Pos: " + worldPos.x + " " + worldPos.y, 5, gameArea.canvas.height - 15); But nothing happens. only if I remove the save() and restore() the rect rotates as supposed to but then it also rotates the text's position that I'm also drawing What am I doing wrong?
  9. mattstyles' comment above is spot on. Javascript is very much event driven. When something happens (user key, mouse click, touch on screen, window resizing, ... a long list) it starts a stream of processing that will end with some output: usually a switch of display buffers so that what you have been building during the stream becomes visible. Then it stops until there is another event. To create game loops that next event could be caused by the system itself if you call setTimeout() or requestAnimationFrame() somewhere in your processing.
  10. The rotation will always be about the origin (0, 0). If you want to rotate about the centre of an object you must first translate the centre to the origin, do the rotation and translate back again. Javascript rotation certainly does work. I don't find the w3schools site very good - incomplete and not fully up to date. I use Mozilla's site for reference and the occasional tutorial. They cover rotation very clearly on this page: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations Mozilla is good for finding out which browsers support newer features too.
  11. fixed in the master branch (melonJS 8.0)
  12. Hi I have been trying to figure out why javascript image rotation wont work. I'm testing the rotation demo in w3schools.com site but even that does not work. The more angle you put to the image the further it goes off from the screen. When it's supposed to rotate the rect from the middle the rect seems to orient 0,0 Here's link to the tutorial: https://www.w3schools.com/tags/canvas_rotate.asp Oh and that tutorial uses rect drawing but it's the same issued with drawImage() Any ideas why it doesn't work? I use google chrome thx!
  13. Last week
  14. I just finished my coloring app! Browser / iOS / Android It took a while with some years inbetween. Aaaalll the way back in 2017 I was trying to get some basic drawing going and got it working with the help of Ivan. Thanks @ivan.popelyshev ! Looking back at this example, it's pretty much the same as in the app. Thanks for the amazing library and all the support on these forums! it's been really helpful
  15. There's risk of overcomplicating things. Just use "find" instead of "from" in your original code. https://pixijs.io/pixi-sound/docs/PIXI.sound.html#find
  16. Perhaps the "end" of Flash will be similar to the "end" of Silverlight or Shockwave? For example, we can still install the last plugins / players if desired, they may not work especially well, or provide much modern-day utility, but for the committed die-hard it's never the "end". And there's always offline / exe / app wrapping for content providers to continue to share their content independent of browsers. Perhaps, if consumer demand warrants it, then a simpler, "HTML5 way", of playing SWF content in modern browsers may emerge (although likely won't solve many inherent usability problems). Perhaps, it'll really be the End, and nobody will mention Flash again, they will never seek to run a SWF or view a massive part of internet legacy. Blip, gone, erased. But however it plays out in 2020 and beyond the time to place commercial bets on such things was 10 years ago ... anyone with content that is predominantly SWF today has been napping.
  17. OMG, thanks bigtimebuddy You were right about my confusion. Now i do pixiLoader.add( pixiSound.default.add('explosionSound', pixiSound.default.Sound.from('./assets/sounds/Explosion.mp3')) ) and from then on I can always play pixiSound.default.play('explosionSound') Do you think that is enough for the sounds to be preloaded and for the game to start only after all sounds have been worked like that?
  18. @ivan.popelyshev Hi Ivan i just wanted to tell you that it is working, thank you for your help
  19. end3r

    js13kGames 2020

    To keep the tradition going, I'm posting a new topic for the upcoming js13kGames 2020 - online competition for HTML5 game developers, where the fun part is the size limit set to 13 kilobytes. It runs yearly since 2012. We'll have the ninth edition on the exact same dates as usual - between August 13th and September 13th. There will be many cool prizes to be won. Reference topics from previous years: 2013, 2014, 2015, 2016, 2017, 2018, 2019. Follow the competition on Twitter and/or Facebook.
  20. Speaking of Soccer game, FIFA 20 can be really the first that I'm thinking of. You can use it as your reference. Hope your game is getting better and better! If you need help with FUT Coins, you can check it.
  21. Y8, Friv, Kizi is one of the largest flash game libraries. With classics such as, familyfarm Clear Vision, Age of War and Fancy Pants, AG has been around for a long time. Flash is an integral part of early internet culture. That being said, what will happen to sites like AG after Google Chrome and other major browsers, completely stopping flashing in 2020? How do we intend to survive the inevitable Flash Doomsday event in 2020?
  22. Thanks for sharing this wonderful information.
  23. If you are looking for a good HTML5 game, you can check MarketJS and Famobi.
  24. I'm running into this issue with version `3.20.1` just looking at where it's breaking: `ForwardDiffuseLightPipeline.js` ``` else if (gameObject.tileset) { normalTexture = gameObject.tileset.image.dataSource[0]; } ``` tileset is an array so the code might should be: `normalTexture = gameObject.tileset[0].image.dataSource[0]`
  25. Hi 👋 What you need is to manage the deck in the server side as the only truth deck. Update server deck data on each player action (send player action to server) and update each player with server results (send all players the new deck). I hope this helps...
  26. Hello, in your example I guess you need to use setInteractive() before using .on('pointerdown'... About your question there are different ways you can do: Try passing it as arg to the function function makeInteractive(btn) { //use btn here... } and callit like makeInteractive(this.textBtnConnect) Or you can use arrow function and use it with 'this' const makeInteractive = () => { // use this.textBtnConnect here }
  27. Turns out, they were It actually was deceivingly simple. The PIXI code from my previous message works, but the parameter fontFileXML, which represents the fnt descriptor, has to be created as an XMLDocument (document.implementation.createDocument (namespaceURI, qualifiedName, docTypeObj)) and for fontPNGBase64String, instead of encoded PNG, just extract the canvas drawing as PIXI.Texture. BitmapFont will know how to interpret that as your custom font.
  1. Load more activity