Popular Content

Showing content with the highest reputation since 05/27/19 in all areas

  1. 2 points

    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.
  2. 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)
  3. 2 points

    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.
  4. 2 points

    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
  5. 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!
  6. 2 points
    Trump's Wall Game started out as a joke but somehow manifested into something that is...still a joke. It's a persistent world with one thousand nine hundred and sixty virtual miles along the border. Choose either the red team (builds wall) or the blue team (breaks the wall). Then go nuts and build or break away. Trump's Wall Game is a living breathing thing so any changes you make will be reflected for the rest of the world to see. Oh, we also hired a Trump impersonator to do the voices. That in itself is worth checking out. Enjoy! Play the game here: https://meowyorktimes.com/wall.html Game was created by a three man team in a few weeks. A designer (me), a developer and an artist.
  7. 2 points

    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
  8. 2 points

    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.
  9. 2 points
    Are you sure you didn't turn on Battery Safe Mode when trying Cordova?
  10. 1 point
    I found the answer here: https://stackoverflow.com/questions/20295954/loader-requirejs-doesnt-respect-dependencies I must use this construction in RequireConfig.ts: shim: { "pixijs": { exports: "PIXI" } }
  11. 1 point
    I've been building a library of images that you are welcome to use in your projects. They are all original...all my own work. I think a lot of them could be made into cool textures for games. There are seamless ones as well as standard. All I ask is to be attributed as indicated on my homepage: http://soundimage.org/ The images are on my "TXR" pages. I'm adding new ones all the time, so be sure to check back often. I sincerely hope that some of them are useful. Any and all feedback is welcome and always appreciated. 🙂 All the best, Eric
  12. 1 point

    bugfix for Panda2 p2 plugin

    Hi @enpu, I just encountered en fixed a small bug in the p2 pulgin. Since it is not open source, I cannot create a pull request so I decided to post it here instead: p2.js line 13876: context.rect( -shape.width / 2 * body.world.ratio, -shape.height / 2 * body.world.ratio, shape.width * body.world.ratio * game.scale, shape.height * body.world.ratio * game.scale ); should be: context.rect( -shape.width / 2 * body.world.ratio * game.scale, -shape.height / 2 * body.world.ratio * game.scale, shape.width * body.world.ratio * game.scale, shape.height * body.world.ratio * game.scale ); Hope this is helpful. Stephan
  13. 1 point
    Hi everyone, I've implemented a webapp where the user sees a table from top-down perspective and can decorate a cookie. For different sprinkles I've used simple rects and animated them with tween.js (or something like that). For liquid sugar I've modified a native webgl implementation based on the navier stokes equation. The last part to implement are marshmallows. Since the 2d projection of cylinders (which a marshmallow more or less looks like) can vary quite a bit if you rotate it I thought its time to try out the PIXI.Mesh, PIXI.Shader and so on classes. const vertexSrc = ` precision mediump float; attribute vec3 aVertexPosition; uniform mat3 translationMatrix; uniform mat3 projectionMatrix; void main() { gl_Position = vec4(projectionMatrix * translationMatrix * aVertexPosition,1.0); } `; const fragmentSrc = ` precision mediump float; void main() { gl_FragColor = vec4(1.0,1.0,0.0, 1.0); } `; I've noticed from another example that pixi passes a projection and translation matrix already. However... I dont know really how the projection Matrix looks like. If I pass in the 3d cylinder coordinates (range [-100,+100] for each dimension), I can just see two parallel yellow lines with quite a bit space between them. I guess the projection matrix must somehow slice the z-dimension probably at z=0 or something. Sooo my question is ... if I pass in a custom projection matrix is there something I need to consider? or is there any pixi.js magic happen that will make it hard to visualize this cylinder? Thank you very much : -)
  14. 1 point

    bugfix for Panda2 p2 plugin

    Haha. 😂 Enpu's still around, and fixes things when problems are found, or add's new stuff. I think the communities just been a bit quiet. I've been pretty swamped to work work on any of my own stuff.
  15. 1 point
    Hamza Wasim

    Box Tower - An Addictive Game

    Hi! I have created a game called Box Tower. I worked a lot to make it run smooth. Here is the link to the game: https://gamedistribution.com/games/box-tower-1 Game Description : Box Tower is an addictive game. Drop the box that is moving on the other box. Touch, Mouse, And Keyboard all are supported.This game is compatible with Admob. This game is created using Construct 2. Game Instructions : While playing on pc or laptop use “Space” key to drop the box or press left click to drop the box. While playing on a smartphone or tablet, tap anywhere on the screen to drop the box. Game Features : Made with Construct 2 Full HD 1080×1920 pixels Touch, mouse, and keyboard support Sound effect Highscore I would like to have your feedback about the game. Thanks!
  16. 1 point

    The future of web games

    There is Unity Tiny - It is in the early stages, but it should do exactly that: https://unity.com/solutions/instant-games
  17. 1 point
    Code above (within a function called animate_head). Won't log "LOOPING" or stop, but the animation displays on canvas and loops infinitely. Have been looking through forums and have no clue. The stop() call is just so I know the onLoop is working. With or without that line, still doesn't log.
  18. 1 point
    @linhcophu I believe that every API has a sample code in the documentation I shared with you (shareAsync does, at least)
  19. 1 point
    Thank you very much for the reply! I went to make the breakpoint and it turns out I was using a script tag in the client towards an old version of pixi on Cloudflare before the addition of onLoop. I am updating the script tag to a static route towards the correct file in node_modules (per https://stackoverflow.com/questions/27464168/how-to-include-scripts-located-inside-the-node-modules-folder). I am indeed rather new to open source and had some skittishness about digging into libraries. I'll abolish that effect - for the future, when overriding a Pixi class, do you modify the js file directly or some other method? Thank you again.
  20. 1 point
    Using pixi.js v5, I'm trying to fill a polygon with about one hundred vertices using Graphics.drawPolygon(), but the polygon is drawn incorrectly. When I reduce the number of vertices to about 50, then the polygon is drawn correctly. Is there any limit (near 100) to the number of vertices that Graphics.drawPolygon() can draw? Thanks.
  21. 1 point
    Finally I found the solution in 43061-poor-performance-on-panning. My polygon coords where too big (in the order of 10^8). What mostly misleaded me was that batched polygons where draw ok, but not batched ones where drawn wrong. I've solved the problem by making graphics.position equal to the polygon center and, consequently, reducing polygon coords in the order of 10^4. Thanks for your help.
  22. 1 point
    it maybe a engine issue. Firefox use mozilla right ? chrome,edge,vivaldi use chromium engine. maybe try search in the web with thoses keyword. `mozilla` `memoryleak` `canvas` `webgl` `refresh`
  23. 1 point
    left is global mem and right gpu mem from your navigator. do those value grow when you refresh your navigator and snapshot each time? it should not
  24. 1 point

    Poor Performance on panning

    Hi, I'm trying to make an interactive polygon map with pixi js but panning gets dreadful stuttering on panning with over 6000 polygons. I made a screen record. https://streamable.com/qexxv When I reduce my Polyongs to 1000, panning gets smooth. This is how I add my Polygons to Canvas var g = new PIXI.Graphics(); g.beginFill(1); g.lineColor = 0xffffff; g.lineStyle(1, 0xffffff); g.drawPolygon( arrCoordinates ); g.endFill(); app.stage.addChild(g); and this is my pan function: var lastPos = null $(canvas) .mousewheel(function (e) { zoom(e.deltaY, e.offsetX, e.offsetY) }).mousedown(function (e) { lastPos = { x: e.offsetX, y: e.offsetY }; }).mouseup(function (event) { lastPos = null; }).mousemove(function (e) { if (lastPos) { app.stage.x += (e.offsetX - lastPos.x); app.stage.y += (e.offsetY - lastPos.y); lastPos = { x: e.offsetX, y: e.offsetY }; } }); Could someone tell what I can do to increase performance, please note that I need to interact with almost every polygon. And is it possible to store customs values for each polygon, so when I click on one of them, I would like to display these values, etc? I'm currently working with SVG and it's fine but it gets also very laggy on mobile devices when panning, so I thought pixel graphic would be better.
  25. 1 point
    PixiJS Application class is for hello-worldies. I congratulate you! You passed to the next step - you have to create your own app and gameloop: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop I hope that article explains everything. Well, except interaction. Interaction currently is inside Renderer as a plugin, `renderer.plugins.interaction` and i dont know if it runs on app ticker or pixi shader ticker or pixi global ticker (yeah, there are THREE tickers)
  26. 1 point
    when exactly do you create Application or Renderer?
  27. 1 point

    Text Quality

    Hey guys, I am facing some issues with the text quality. My canvas size is 1280x720 and I am displaying it in a 1920x1080 screen. Thus my text becomes blurred. Please help me out to improve the text quality.
  28. 1 point
    It should be dead. I think the problem is actually that your App initialization depends on browser cache and something goes wrong with events, and your app initializes 14 times. Another possibility is that I really dont know modern UI frameworks and instead of full refresh browser just hits the anchor of your page and forces re-load of app router. Which UI framework do you use?
  29. 1 point
    did you have the same thing if you do Ctrl + F5 orCtrl + Shift + R this shortcut refresh with empty cache.
  30. 1 point

    Poor Performance on panning

    Hello! Welcome to pixijs community! There are many ways to improve performance of certain elements : graphics/sprites/meshes/whatever. Lags can be two types in this case: 1) your polygon coords are too big and shader precision is not good enough to pan properly. in this case use small coords, move big part to "graphics.position" 2) FPS is low. drawcalls/shader change/other stuff. Its fixable but it requires long lectures or a demo. 3) its interaction lags. I dont remember if anyone had that , but maybe its possible. PixiJS actually checks ALL polygons, it doesnt matter if they on screen or not, there's no vertex/shape culling in pixijs. Please give us more information or demo.
  31. 1 point
    I made this instruction for Babylon.js, but I hope it will work for Pixi.js too: Debug, Release, Playground using BabylonJS and TypeScript (forum.babylonjs.com) BabylonJS and TS. Debug, Release, Playground (gamedev.net) I will write such instruction for Pixi.js soon.
  32. 1 point
    @b10b Oh you are right, it is documented (thus it should work). I understand your use case, it makes sense. Would you mind opening a bug report on our bugs tool? https://developers.facebook.com/support/bugs/
  33. 1 point
    I want to render a simple JPG (just to begin with) using PIXI v5 inside of my Vue v2 page. The sprite is not rendered (most likely PIXI.Container is not rendered too). Still, I can see in Network that the image is loaded just fine. I append pixi.js app instance on $ref in created() hook. I use PIXI.Loader to load the image - still it does not appear on the screen: just some background color provided on PIXI.Application initialisation. This is how I init pixi app instance: created() { this.$nextTick(() => { const { pixi } = this.$refs; PixiSceneRenderer(pixi); }); }, This is the exported function: export default function PixiSceneRenderer(element) { const app = new PIXI.Application({ // setting like width, height etc }); const { renderer, stage, loader } = app; // Appending view to DOM elem element.appendChild(app.view); const container = new PIXI.Container(); container.x = app.screen.width / 2; container.y = app.screen.height / 2; container.pivot.x = container.width / 2; container.pivot.y = container.height / 2; stage.addChild(container); loader.add('image', require('path to my image')); loader.load(); loader.onComplete.add(onAssetsLoaded); resize(); window.onresize = function(event) { resize(); } function resize() { let w; let h; if (window.innerWidth / window.innerHeight >= ratio) { w = window.innerHeight * ratio; h = window.innerHeight; } else { w = window.innerWidth; h = window.innerWidth / ratio; } renderer.view.style.width = w + 'px'; renderer.view.style.height = h + 'px'; } function onAssetsLoaded () { createElements(); update(); } function createElements () { const texture = loader.resources['image'].texture; const sprite = new PIXI.Sprite.from(texture); // setting up sprite x and y coords, height, width etc container.addChild(sprite); } function update () { renderer.render(stage); requestAnimationFrame(update); } } What am I doing wrong? I followed tuts on this forum and on pixi's docs and still couldn't get a solution
  34. 1 point

    Creating Input element

    How I fixed this: I've put the input and canvas in the same div (this is the parent div) and set the parent div to Relative Set the input field to Absolute, and now you can put it where you want with Top and Left
  35. 1 point

    Creating Input element

    OK, got it, I'll get someone here who speaks React-ish.
  36. 1 point
    I've sent you invite to pixijs slack, in case you are interested and you use slack.
  37. 1 point
    No, I wasn't using any filters on it. All the colors and design were done in Adobe Illustrator before putting it in the project 😎
  38. 1 point
    @ivan.popelyshev, I think you were right to question the pixel width and height! I looked at the blue arrow png and it was 1920x1080 because of a ton of extra transparent space around the arrow. I edited it down to a much smaller resolution in Photoshop instead of scaling it down in Pixi and now it shows up again! I think this means that the canvas has trouble drawing pngs that have a greater original width or height than the canvas itself in Cordova's WKWebView.
  39. 1 point
    pixijs v5 typings are in the same pixi.js package. You dont need to install @types
  40. 1 point
    I mean size in pixels. Width, height
  41. 1 point
    antialias: false , just in case if you set it to true...
  42. 1 point
    ok, i looked at your demo, and that's a very big zoom. 500k tiles in geometry is a very heavy scene. However im working on pixi-tilemap improvements and maybe i'll add support of 500k tiles. Thank you, I will use this demo for debug! Though I cant estimate the time, im currently under very heavy load.
  43. 1 point
    The code i have there is for general case, whether its backed by Graphics or pixi-tilemap or just sprites. I dont understand your question I recommend to use one graphics per many lines, but not just ONE graphics. That's "chunk" optimization, i dont have small example for it, only big ones like https://github.com/ivanpopelyshev/bombermine-shuffle , thats very old one that doesnt use pixi.
  44. 1 point
    You can maintain 2 or more Graphics objects and delete the old one when it goes outside the screen, creating new one at the right side. Or just clear() and move it to right. Also I saw that you depend on RAF too much, if you switch tabs and then switch back, something wrong can happen 2 minutes is strange, i think it'll crash later. First you'll have too many lines inside and everything will disappear because we have only 16-bit indices at the moment. It'll become slow because of constant reupload. The next day it will crash. Are you on linux?
  45. 1 point

    Renderer transparency performance

    I believe that theoretically, transparent false in the renderer settings is quicker, so that's why it's the default. But in my experience, it's going to be negligible compared to any scene you're trying to render, and transparent true also helps work around occasional driver issues on older Android phones. So because of that, I'd personally always set it to true.
  46. 1 point
    P.s. thank you very much for your amazing work, @ivan.popelyshev. I've been using your pixi-projection plugin recently and it's awesome!
  47. 1 point
    +1 for Typescript. Webpack/Rollup are actually pretty easily configurable and versatile module bundlers. The web moves fast and it's about enabling you to use the latest and greatest tech while still supporting outdated targets as painlessly as possible. Large projects written in plain ES5 with file concatenation are usually a nightmare to maintain and work on unless they are beautifully written and documented by skilled and knowledgable people. Code editors don't know anything about the project unless you configure them to and they have complex JS analysis features. Even then it doesn't work particularly well a lot of the time. ES5 JS + namespaces look so dated and a chore to read and write at this point. Some of the Grunt/Gulp configs I've seen and worked on are far from simple too btw.
  48. 1 point

    Text smooth scaling / text mipmaps

    You could get really good looking fonts by using sdf-fonts (signed distance field). Though implementing one requires lot of knowledge on shaders. Luckily there's a plugin https://github.com/PixelsCommander/pixi-sdf-text What I usually do though is to have basic textfield with double the fontsize and then use it at 50% scale and try to avoid going over 125% scaling as then it starts to look pretty bad. With the method of forcing to pot I think you need to say in addition that the texture should use mipmapping.
  49. 1 point


    It's totally fine. Maybe you want to make sure that you pause all your greensock tweens when phaser gets paused (manual or by code/lost window focus) so that no tween is running during the pause. I used TweenMax.globalTimeScale(0) && TweenMax.globalTimeScale(1) in the past to do so. This will affect all running tweens or timelines. By setting the time scale to zero TweenMax will set the time to a nearly infinity long duration which equals to a full pause. Set it back to 1 to resume. Use the phaser signals game.onPause and game.onResume to register these actions. game.onPause.add(function(){ TweenMax.globalTimeScale(0);});game.onResume.add(function(){ TweenMax.globalTimeScale(1);}); Regards George