Leaderboard

I just finished my coloring app! Browser / iOS / Android It took a while with some years inbetween. Aaaalll the way back in 2017 I was trying to get some basic drawing going and got it working with the help of Ivan. Thanks @ivan.popelyshev ! Looking back at this example, it's pretty much the same as in the app. Thanks for the amazing library and all the support on these forums! it's been really helpful

Turns out, they were It actually was deceivingly simple. The PIXI code from my previous message works, but the parameter fontFileXML, which represents the fnt descriptor, has to be created as an XMLDocument (document.implementation.createDocument (namespaceURI, qualifiedName, docTypeObj)) and for fontPNGBase64String, instead of encoded PNG, just extract the canvas drawing as PIXI.Texture. BitmapFont will know how to interpret that as your custom font.

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"]);

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.

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;

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.

thank you for helping me a lot & hope to make some contribute to PIXI someday!😁

Oh , sorry, I gave wrong link playground doesnt like UTF characters https://www.pixiplayground.com/#/edit/Ql9uafhDGLiqT2lx7xvG0 Thats what was in my jsfiddle. Hope it helps. That's the code i made less than in hour after your first post. I'm sorry it took two days

Here you go: https://www.pixiplayground.com/#/edit

No. In fact it may be faster (depending on browser implementation) because drawImage() is more flexible, capable of rescaling the image.

Yes, in reality I don't understand too much about filters, I saw the pixi filters examples but none seems to be what I need. Also, searched for cylinder effect here before posting but nothing showed up. Trying with filter this came up and I guess that this should be the way, right? Btw, this is not for a slot, I just download it from an example that I saw, I want to apply this to a text field.. thanks @ivan.popelyshev

Thanks for coming back to me. I might wait as it looks beyond my level of understanding! Or maybe after I finish other parts of the project I will re-examine it as it’s just for a nice effect, not critical.

I cant understand what did you want to do there. gl_Fragcolor is pixel coord of current pixel. The problem is that you cant use it in pixi shaders because projection might be reversed. Also, projection*translation * point gives you viewport coords (-1,-1) - (1,1) where point is LOCAL coords in mesh. yes , you dont have a transform on it. I changed approach - i calcaulte world position =translation * local , save it, calculate viewport pos and give it to webgl. Then in frag shader i operate that world position. "center" now is in global pixel coords https://jsfiddle.net/Hackerham/sc1kmqxt/6/

i find a weild way to partly solve this problem by [100*400,-(600*300 - 400*300)]; but i am very confuse why it will works beacause center and geometry points both multiply the same matrix, and in spacial scenario like rotate,it still will not work please help me,THX!

Also its good for tricks like "container.filterArea = renderer.screen" - and filterArea wont have to be changed after resize Screen is just a rectangle that is updated on resize

view is canvas, so "width" and "height" are in real pixels. screen is a rectangle, and according to CSS. new Renderer({width: 800, height: 600, resolution:2 , autoDensity:true}) makes a renderer with view of 1600x1200, but screen is still 800x600, and those numbers will apppear in "view.style.width="800px"" All your stage has to be adjusted to 800x600 size in this case, not 1600x1200. - this helps for Retina displays or when tab is zoomed, or on modern phones. Its rare when someone makes it right from first try As for app in general, here's explanation: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop . Application on itself doesnt have any magic, it just creates a few components and consists of number of getters.

@ivan.popelyshev Hi Ivan i just wanted to tell you that it is working, thank you for your help

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.

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!

> 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.

Sprite is lightweight, just change its texture.

> 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.

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

I'm using Texture Packer to create spritesheets and then loading them from the .json file. Like this: this.loader.add('main','./ims/mySprite.json'); ... let myResources=this.loader.resources.main.textures; ... let myBackground=new PIXI.Sprite(myResources["background.png"]); let myButton=new PIXI.Sprite(myResources["button.png"]); However, I have a dozen or so different sprites that load at different times and I don't want to have to load a json file for each one. I think it makes more sense to just load the images and then keep the frame data in the javascript, as an object that is passed to the loader. Basically, copy paste the json file into my JS. Something like this: const myData={ "meta":{ ... }; this.loader.add('main',myData); Is it possible to do this? As an alternative, would it be advisable to load the image and then dynamically create a Texture for each sprite? Something like this: this.loader.add('main','./ims/mySprite.png'); ... let myResources=[]; let titleRect=new PIXI.Rectangle(1,1,800,550); let backRect=new PIXI.Rectangle(1,925,363,76); myResources['title']=new PIXI.Texture(this.loader.resources.main.texture.baseTexture,titleRect); myResources['background']=new PIXI.Texture(this.loader.resources.main.texture.baseTexture,backRect); ... let myBackground=new PIXI.Sprite(myResources["background"]); This seems to work, but I'm concerned that this isn't the correct way to do it, or perhaps that this will miss out on some optimizations that PIXI does.

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.

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?

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 )

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

Thank you very much!!! About the serious problems, I'm a newbie when it comes to shaders and webgl but slowly I hope I'll get the hang of them. I didn't setup properly the project with width, height and margins because I was focused on just getting the normal map to work. Anyway thank you again for your time and advice. 🙂

Hi... Thanks, that actually worked! I have some other questions that I will ask soon in the forum. Jesse

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

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!

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)

You are a god. Will that work if even if the stage scales after a change in the browser window dimensions?

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

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.

Hi @ Nutiler I am interested in your requirement and will be glad to assist you as an babylon.js 3d expert. Please reach me out through skype : cis.am3 or email me at frank@cisinlabs.com Best regards Frank.J

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"

Approved with some smart renaming 👍🥳

Hi, you can just create the lib folder yourself and you should be fine

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

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

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.

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).

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.

List of few alternatives (that are used by PacpGames) is at https://www.pacogames.com/blog/pacogames-and-games-distribution-services

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

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

One day I really ought to write an article about what's good for a web app is almost never good for a game loop.

Hi, It sounds like you want to implement tile map editing inside melonJS. This would be an amazing contribution; it's something that hasn't been worked on yet. Hypothetically, it should just be a matter of maintaining a reference to the original JSON source, and updating that with the existing "setter" methods on the layer, tile, and map objects. For example, changing a tile on a layer is just a matter of calling the setTile method on the layer object. To update the JSON source as well, this method needs to be updated to poke the given tileId into the correct array location (based on provided coordinates) within the appropriate layer (defined by the layer object instance itself). The UI is totally up to you; whether it's a form (as you asked), or click-and-drag style drawing (as in Tiled). In the end, you're going to use API calls like the one I linked above. Best of luck!