Leaderboard


Popular Content

Showing content with the highest reputation since 09/20/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. 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.
  4. 2 points
    i was made this demo, maybe it will be more revelen with class https://www.pixiplayground.com/#/edit/WqMGLC7M3Fre3boCU1c1b
  5. 2 points
    rje

    Viewing number of draw calls webgl

    https://spector.babylonjs.com/
  6. 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
  7. 2 points
    Hmm, moving server broke this feature, but I've enabled it again (along with SSL, which also broke for some reason). So now, you can upload things again.
  8. 1 point
    KayacChang

    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
  9. 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
  10. 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.
  11. 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!
  12. 1 point
    Hello Community, Greetings. Anyone know how to create perfectly radial bars in construct 2 like unity. Thanks
  13. 1 point
    128p

    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!
  14. 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.
  15. 1 point
    khleug35

    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.😁
  16. 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.
  17. 1 point
    I guess the only other way I can think... If the gradient was put onto offscreen canvas and you had an algorithm go along each edge removing pixel in a dither pattern with transparent pixel to create the dither.... Again though.. not sure on impact to performance.
  18. 1 point
    Jammy

    How many webworkers to create?

    Actually that really helped, I had completely ignored that fact... This is definitely a "per-browser" thing and already I've dug up some content from Chromium. Thanks for the help! https://docs.google.com/document/d/1i3IA3TG00rpQ7MKlpNFYUF6EfLcV01_Cv3IYG_DjF7M/edit#heading=h.7smox3ra3f6n
  19. 1 point
    pixi-heaven had spriteMask for v4, but this particular feature wasn't ported yet. You can try make a batch renderer plugin with shader that multiplies resulting color by alpha of your gradient: https://www.pixiplayground.com/#/edit/5iyQ5DmCftTiCOi2VxJ0i that thing will be batched, if you specify "pluginName='myPlugin'" for all your sky objects.
  20. 1 point
    The prospects of an Android game developer have been on the rise due to extensive growth and popularity of Android operating system. This operating system is user-friendly along with being innovative in UX and UI. A large number of Android game application development companies opt for the following steps in their scope and approach of work: https://www.redappletech.com/features-scope-approaches-android-game-development/
  21. 1 point
    Nagaraju

    video visible size is empty

    I could able to fix this issue. This could be the known answer but it is new to me..😄 var video = document.createElement("video"); let id = "videoPixi"+this.screenData.screenId; video.id = id; video.crossOrigin = "anonymous"; video.src = (this.screenData.background.video.currentUrl); document.body.appendChild(video); var video = document.querySelector("#"+id); //video.preload = 'metadata'; video.preload = 'auto'; video.autoload = true; The above two lines in bold made my day
  22. 1 point
    See this fiddle, based on the first interaction example. both over and out return null for target I tried pointerout with the callback. I'll check with the arrow function
  23. 1 point
    from you event scope just use this.toLocal(e.data.global); // or mySprite.toLocal(e.data.global) Suppose this is the scope of your sprite to your event, example of use case for anime element from your mouse to a sprite as children. pointerup(e) { const from = this.toLocal(e.data.global); this.addChild(elementFromMouseToThisSprite); TweenLite.fromTo(elementFromMouseToThisSprite, 0.3 ,{x:from.x, y:from.y}, { x:0, y:0}); };
  24. 1 point
    Hm hm, I see. I figured out that for my purpose I can use .currentPath.points Thanks!
  25. 1 point
    Hi all! I have something like this let spline = new PIXI.Graphics() .lineStyle(1, 0xaaaaaa, 1) .moveTo(100, 100) .lineTo(200, 200) .lineTo(100, 500); And I want to get all points like this let points = spline.geometry.points; let values = []; for (let i = 0; i < points.length; i += 2) { values.push({ x: points[i], y: points[i + 1] }); } But cycle doesn't work, because of this points.length Then I decided display points and points.length console.log("points: "); console.log(points); console.log("points.length = " + points.length); and what I see Then I tried to get just one (first element) console.log("first element"); console.log(points[0]); and.... I really don't understand what is it and how it works. Someone know, what it can be?
  26. 1 point
    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.
  27. 1 point
    Nagaraju

    How to clear PIXI.Application?

    I have implemented PIXI application with more containers like containers inside another container. I am adding PIXI.Texture for video and PIXI.Sprite for Image view. Everything working fine for the first time. Whenever I try playing video again by closing and opening page, I can see blank and throwing Uncaught TypeError: Cannot read property 'updateTransform' of null I found somewhere that I need to clear the containers and PIXI.Applications. I am doing like below but could not get it done. try{ if (this.appRenderer != null || this.appRenderer.stage != null) { if(this.ticker.started){ this.ticker.stop(); this.ticker.remove(this.tickSlideRight); this.ticker.destroy(true); } this.mainContainer.children.map((item) =>{ //it contains another container in which video and image functionalities implemented item.destroy(true); }) this.mainContainer.destroy(true); this.imageSlideElementHolder.removeChild(this.appRenderer.view); this.appRenderer.stage.destroy(true); this.appRenderer = null; } }catch(ex){ console.log("Component Unmount, Pixi release ",ex.message) //TO-DO }
  28. 1 point
    so. no beginTextureFill, just a mask? ok. I think the problem is that curves on different pieces are actually different - there's no guarantee how curve will be separated to multiple points. That's why some AA samples aren't covered. Option 1 Play with constants inside PIXI.GRAPHICS_CURVES, https://github.com/pixijs/pixi.js/blob/dev/packages/graphics/src/const.js For example, lowPoly setting: https://www.pixiplayground.com/#/edit/3cAvPO~SyYqCie1_xym4C Your target is to make curves the same in your pieces. If they match, there wont be uncovered samples in AA-ed pixels. Option 2 Use a filter on it that will remove "parasite alpha". https://www.pixiplayground.com/#/edit/jIM4IjmDFhS9q8fP_yunQ Adjust the value according your case. 0.5, 0.6, 0.7, something like that. Warning: extra post-process effect might be slow on some devices.
  29. 1 point
    I have a getMask function which generates each piece mask like this: let mask = new PIXI.Graphics(); mask.beginFill(0xFF3300); mask.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y); Where p1, p2, p3 are curve points. The third line repeats 4 times for each side of the piece. getMask returns a mask, then I implement it this way: tile.mask = mask; tile.addChild(mask); Where tile is a clone of the whole image.
  30. 1 point
    On their page it is indicated that the payment threshold is $ 30, but, apparently, they canceled it. Or is it a bug. I got $ 2.88)
  31. 1 point
    Hi! No, its not possible because its a part of webgl context creation parameters, limitation put by the WebGL standard. You have to create new renderer to do that. Also "x" and "y" aren't params anymore, you have to pass PIXI.autoDetectRenderer({width: x, height:y, transparent: false}); Welcome to the forums!
  32. 1 point
    Just wanted to say that your work is very much appreciated! Do you have a rough idea when it's going to happen? I'm on a waitlist for it since the initial release of v5 😁
  33. 1 point
    Awesome thanks again ivan
  34. 1 point
    Hello again! As promised - I keep in touch, today came the payment for June. Which is very pleasing, I hope that in the future payments will be received monthly without delay.
  35. 1 point
    dacatchman

    Rotation values

    So to answer about other engines, matter.js does, phaser does. These are just some I looked at recently. PIXI is the oddity in my mind, but I don't play with engines all that often; the behavior was unexpected from me and so I was just curious if there was some use case I missed. I never used flash or action script, but those are dead now right? Background isC/C++ mostly. Thanks for replying, appreciate it.
  36. 1 point
    ivan.popelyshev

    Rotation values

    > What use is rotation, declared in radians, past 2pi ? Yeah, You might want to ask creators of Adobe Flash and other renderers. Even those who use degrees work past 360 just fine. Do you have an experience with renderers that automataically set angle in (-pi, pi) or (0, 2pi) range? llike, obj.rotation = 361; if (obj.rotation === 1) { ... } Many things dont make sense for some people, but usually we copy behaviour from others or decide on something together.
  37. 1 point
    mobileben

    MTB Hero

    Maybe one way of handling jumps is letting the player do a little bit of a trick move when they have air time? Perhaps giving some extra "bonus" for doing so. Bonus to provide some incentive (note since you are time based, that would need some further thought on what the bonus does or if an extra point system is added ... or perhaps it adds some "speed up"). But also, if timing isn't right on the jump, there is a "wipeout". I double quote that because a wipeout could be treated much like running into a barrier. I agree with totor though. I thought there would be jumping.
  38. 1 point
    Devy

    Help Budgeting An Idle Game

    Thanks @ivan.popelyshev Since this is now in the jobs section, I'm open to take offers from freelancers for this project. Notes: - I already have the graphics elements (with appropriate sizes/ratios/pixels res for all major devices) - I have the complete Maths ready as mentioned by @b10b in a spreadsheet, it's the one from Ad Cap, but it needs to be integrated in the code itself (and loaded via a Json config file). This is not a huge problem, as long as you specify where in the code I should use the formulas, I'll be able to update it myself. So yeah, open to proposals. Thanks!
  39. 1 point
    I will keep you guys posted on my progress. Thank you for the help
  40. 1 point
    hi @cpu_sam, I've recommend you to check on v4 code, https://github.com/damian-pastorini/reldens/tree/v4.0.0 and join the discord channel if you have any questions, I'll be glad to answer https://discord.gg/HuJMxUY Best,
  41. 1 point
    Actually, a fluke test may have just shed some light on this. I was temporarily commenting out the baseTexture change just to avoid the bug, and it seems like it transferred between atlases automatically. So am I correct in thinking that all frame names are stored across all atlases, and will automatically assign the appropriate one? Thus also meaning that frame names would have to be unique per atlas?
  42. 1 point
    PIXIEDUST CATBOX

    Relic Runway

    This is an impressive game, and fun to play. Good job.
  43. 1 point
    Try Pixi-ui , it has DynamicText but lacks documentation, however @bQvle responds to people who get stucj in his code. Just spend a few hours with it. You didnt mention do you use v4 or v5? Text-related plugins werent ported yet
  44. 1 point
    ivan.popelyshev

    Pixi js editor

    There are solutions but nothing is easy. There's pixi-svg https://github.com/bigtimebuddy/pixi-svg that can take info from svg. There's also Tiled editor and https://github.com/eXponenta/pixi-tiled that allows to take polygons and sprites from it, but I dont remember if it has export to graphics, but hey, you can add it! Currently I work on solution to open SWF files so people would create graphics in Adobe Animate. I think that you can do something for your case, I saw that teams who made games on pixi with their own engine always did their own editors. I do not know why there is no Graphics, I never needed it and I guess people hold their stuff and dont release it I think that https://twitter.com/Pix2d is going to add support to pixi soon.
  45. 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
  46. 1 point
    Alenvei

    Camera smooth reset position;

    ehm i think i figured out when i posted my last comment I tried this : if (camera.alpha < 4.71238898038469){ camera.alpha += 0.04; } if(camera.alpha > 4.71238898038469){ camera.alpha -= 0.04; } and it worked i think this forum has some wierd aura or somthing always when I post some issue a few minutes leter I figured out out what I need Thanks again for you long post @Wingnut
  47. 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.
  48. 1 point
    If doing an art package style thing then I would suggest using Input.addMoveCallback to get a smoother result than polling pointer coordinates in an update. Also the Input manager has a coordinate history feature built in btw (Input.recordPointerHistory) but I wouldn't use this for a drawing app personally.