Popular Content

Showing content with the highest reputation since 10/12/19 in all areas

  1. 2 points
    Extra info, what does mipmapping do: it scales down 2 times, then again 2 times, and obtains several "mip-levels" . then it samples the texture from levels depending on scale. Scale is determined through comparing "What coordinates of texture were asked in neighbour pixel shader". If we upload FAKE mipmap levels, we can see result like this: https://github.com/Busyrev/mipExploration , here we have curved space and its scaled in the center => mipmap is automatically switched there to next level (red), then next one (green) and so on. Manually scaling the texture and choosing sprite texture based on downscale also works! You have to use whatever you udnerstand and whatever is better for your case. Yes, it might be strange if you come from Web that now , in WebGL, you have to manage many other parameters: texture filtering, antialias, blendmodes, premultiplied alpha, gamma sRGB. Usually its managed automatically by browser, but that automatic managing can affect performance, and in WebGL world its significant, its all about performance. I'll have a talk in russian conference HolyJS about those things, I hope to translate it afterwards and use in other places too. I know that many people are smart enough to make their algorithms fast, but that kind of problems stop them just because they dont know specifics of WebGL switches and how big control they actually have, what responsobilities it raises.
  2. 2 points
    What's the size of image and what's the size of PNG? if PNG is power-of-two. then you can enable "baseTexture.mipmap=PIXI.MIPMAP_MODES.POW2" before it first renders then in case of big downscale (>2) it'll look better, it'll use those MIPMAP constants in webgl. If its not pow2 (512, 1024, 2048, e.t.c.) there are two ways: 1. make it pow2 - either scale either add more pixels at right-bottom, you can adjust "texture.frame" afterwards. 2. enable mipmap for webgl2 for any sizes: "baseTexture.mipmap = PIXI.MIPMAP_MODES.ON". It works only on webgl2 devices. In general, if you try big downscale in any WebGL renderer you'll have that problem. ThreeJS does resizing automatically. SUMMARY: its one of those things you have to know when you move your app to WebGL. There are others like that, for example: anti-aliasing, blending modes. DEMO: Try it here, comment the respective lines, switch to different modes: https://www.pixiplayground.com/#/edit/qWXxeV7e1KOyWayy6DLu5 . I know that even Google Skia webasm port has problems when you try to downscale "Google.png"
  3. 1 point
    Hey Uronstone, We are always testing new ways to improve the user experience in the games we distribute on Game Distribution. This week, we decided to run some tests and test games without outgoing links in order to increase: Gameplay time, game performance, ad impressions/gameplay on the games. In short, this was done having both our publishers, developers and players in mind. Outgoing links take players out of the games and it can be bad for the user experience. We are starting to partner up with some big publishers that are asking for games only without outgoing links. This was done to make sure your games are picked up by those publishers too. That being said, I must agree that our method was not the best and we should have communicated that better. Because of that reason, we are doing an internal test and currently still allowing games with outgoing links. In the future, we will create a better and more strict set of rules in order to improve on all ends. Any doubts, just shoot me a DM. Cheers,
  4. 1 point

    Top-Down Tank Game Showcase

    Hi everyone, I just create a simple show case for PIXI.JS. A top-down Tank game with: 1. Physic engine integration with matter-js. 2. ViewPort for 2D camara. 3. Custom Tile map and grid system. 4. Dynamic generate new area . 5. Keyboard Control. 6. GUI Interface. Example: https://kayacchang.github.io/Tank/dist/ Source Code: https://github.com/KayacChang/Tank
  5. 1 point
    Looking for someone experienced with Babylon JS or other HTML5 3d tools. The goal is to embed a tiny interactive 3d model inside the webpage. My friend's startup makes small turbines for energy generation. We need a realtime interactive 3D model of the turbine fins. There will be sliders that enable changing wind speed and direction as well as blade width, length, etc. Estimated energy generation would be calculated based on the overall simulation. Please send portfolio, CV, Whatsapp / Skype contact. Thanks! John
  6. 1 point
    I have a program where images are shown in normal HTML <img> tags as well as inside of PIXI canvases. If I have a large image, I notice it has very crisp edges even when shown at ~1% of its size. The pixi.js canvas is using pixi-viewport (https://www.npmjs.com/package/pixi-viewport) so I can zoom in and out, and I noticed that if I zoom out so that the image is the same size as the HTML one, the edges look blurry. I've tried changing the SCALE_MODE and resolution, tried forcing the canvas renderer or forcing FXAA, and even the image-rendering css property, but I can't seem to make it look like the image inside the <img> tag. This is what I'm seeing: To be clear, the one on the left is inside the <img> and the one on the right is inside a pixi.js canvas. Despite them being about the same size, you'll notice its less clear. If I change the SCALE_MODE it just looks pixelated. If I change the resolution (I've tried 1, 2, 4, and 10) I have to zoom in more, but once I have its just as blurry. Forcing the canvas renderer just made it look worse, and FXAA didn't seem to change anything. The image-rendering property seemed to have no effect except on the pixelate setting (which, obviously, just made it look pixelated). Edit: For reference I'm using pixi.js-4.5.3 and pixi-viewport-3.23.1
  7. 1 point
    Its time to enjoy your fruit of Labour and have your hardwork being paid off! GameTop is constantly, looking for developers to licence their games. Developers gets licensing fees from them and their Audience will get to play these games for free. GameTop is a company who distributes free pc games to their audience for over 10 years. Interested developers can drop Contact@gametop.com a mail. Alternatively, you can visit GameTop.com to see their large variety of games.
  8. 1 point
    I'll check out those mipmap settings. I'm on pixi v4 right now, so I'll try migrating but it's an electron app so might take a bit of tweaking. Thank you Ivan!
  9. 1 point
    wow this is very nice info, thanks ivan !
  10. 1 point
    Hello Community, Greetings. Anyone know how to create perfectly radial bars in construct 2 like unity. Thanks
  11. 1 point
    Hey everyone, I just opened a new page of stone pixel art-style tiles. You’ll find them here: ART – Stone https://soundimage.org/art-stone/ Feel free to edit as needed. I’ve also created a bunch of new ground tiles. They live here: ART – Ground https://soundimage.org/art-ground/ As always, if you have any requests, feel free to pm or email me. I hope some of my work is helpful!
  12. 1 point

    State of the market

    Yes, you're right - I'd forgotten about that (recent) extra "requirement"! Thanks for your compliment and good luck to you, whichever platform you end up on.
  13. 1 point
    Hope you're well mate. I've got a new build today that addresses a lot of the mobile issues but still with a lack of all the devices around me to test on would be great to see what happens on everyone elses device. Would you mind sparing a moment again to try on this link: https://ajamdonut.github.io/ABV2/allbuilds/v.2.2.5f/ A lot of the other issues (audio etc) have also been fixed but i'm still sure I've got a bit to go before it's rock solid.
  14. 1 point
    Hi guys, Hope you're all well. I posted my last game here a year or so back Arcade Builder - I've been working on the engine on and off ever since and I'm really trying to nail every bug. I feel closer now to a solid game now but I don't have many friends and family with iPads/Androids/Macs to test on so some feedback on those devices would also be greatly appreciated! Could you please help me and check it out and cause any issues you can? If you're feeling daring try the "Hell pit" level and tell me how badly or how well it runs. https://ajamdonut.github.io/ABV2/allbuilds/v.2.2.4/ The major changes since the last version are: Changed tile system to pixi-tilemap Changed viewport to pixi-viewport Added tablet controls Added fixes for Safari Re-coded AI Added browser compatibility checks All feedback and suggestions really appreciated. Even if its bad news Thanks, Jammy.
  15. 1 point

    State of the market

    It makes total sense when you look at it this way. Problem being, by doing some pretty quick math here I'd have to pay about $240 USD in total (btw that is R$1000 BRL my country's currency, terribly expensive!) the extra $140 bucks there is because it would be necessary to buy a really cheap old iPhone just to setup two step verification. Handing off $240 bucks for a solo developer in my budget is like a shot in the dark. Question, would I do it if I those resources available? Undoubtedly! But for a still maturing platform I'd rather think twice before stepping in. @Noel: Good point Noel, it's a one time fee, that's refreshing. @b10b: Stock Car Hero looks incredible! You guys did a pretty good job there, congrats!
  16. 1 point

    State of the market

    @128p yes opt-in for iOS seems like a reasonable option, especially initially. I'd imagine from FB's perspective they'd prefer to present their blue app as a consistent platform / experience that transcends device? E.g. it'd be a bit odd if some features were available everywhere except when the user picks up their iPhone? Plus politics ... Apple sure like their rake, so given the lack of opt-out this is an unsurprising (if frustrating) requirement. Questions to consider are ... how are you imagining monetizing your game, and how does FB help you do that in ways that can't be achieved by going to individual platforms directly? The $100 gift to Apple probably shouldn't be the barrier.
  17. 1 point

    Remote Full-stack Typescript Engineer

    CrazyGames.com, a fast-growing browser games platform, is looking for a remote Full-stack Typescript Software Engineer. You will be the main full-stack developer working on a complex responsive server-side rendered React application. The application has built-in internationalisation and high performance requirements. It is made with Typescript, Node.js, Next.js, and GraphQL. You will be working with our tech lead and front-end engineer on code used by up to 1 million people every day. https://jobs.crazygames.com/o/remote-fullstack-typescript-software-engineer
  18. 1 point
    https://github.com/pixijs/pixi.js/issues/6171#issuecomment-542156688 "Remove package.lock and node_modules" helped. Thanks!
  19. 1 point
    Hello is anyone else experiencing this error on iOS 13: WebGL: INVALID_VALUE: uniform1iv: invalid texture unit Here's the full message: [Warning] Turning drawing buffer preservation for the WebGL canvas being captured (0.0.js, line 6472) [Error] WebGL: INVALID_VALUE: uniform1iv: invalid texture unit uniform1iv anonymous (Anonymous Script 1 (line 7)) syncUniforms (0.0.js:9832) syncUniformGroup (0.0.js:9818) anonymous (Anonymous Script 2 (line 22)) syncUniforms (0.0.js:9832) syncUniformGroup (0.0.js:9818) bind (0.0.js:9791) _render (5.5.js:5905) render (0.0.js:14434) render (0.0.js:14439) render (0.0.js:14439) render (0.0.js:14439) renderAdvanced (0.0.js:14492) render (0.0.js:14430) render (0.0.js:14439) render (0.0.js:11619) render (5.5.js:748) emit (0.0.js:17454) update (0.0.js:17993) (anonymous function) (0.0.js:17692)
  20. 1 point
    The difference is in number of vertices. We use either Sprite BatchRenderer if its small or "Graphics.renderDefault" for big number. That code will use "renderDefault" for all graphics, and you'll have that error always! PIXI.GraphicsGeometry.BATCHABLE_SIZE = 1; Make that number big enough - all your shapes will fit in batcher instead and it'll be ok. That narrows the code segment but i dont have iOS devices to test. Gonna call rest of the team on this. I think its possible critical issue, need to reproduce and fix it ASAP.
  21. 1 point

    Ropes Game

    @AlienBurn recommend you try both and see which one suits you. For me Panda -Easy to learn, I have three games made with panda. -Very small community. -Panda Editor is not free but it can make you code your game faster(export to web or mobile is easy). -Growth So Slow, Engine has not updated for a long time, I worried that it like impact.js. Phaser -Much tutorial and Demo Example (but it left me quite confused after looking at multiple tutorials and even trying a few test projects.) -Very large community. -if you want to export to mobile and Code obfuscation, You need to learn cordova/phonegap , Webpack etc….it's totally free -Engine keep updated each month, fast-growing. Finally, Both of them are an awesome HTML5 engine.😁
  22. 1 point

    Top-Down Tank Game Showcase

    you should switch from just "keydown" to setting FLAG to true on keydown and setting it to false when its up. In update, if flag is true - move the tank. When I press "W" tank moves a bit, then autorepeat starts, like in old NES tetris. Im not a hyper-tapper
  23. 1 point
    Dropbox has traffic/requests limit. Also you can just specify "import * as PIXI from 'pixi.js" in every file, you dont need plugins, right?
  24. 1 point
    I wouldn't use that playground on your place, it seems that it over-uses webpack. If you have problem with codesandbox , make a project that doesnt work for yuo and I and @eXponeta will help with fixing it
  25. 1 point
    TS works fine: https://codesandbox.io/s/hexagon-stars-l4mms?fontsize=14
  26. 1 point
    Yes, your demo works for me now
  27. 1 point
    Here, I added my png, its not base64. However, now that playground doesnt serve me that file. At all. There's nothing in "images/ship.png" it tried to load. I dont have anymore time to "play" with that playground, i use others. https://next.plnkr.co/edit/TMhxNzFY0h2vBRDg
  28. 1 point

    Image is not loaded on Playground

    Because it is not direct link.
  29. 1 point
    its because texture doesnt exist. maybe crossOrigin issue. Oh , right, dropbox - you cant load files from dropbox , their server prevents that.
  30. 1 point
    Well, you destroyed texture but sprite still has link to it and when app renders-> sprite renders->goodbye. There's no way to set all sprite texture to null when you destroy texture. If we make mechanism like that, it will REQUIRE everyone to use destroy() on sprites which is not requirement right now.
  31. 1 point
    Hey again Jammy! I remember last time this was posted! It's looking good. So putting my old tester hat on... In terms of setup of tech... You say it's got tablet controls... but loading on a phone it's zoomed in to a tiny area with no way to pinch to zoom out or anything Use m4a rather than mp3. Better sound quality for same bitrate, and it's much better at looping audio than mp3 can ever be Get loads of console errors due to the kaching in my console. Consider using an off the shelf lib like Howler to handle audio? Performance wise it all held up fine to me! In terms of gameplay Set a limit to zoom in and zoom out via mouse wheel. I was able to lose the game location by zooming out too far! I like the blue squares to tell which way items are facing... but since the floor is blue, it's still really hard to tell! And sometimes the 'blue' is underneath the machine itself. In the hell zone, bring up one of the middle fireball machines. First, the X to close the details I didn't notice at first, because it's a fair way from the box itself. But you click it... and the details come back, because behind the X is another Fireball machine and I guess the click isn't blocking propagation! Arrow keys to move about the map would be nice. I found Two Point Hospital got camera movement for this kinda game right. I something things 'linger' too long when I've select something. If you have a chair selected, I don't want to have to go down to the x to not select it anymore. I want to press something to stop having it selected. Right click without scrolling? Dunno! I click on upgrades, and I've still got the chair selected! I feel a similar thing with some of the ui.
  32. 1 point

    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.
  33. 1 point

    How many webworkers to create?

    Its really hard to answer to that. All devices and browsers may have different behavior in performance. I think you should use the minimum resources you need. A web worker not always generate a new thread, its asynchronous execution, but multiple workers may be running on the same thread. Try first to make your game without any web workers and test it on the devices. If the game is too slow, and when optimizing the code is no longer an option, create your first web worker. After that, test again, if one is enough good - that's it, if not continue to test one by one until you reach the desired performance.
  34. 1 point

    Phaser + React JS

    This post is quite old but is still at the top of a Phaser 3 and React Google search. Hopefully the below can help new users trying to combine Phaser and React. For Phaser 3 and React with Create-React-App I tried following this guide: https://www.zephyrcoding.com/phaser3-with-react/ However, I ended up configuring webpack myself and wrote this guide: https://medium.com/@Tnodes/integrating-react-and-phaser-3-tutorial-eb96717d4a9d
  35. 1 point
    Hi all, I've created this sub-forum specifically for discussion about Facebook Instant Games. Use it to chat about the API, ask questions and post links to tutorials or code you've found useful. It doesn't matter what HTML5 game framework you're using (if any), but if you are using one, please say so in your post, so others can better help you. The FB API is the same regardless, but how you implement it is likely framework specific. This forum will be moderated by Facebook Instant Games staff where possible. Cheers, Rich
  36. 1 point
    In Phaser 3 is it possible to create a group and add multiple sprites at random positions? I've tried looking at the documentation here and the example here but couldn't figure out how to do it. This is my code so far, it does add one coin at a random position each time I run it, butit only seems to add one single coin. // add random coins var coins = this.add.group(); coins.createMultiple( { key: 'sprites', frame: 'coin1', setXY: { x: Phaser.Math.RND.between(0, 800), y: Phaser.Math.RND.between(0, 600) }, frameQuantity: 2, repeat: 5 }); Coming from Phaser v2, I've just started working with Phaser 3 and it takes some time to get to understand the differences.
  37. 1 point
    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?
  38. 1 point
    in mono

    get state

    It's not "too much info", it's just the whole state object. If you're looking just for an identifier, try this: game.state.getCurrentState().key It will give you the key you used to add the state to the state manager.
  39. 1 point
    Hello! In the past year, I have decided to do a HTML5-based game, and I kept going at it ever since. Full production is something that is still a bit far ahead, but I managed to squeeze out every single little detail of canvas-related performance that I could find. Here are my experiences, tips, and all that jazz. 1.On buffers Simply using a buffer canvas (an invinsible one) and then drawing that to the screen instead of using image-> canvas is really, at first glance, not faster. The applications of this is not meant to be as simple as that, however. You want parallax scrolling? You want fancy effects generated from a multi-layered spritesheet? You can predict that is going to be needed? Then you can save processing time by using buffer canvases. There are all sorts of clever tricks to this. Imagine if you need to compile a 4-layered parallax background scroll in about...240 frames (4 seconds). You can process the picture, add the layers to a hidden canvas, frame by frame, in small parts. No single frame will make this buffering draw more than, say....50*50, once per frame. And then once it is completed (pre-painted), you can just draw parts of the buffered image, showing the user the parallax scroll in all its glory, by rendering it only once per frame. If you omitted this process, you will need to draw the bacgkround as it is moving N times, where N is the number of layers. This is just one trick. You can build animations from multiple layers, buffer it, and only draw one square (frame) instead of requiring multiple layers of composition and different draws over and over. Conclusion: buffer-canvases are good, when used with preparation. Just using them natively (for the sake of using them) is not a performance benefit. 2. Canvas size matters, especially (but not only) in mobiles. Never use bigger sized canvases than you would truly need. There is a directly testable performance gap between canvas sizes. Sounds like a no-brainer initially, but it is not. Logic would dictate that if I redraw an x*y size area of an 1200*800 canvas, that would be similar if I did the same redraw of an 1000*600 canvas, but it is not. Use clever positioning, CSS, background images if you want to be as optimal about this as you want to be. 3. The most important canvas optimization #1: Be smart about redraws. There has been many tutorials describing this. You should not redraw everything all the time. Multiple canvases are good because you do not need to clear/redraw stuff when one object moves. In my rpg game, there are currently 5 layers used. Background, UI-BG (frames) layer, character layer,puzzle layer, text layer. When the character moves around, it does it in a different canvas than the background. - 1) Only redraw animation frames when you need them to. Non-moving object? No redraw. - 2) Only clear (clearRect) when you need to. Be very precise about the areas needed to be cleared. Doing 5*(40*100) clears is usually better than doing one 400*100 clear. - 3) This has yet to be carefully tested - more like anecdotal evidence, but you need to organize your drawing like.....canvas 1: Perform all clears, all draws. canvas 2: perform all clears, all draws. DO not do canvas1 clear, canvas 2 draw, canvas 1 draw canvas1 clear canvas 3 draw canvas 2 draw canvas 1 clear canvas 4 clear. It is a performance loss. My own "camera" framework gets draw/clear commands thrown at it, and it keeps separate clear/drawQueries, and at the end of an animFrame, it draws all queries and clears all queries. Goes from canvas to canvas. I was afraid it is going to be convulted, but in a HTC Desire 310, I can achieve 30-60fps on my game, even without further resolution adjustments. And it has constant animations, parallax scrolling, moving puzzle, five layers. I am almost satisfied with it. Before I started optimizing the game, it crawled in single digits. 4. The main culprit behind slowdowns is usually the garbage collector. Seriously. I have looked at so many HTML5 Canvas/webGL games in the past few months, looking for answers, and most of them have the quick sawtooth performance that is painful to watch. Let us assume your game runs at 60fps. Theoretically. Now, with regular GC, you can get a visible slowdown every seconds, even if it is just a hitch to lower 50's. (60->57->51->60->51->etc.). You need to have a VERY carefully written code to eliminate this. Basically, no anonymous functions, no var declarations hundreds of times per frame, no spamming of new objects per frames. I could write pages on this - and if there is a relevant topic for it, I might. -,but this is the main part of it. 5. Be aware of smaller performance traps. Text rendering is one like that. Changing alpha value of a canvas again is. Doing translations is once again. (Better buffer both of these on a hidden canvas in a loading stage, and keep the alpha intact!). Do not use console.log on mobile versions, they will just throw exceptions sometimes multiple times per frames. What you started with is true: aim for the lowest amount of redraws and clears every frame. Find tricks to average these out and manage them that way instead of having busy and calm periods. I am right now at the end of my canvas "patience". I still love this little tech, but I am at a point where I am looking at just porting all that to webGL. Canvas support will stay in the game just in case, but it is clearly not going to be flawless on low-end mobiles for a few more years. It is going to be "fine" in better-than-average mobiles, average or better tablets and excellent on iPads/iPhones, viable on most modern desktop PC's. But you have to be careful about the resource uses.