Popular Content

Showing content with the highest reputation since 06/07/20 in Posts

  1. 3 points

    Fake 3D models in Phaser 2

    I got tired of looking for animated sprites for every game, so I decided to make a little fake 3D engine for pixel graphics. Now I can code my own procedural animations I am hoping to use this is in a variety of games I am working on, including a little fantasy mmo.
  2. 2 points
    If anyone is interested, I solved this by importing the json file and then using the Spritesheet class, as per this thread https://github.com/pixijs/pixi.js/issues/4029 import mySheetData from '../mySheet.json'; ... startLoad(){ this.loader.add('main',mySheetData.meta.image); this.loader.on('complete',this.loaded.bind(this)); this.loader.load(); } loaded(){ let mySheet=new PIXI.Spritesheet(this.loader.resources.main.texture.baseTexture,mySheetData); mySheet.parse(() => { myResources=mySheet.textures; }); } ... this.background=new PIXI.Sprite(myResources["background.png"]);
  3. 2 points
    Here you go: https://codepen.io/ivanpopelyshev/pen/jOWLjKd Serious problems: 1. I converted uniforms to pixi format 2. cant just specify 'uvs' if you use default pixi vertex shader, according to source it needs aVertexPosition and aTextureCoord. 3. its better to use aTextureCoord in frag shader instead of gl_FragCoord and resolution Sugar 1. use pixi interaction instead of document mousemove. works when mouse is above mesh. In case you move mesh I added getLocalPosition (aka toLocal). If you want it to work even not above mesh, subscribe on "renderer.plugins.interaction" , not mesh. You can subscribe on stage , but stage might have not all screen. If you have background - stage will work of course 2. width/height specified in start of doc What I didnt do: 1. this demo needs margin:0 padding:0 overflow:none for body css, as always for fullscreen rendering apps For tasks like this its better if you clone pixi repo , open it in separate IDE window and search for classes that you use (i hope you know shortcut) . Its close to webgl calls and you should see how things are stored and then converted to webgl operations.
  4. 2 points
    it's 'Loader' with first capital letter and you need to change it for resources as well var loader = PIXI.Loader.shared; var resources = PIXI.Loader.shared.resources;
  5. 2 points

    Pixi Projection 3D Surface

    For surface, you need your own Mesh3d because there's no such class in pixi-projection. This is an experimental project, and people who use it should look in sources, understand code, and write their own extensions. It should be much easier than doing your 3d from scratch or trying to port other 3d engines to pixi core. Yes, Im planning on porting whole threejs to pixi later In general, the problem of joining 2d and 3d objects in the same scene is big. Every time someone tries that - easy 2d API gets ruined by heavy 3D, or 3D becomes a mess. It took huge amount of my hours to make that architecture on pixi that doesnt require big changes in core and introduces billboards without ruining API. @jonforum helped a lot with his tests. As far as i know, one of best solutions of 2d/3d are AwayJS and I'll definitely port something from them too.
  6. 1 point

    WebTransport & WebCodecs

    A status update on WebTransport and WebCodecs: - The creation of a WebTransport Working Group is under review at W3C until end of July 2020. The group would be tasked to standardize the WebTransport API. - The shape of the WebCodecs API is actively being discussed in the WICG/web-codecs GitHub repository, including discussions such as whether to follow WHATWG Streams (current approach is to rather decouple WebCodecs from Streams), or whether to have a synchronous option for encoding/decoding.
  7. 1 point
    Ah okay, that makes perfect sense, I do have filters included. I will look into using the Layers, I had hoped to not need them but it seems the time has come! Luckily I have spent enough time working with PIXI v5 to be able to easily add in the Layers plugin. Thanks for your help and quick responses! Rarely had any issues with PIXI and generally can find the solution fairly easily. Perhaps worth noting this issue somewhere, perhaps in a v5/v4 "Gotchas" section, I have spent probably 20 hours researching this issue, pulling code apart and trying various "solutions" but failed to ever find the cause. Also massive sidenote - I attempted to update to 5.3 from 5.2.4 and all my avatar rendering disappeared, didn't look into the problem at all (unfortunately) as I was too stressed with this issue! Once I've moved onto using layers and got my code back to working order I will retry and see if I can replicate the problem. Thanks once again!
  8. 1 point
    > add all sprites directly into the primary container Oh right, you have something with a mask or filter on top, right? That's when ADD cant work because its actually rendered into separate texture that has no background Remove mask/filter and it should work fine. Because you stumbled across the problem of layering, I'm obligated to advice to look at demos https://pixijs.io/examples/#/plugin-layers/lighting.js and https://pixijs.io/examples/#/plugin-layers/bringToTop.js . Two things you haev to consider: 1. masks and filters render all the contents of container in separate texture, then this texture is rendered on screen with special shader. blending with background wont work there 2. zIndex works only inside containers, and in case you want it to work through the tree, you have to learn how pixi-layers plugin works, otherwise you'll have to manually put them in containers according to render order , and that will make your architecture difficult.
  9. 1 point

    WebGPU, will it replace WebGL?

    This will depend on advancement on the technical specifications and on their adoption by brower vendors and device manufacturers, but that is indeed the goal. WebGL is derived from OpenGL and is thus restricted to features that OpenGL supports. WebGPU builds on newer GPU system APIs and is also designed to be agnostic of the underlying platform technology (meaning it can be directly implemented on top of platforms such as Microsoft's Direct3D 12, Apple's Metal, and Khronos's Vulkan). Standardization-wise, the WebGPU API and WebGPU Shading Language specifications are actively being developed in the GPU for the Web Community Group. The documents should soon enter the usual web standardization process in a GPU for the Web Working Group, whose creation is currently under review within W3C.
  10. 1 point
    Sprite is lightweight, just change its texture.
  11. 1 point
    > Do you think ~3gb would be too much for some users Definitely. 700MB is big amount on its own. Yes, if you make 2x less area, it will take 2x less space. Think if you can actually use compressed textures too - but it depends on the type of your alpha. 1. try pack an atlas to DDS (dxt5) and see the difference 2. for DDS-ed atlas, make sure texture packer uses x4 coord divisor , because if an animation frames have different offset modulo 4 - artifacts will be animated . Its 16 bytes per 4x4 pixels, that's why.
  12. 1 point

    New Pixi Loader

    resources.add('tex', url, {crossorigin: '*'}); ... resources['tex'] This should help
  13. 1 point

    New Pixi Loader

    never mind
  14. 1 point
    That's right. `bind()` makes texture actual. uploads, updates properties, e.t.c. You can even override resource `upload()` method to make your custom webgl texture uploading logic: https://pixijs.io/examples/#/textures/gradient-resource.js Usually bind() is called when sprite with this texture is being rendered, somewhere inside "renderer.render()", but with prepare plugin you can do it before your game starts. You can also manually call bind() on all texture if you have a list.
  15. 1 point
    I wonder when are the textures uploaded to the gpu, this is my understanding so far: This happens in `TextureSystem`'s `bind` method, which is called in `Prepare` plugin's `uploadBaseTextures` method. This is registered via `registerUploadHook`, which is in turn called in `prepareItems`, that is called from tick method. `tick` method is registered to be called in `upload` method. Now I don't know when this `upload` method is called from. Is this even correct information?
  16. 1 point
    Fun thing: at first I thought the game's starting screen on Itch is just another banner. In fact, this is a very interesting variation of "sea battle". It was quite unusual that the asteroids can bend, but then I got used to it. Also I began to understand that the middle cell of 3x3 grid with several asteroids must be always empty, so, didn't spend charges on it The player can complete level 16 even without may upgrades, by memorizing the results f previous unsuccessful try (like I did )
  17. 1 point
    Hi, Installed a trial version of JetBrain's WebStorm IDE on Windows 10 Pro 64Bit. Corrected some errors and warning and we think the game is now working. Please visit below URL link to play the game: https://slnthero.itch.io/pacdude-hero-pacman-remix Let us know if it works now, thanks! GitHub link above has been updated... Jesse
  18. 1 point

    Running normal maps on Pixi.js

    Hello, I would really like to use normal maps in pixi.js but I don't know how. I've came across a good example with THREE.js and using webgl shaders - clickOnDemo (sometimes it's necessary to click once on the image to work). So I really wanted to replicate it but using pixi, I gave it a shot aand black screen - myDemo . I don't get errors and I'm not sure what I'm doing wrong. Could the problem be in the way I'm creating the mesh? I've checked other example from pixi's page in which shader with heightmap is used on a mesh and works perfectly fine - pixiExample. I'll be very grateful if I get this normal map thing working.
  19. 1 point
    Hi... Thanks, that actually worked! I have some other questions that I will ask soon in the forum. Jesse
  20. 1 point

    which game engine is best ??

    I agree with @BillyKane above. Construct 3 hands down! It's an amazing engine and with new features and bug fixes regularly - very much worth the price. It's very easy to use and hugely speeds up gamedev. I also really like Panda 2. @enpu did an amazing job on it! However, the engine hardly ever gets updated and there is very little communication
  21. 1 point

    PIXI.js/Electron example

    So - eventually I did go with electron, using electron build. You can see the changes I made to do the port on https://github.com/lkingsford/swipePokerHtml5/pull/2/files. Once I get Cordova or PhoneGap working, I'll spend some time to make a template My notes: I feel like I'm abusing npm a little, but also not enough. I've got it building on Mac, Windows and Linux, but currently need to use separate computers to do so. Watch for those icon size requirements. Don't be afraid to dig through the dir to see where Electron-Builder is putting your assets in the asar file. itch.io butler prefers a windows zip to a portable-exe. For now, I'm obliging. The dmg and appimage versions seem to be close enough to a zip for itch to be happy Updating pixi.js can result in scary things happening, that require deleting package.lock.json and node-modules I struggled a lot with the documentation, particularly for Electron Build. I feel a little like my project hacked together more than well thought out, which always makes me a little nervous. But hey - it works!
  22. 1 point

    FPS drops on mousemove

    For example, like this this.app.renderer.plugins.interaction.search.recursiveFindHit = function(interactionEvent, displayObject, func, hitTest, interactive) { let type = interactionEvent.data.originalEvent.type; if ((/.*(move|leave|out|over).*/.test(type) && displayObject.allowMove === false) || (/.*(up|down|click|cancel).*/.test(type) && displayObject.allowClick === false)) { return false; } else { return this.__proto__.recursiveFindHit.call(this, interactionEvent, displayObject, func, hitTest, interactive); } }; and then in the code you just need to this.instance.interactive = true; // enable interactive this.instance.allowMove = false; // ignore mouse moving this.instance.allowClick = true; // or just make it undefined. allow clicks Again. You have a dragonbone\spine robot with head, 2 hands, 2 legs, body and a gun = 7 mesh\sprites. You create 100x100 robots and just want to click on them and show alert(clicked robot #...) Every mouse move you will make tree traversal of all robots * 7 children, so 70000 checks if dispayobject.contains(cursor)
  23. 1 point
    You are a god. Will that work if even if the stage scales after a change in the browser window dimensions?
  24. 1 point

    Test your Might

    Its nice. I really like the first 2 mortal kombat games, they are awesome. You are using reptile as your main character, he was not a selectable character of mortal kombat 1, but you could fight him as a hidden opponent. Nice to see him in this game
  25. 1 point
    Hi there. iam looking for 1 developer to help me develop a fighting simulator in html5. Where 2 teams fights against each other with up to 100 fighers on each team, the figthers all have their own stats (health,attack speed, attack damage). the stats and number of fighers will be loaded from sjon. The teams start from each corner of a square, after a countdown, charges each other and attacks the closest enemy, until its dead, and then attack the other closest enemy. Until one team remain victory. - The project is single player only - Needs to be in html and accessable through major browser such as chrome and safari (no need for internet explorer) -html5 game engine is up to you, depending on what you feel comfortable with. As long as are able to use it fully, and commercially. - no graphics need,there will be default graphics to use, however when attack, dying, and running there will be animation I would like to start right away. I will be paying from a company stationed in Sweden. Can pay to bank or paypal. If your interested please pm me.
  26. 1 point


    My project is not a game or website, it's a content delivery and social media platform with built-in authoring. It is metaphorically similar to television in that emphasis is on a kinetic environment that is more presentational than interactive. Since contributors can define their own space, I can't make assumptions about what they might want to design and have to offer the broadest range of possibilities and still keep the process simple and codeless. I chose PIXI after hammering all the best supported libraries because, unlike something like p5, screen entities are true objects that can be interacted with. Further, the implementation is non-conventional and does not run in a browser per se. It uses a standard app (OSX, iOS, Windows, Android) with a browser instance inside it. Code is invisible to the user. The app starts up in an empty HTML5 environment and all objects are created, managed and destroyed in real time. The PIXI library (as well as others) is embedded in the app so that authoring can be done offline. That's probably TMI but thought I should describe the big picture.
  27. 1 point

    zIndex not working (PIXI)

    Suppose there are multiple elements with zIndex set inside same container. Then you can enable `container.sortableChildren = true` , and pixi will automatically sort when you change any zIndex value of a child. To understand why is it like that, please read https://github.com/pixijs/pixi.js/blob/dev/packages/display/src/Container.ts However, if you want to sort through the tree, ignoring container hierarchy, you have to use special plugin, https://github.com/pixijs/pixi-layers/ , it allows to put elements into one container virtually and sort them there. Do not use it if you dont understand what is "through the tree"
  28. 1 point

    The COVID-19 Game

    Approved with some smart renaming 👍🥳
  29. 1 point

    The COVID-19 Game

    Google Play appeal approved! The app may be found at the same URL, https://play.google.com/store/apps/details?id=com.customautosys.viralgame
  30. 1 point
    Here I have my latest Html5 game Kaiju Krashers. It combines strategy puzzles with the world of GIANT MONSTERS and their love for Destruction! The giant monster you control goes island hopping through 22 levels that players will keep coming back to with their progress saved, the only problem is he only has so much energy and thus has to destroy the buildings on each island with as few moves as possible. He must smartly navigate the area and destroy any military forces that get in his way. Thankfully he can reverse to regain some of his moves. Here are a few features of the game- -Works on all Platforms (PC & Mobile) -Strategic, but always fun & achievable -A Star Score system that challenges players to find better ways to win with less moves -A Hint Section to always keep players informed -Save system so players can return anytime -Touch controls -100% Original Art & Music -Frame size 833x651 (The link below is upscaled to fit your window.) Here's a link to the game and a walkthrough for it- https://retrobolt.github.io/KaijuKrashers-v2/ https://youtu.be/UiiubNK6UkQ
  31. 1 point
    Hello, my game project is a little bit similar to this : https://jsfiddle.net/2kznra41/5/ I'm trying to make the screen darker and to remove this darker effect around units, but it is not working and the sight effect is just a black circle i don't understand why, i inspired myself with the lighting example https://pixijs.io/examples/#/plugin-layers/lighting.js Thanks for help.
  32. 1 point
    Thanks for respond. It turned up helpful. I will learn about Rope with texture. It`s interesting.
  33. 1 point
    Hello folks, I'm creating a list of awesome JavaScript games and resources https://github.com/proyecto26/awesome-jsgames It would be awesome if you can suggest me more resources to add! Pull requests are always welcome! ❤️ Group on Facebook: https://www.facebook.com/groups/javascriptgames Regards, JD
  34. 1 point

    mouseup doesn't fire (PIXI)

    what about mouseupoutside? https://pixijs.download/dev/docs/PIXI.InteractionManager.html#event:mouseupoutside Are you able to show a basic playground?
  35. 1 point

    mouseup doesn't fire (PIXI)

    There were events in flash for this, losing focus and stuff.. i dont see focus events in pixi InteractionManager, so you have to add them yourself InteractionManager should fire "blur" event on element if something else was clicked. You can add global click event in InteractionManager (its also EventEmitter) that checks if element is the same as before, and if not it fires event. Anyway, not possible without looking in InteractionManager source.
  36. 1 point

    mouseup doesn't fire (PIXI)

    Are those standard html input fields with canvas below them? You could make a container that has a hitarea with the size of whole screen and set interactive = true. Then on the handler call blur for the inputfields (or focus for another element, canvas for example).
  37. 1 point

    Pixi Projection 3D Surface

    I've been having fun with pixi-projection and familiarised myself with the examples, classes and underlying code. I've been able to create a Camera3d, emultated a Skybox, added some billboard Sprite3ds, all good. Next I wanted to create a Surface (defined by a tri or quad of x,y,z). For example [{x: 0, y: 0, z: 0}, {x: 100, y: 0, z: 0}, {x: 100, y: 0, z: 100}, {x: 0, y: 20, z: 100},] I didn't find an in-built way to achieve this, or an approach to modify the underlying z vertices of Sprite3D? Did I miss something? So I brute forced an approach using 4 x Sprite3ds to represent the "corners", transformed them with the Camera3d, then using toGlobal() passed their Points to Sprite2D.mapSprite() to render a projection. Success, despite being a hacky blend of 2D in 3D. I was even able to include the result in a Container3d with other Sprite3ds in such a way that it all made sense and could be transformed as a whole and zSorted based on getDepth(). However z-clipping remains problematic. Is there a better approach? I'm hoping someone more familiar with the plugin would be able to point me to a lower-level solution Edit: I've removed the need for the 4 x Sprite3ds in the brute force approach (by using the respective proj.local Matrices) ... so I'm confident this can now be done, but still feels a bit hacky.
  38. 1 point

    Pixi Projection 3D Surface

    Thank you @ivan.popelyshev and @jonforum for your work. From a new-user perspective I think Pixi-projection is special because it is an easy and intuitive fit with the existing Pixijs workflow - so it adds an extra dimension to 2D games with little cost or reskilling. I will continue with my experiment ... already very close, will have something by eod. Yes, some bridges between PixiJS and ThreeJS would be a powerful combo for those seeking full-featured 3D. I see some good examples for returning a renderTexture back from Threejs to Pixijs, so perhaps only a pixi.Texture -> three.Texture is the minimum needed to complete the loop and share resources between the two?
  39. 1 point

    Accessing variables in PIXI*

    setInterval(() => { this.cursor.alpha = 1; //alpha is undefined setTimeout( ()=> { this.cursor.alpha = 0; }, 500); }, 1000); You could use arrow functions instead. The scope to which this refers in javascript changes in your first example to functions scope. For more info on how this gets scoped check out this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
  40. 1 point
    Hi, looks like static group has no "setScale", try with... this.rock.scaleXY(2, 2) https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.StaticGroup.html#scaleXY__anchor
  41. 1 point
    visible=false breaks many things. If you want to fix it, go and make your own container render logic. Maybe use (renderable=false) instead. Maybe make them visible for that duration. Anyway, clone pixi, look in Container sources, solve your problem by overriding that stuff like "PIXI.Container.prototype.functionIDoNotLike = ..." PixiJS is not a black box. Most of container stuff are just single FOR's.
  42. 1 point

    How to show mobile keyboard in PIXI

    ho sorry if this disturbed you ! .focus(); should work But sometime you will need call .focus(); after the DOM updated your elements. (async) It why i add both in the example for playground. setTimeout(function () { el.focus(); }, 1); will work in all contexts, but if you create a html element and force a instant focus , it can not work in all contexts, it will depending on how you add your update en render your elements in your projet.
  43. 1 point

    Memory leak

    I guess its destroy({texture:true}) , please follow the docs and sources.
  44. 1 point

    Memory leak

    Its not enough. Generated textures have to be destroyed manually. Also I hope you know that this particular example - you can just use one texture: black & white, and tint will make white something else.
  45. 1 point

    I want to make a leader board

    one of my way create a virtual on-screen keyboard(button) like this game http://mindfrog.ffx.it/
  46. 1 point

    PIXI Sound mp3 loop 'pause'

    AAC LC should give you seamless playback, but not AAC HE. Can't say much about performance, but I prefer using m4a + ogg (Vorbis) as fallback.
  47. 1 point

    Puzzle Astronauts Game - PixiJs

    Agree with Zealot, cool puzzle game! P.S Interesting to see other players progress/records, maybe some kind of total score (total stars you got or time etc) leaderboard will be a good addition.
  48. 1 point
    Hi, I am looking for Cocos CS developer to develop a games like Fruit Master, Fruit Ninja. If someone has same game in html5 in Cocos code base, I am ready to buy it Let me know
  49. 1 point

    Issue with FB Ads?

    @MassimoFellucci Do you have the same issue? Are you using the latest version of Phaser and the Instant Games plugin? Also, you might want to ask your question on this group: https://www.facebook.com/groups/instantgamedevelopers/ The community is quite responsive.
  50. 1 point


    Please use this topic to discuss WebAssembly.For more context, please refer to this page: https://www.w3.org/2018/12/games-workshop/report.html#wasm