All Activity

This stream auto-updates     

  1. Today
  2. As it stands currently the issue is two parts: 1) `hackTextureBySlotIndex` will modify the *current* texture of an attachment in a slot, however if a slot has multiple attachments the attachment whose texture gets changed is whichever one is currently active. So this method gives an instant result, but won't change the hidden attachments. If called during an animation that changes attachments (esp if multiple frames), the results can be a bit random as it'll simply replace the texture in one frame of the animation. 2) using `getAttachmentByName` + `attachment.region.texture = newTexture` one can change the textures of attachments (instead of the texture of whichever current attachment is active in a slot) however this has no instant visual effect, and the new texture only appears the next time the spine entity changes to this texture So the solution for me was to mix the methods. The attachment's texture should be changed, which will do a deep reskin of the skeleton including its hidden attachments and something like hackTextureBySlot should be used to change all of the currently visible attachments. Note: when i say deep reskin i'm referring to changing all of the textures in the model with new textures using pixi, rather than any of the spine skin features which I'm not using. The second part was to make a version of hackTextureBySlotIndex that would only change the texture of the attachment if the attachment was active. const changeAttachment = (spine, slotName, attachmentName, texture) => { // changes the texture of an attachment at the skeleton level // (will not change currently visible attachments) const slotIndex = spine.skeleton.findSlotIndex(slotName) const attachment = spine.skeleton.getAttachmentByName(slotName, attachmentName) attachment.region.texture = texture // changes currently visible attachements // note: this is a modified version of hackTextureBySlotIndex changeAttachmentTextureIfActive(spine.skeleton, slotIndex, attachmentName, texture) } // modified to not change the texture of an attachment unless that attachment is currently active const changeAttachmentTextureIfActive = (skeleton, slotIndex, attachmentName, texture, size = null) => { const slot = skeleton.slots[slotIndex] if (!slot) { return false } const attachment = slot.getAttachment() if (attachmentName !== { // do not change the texture of this attachment return } let region = attachment.region if (texture) { region = new TextureRegion() region.texture = texture region.size = size slot.hackRegion = region slot.hackAttachment = attachment } else { slot.hackRegion = null slot.hackAttachment = null } if (slot.currentSprite && slot.currentSprite.region != region) { setSpriteRegion(attachment, slot.currentSprite, region) slot.currentSprite.region = region } else if (slot.currentMesh && slot.currentMesh.region != region) { console.log('mesh regions are disabled for changeAttachmentTextureIfActive') //this.setMeshRegion(attachment, slot.currentMesh, region) } return true } I'm going to probably combine the code from the above into another function, but I figured I'd paste it to the forum while it still resembles the existing `hackTextureBySlotIndex` closely. One could probably combine the two and call it `hackAtachmentByName(slotName, attachmentName, newTexture)` if it warranted adding to the pixi-spine api, though it only would be helpful for people who do a lot of attachment swapping in their animations. Publicly exposing TextureRegion might be helpful too for more hacks. It's also worth noting that attachments in spine are not freely nameable -- they take on the name of the images, which makes me feel like i'm sort of hacking an extra feature into spine that was unintended by doing this. (screenshot showing a spine skeleton whose attachments are named for programmatic use, as opposed to things like "iron-pick-axe.png") An animation with changing attachments (the legs use different sprites for front/back at different points in the run): In-game animations and gear changing randomly during the animation using the above code:
  3. Yesterday
  4. Hello. I wanted to share a Phaser 3 game I’ve been working on. The entire game is made on my iPhone with Textastic and a vector drawing app, so there are no keyboard inputs. The controls are fairly simple. Just slide your finger left or right to move, and you can either swipe the same finger to jump, or swipe with your other hand while running. To climb the rope, you just have to slide up or down; and to swing, slide left or right. To enable the slingshot, click on the character, pull the rock back, and let it go. This game is not anywhere near completion, and I imagine it will take several years to finish it on my own. The animation is not great, but I’ll have to wait until I can afford an iPad with pencil capability. I hope you like it, and please let me know what you think. Thanks!
  5. Mathankb04


    same for me actually
  6. Hi, Hope You are doing well. I sent you mail, please check it. Best Regards, Lauren W.
  7. Hey Guys Try my new game "Rotate Ball" thanks
  8. Hello there! Hope you're doing good. I can help. Please reach me out at Skype: live: luis_18439, or mail me at Hope to hear from you soon. Have a nice day. Regards,
  9. Hi, Hope you are doing well. I will be Glad to assist you. I am sending you mail. Please check it. Best Regards, Lauren W.
  10. Some retro inspired 16 bit inspired game music 😎
  11. You might also want to consider using Headless Chrome? There are sas approaches, e.g. Browserless, which may or may not work better with your server budget and loading requirements?
  12. I don't know what to tell you, I must be very lucky then, Gamemonetize with me is excellent and the income is also excellent
  13. oh, wait, pure canvas? why dont you use just node-canvas or one of its analogues then? thumbnails is easier to generate without pixi in pixi new BaseTexture(canvas) should work, where canvas is where you made putImageData thingy
  14. Hi, thank you for your input I'm assuming you are talking about PIXI.Texture.fromBuffer. Unfortunately this does not seem to work in canvas yet. (this was one of the things I tested, fromBuffer works well on my frontend with webgl, but not on the backend with canvas.) I found a thread on this forum saying it was not implemented yet. I'll look into the texture ressource in the source code, thanks.
  15. Seems in their html5 SDK, if you use file_exists() function to check a .ini file while that .ini file doesn't exist, it's going to black screen...
  16. @louislourson this project is so cool! I love oxygen not included, can't believe the amount of effort thats gone into this
  17. > : I read every pixel of the texture one by one, and using a graphics object, and small 1x1 rectangles of the correct color, I draw my texture to a render target You know you can just pass RGBA buffer to pixi , right? The only thing you do that thing without biug performance and memory hit is if you know how webgl works with textures. Also it would be nice if you read in source code what is pixi texture resource.
  18. Hi , I leaked the game GameMonetize, there is no such income wrote Katie, no answers
  19. Hi! Let me start by explaining my use case: I'm the developer for a website that lets you build and share blueprints for a game. The front end of the website uses pixi.js and it works really well! (website : One of the functionality of the website is that users can upload their blueprint for others to see, and as part of that, a thumbnail for their blueprint is generated and stored on the backend. My problem is this : right now, this thumbnail is generated on the frontend side, and uploaded to my backend. This is not ideal for several reasons : one, I have to trust the front end about what the thumbnail looks like. Although there are some controls in place, there is little stoping users from sending bad thumbnails to my backend for others to see. Two, if I ever need to regenerate the thumbnails for all existing blueprints for some reason, right now there is no simple way of doing that. Now that my use case is out of the way, the solution : I want to be able to generate thumbnails on my backend (a simple node / express server) using pixi.js. Here is what I have been able to achieve for now : using the fantastic pixi-shim library, I have been able to move all my drawing code to a shared library, and run my drawing code on the backend side without runtime errors. The problems start when I tried to export the generated drawing : I'm using something like this to extract my thumbnails from pixi / canvas : pixiApp.renderer.render(container, rt, true); let base64: string = PixiPolyfill.pixiPolyfill.pixiApp.renderer.plugins.extract.canvas(rt).toDataURL(); However, as noted in this issue, extracting data from pixi is not easy. All I was getting was a transparent image. After investigation, the problem seems to come from the texture loading on my backend. This code, that loads the image on my front end, does not work on the backend : let baseTexture = new PIXI.BaseTexture(imageUrl); I tested several solutions: I tried to use an absolute path as the url, I tried to add the image to my virtual dom using the jsdom-global and canvas npm libraries. I have also tried to used a base64 data url. In the end, the baseTexture I generate always has their "isValid" flag set to false. I should add that I'm using pixi.js-legacy (5.3.0), and all my drawing on the backend are using the canvas api, and not webgl. However, everything else in pixi seems to be working just fine. For example, I can create a graphics object, draw some rectangles on it, and the thumbnail generated will show those rectangles. So, here is the workaround I have found so far : for every texture I need to render for my thumbnails, when my server starts, I preload them : I read every pixel of the texture one by one, and using a graphics object, and small 1x1 rectangles of the correct color, I draw my texture to a render target. This render target can then be used in sprites, and the sprites will be rendered correctly in my thumbnails. This works well enough, and the only thing I had to change to my rendering code is the way my textures are loaded : async getImage(path: string) { let data: any = {}; let width = 0; let height = 0; console.log('reading ' + path); data = await; width = data.getWidth(); height = data.getHeight(); let brt = PixiPolyfill.pixiPolyfill.getNewBaseRenderTexture({width: width, height: height }); let rt = PixiPolyfill.pixiPolyfill.getNewRenderTexture(brt); let graphics = PixiPolyfill.pixiPolyfill.getNewGraphics(); let container = PixiPolyfill.pixiPolyfill.getNewContainer(); container.addChild(graphics); for (let x = 0; x < width; x++) for (let y = 0; y < height; y++) { let color = data.getPixelColor(x, y); let colorObject = Jimp.intToRGBA(color); let alpha = colorObject.a / 255; color = color >> 8; graphics.beginFill(color, alpha); graphics.drawRect(x, y, 1, 1); graphics.endFill(); } PixiPolyfill.pixiPolyfill.pixiApp.renderer.render(container, rt, false); // Release memory container.destroy({children: true}); container = null; rt.destroy(); rt = null; data = null; global.gc(); //console.log('render done for ' + path); return brt; } Using this method, I am able to generate my thumbnails in the backend. However, and this is where I need help, this method is very inefficient. I have about a hundred 1024x1024 spritesheet for my app. preloading them at the web server start is very slow (about 10 minutes). I could live with the delay since I only need to preload them once, however, it is also very memory intensive. When all the textures are preloaded in this way, my server sits at about 2.6Gb of ram. (The server takes about 200Mb when not loading any textures at all, and all my png textures weigh about 40Mb, so 2.6Gb seems excessive). I'm pretty sure my memory issue is not coming from the library I'm using to read the png files (jimp). I tested this by converting my png files into json bitmap data and loading these without calling jimp at all. So, here it is : I need help loading my png files on the backend, my current solution is slow (not a huge deal), but also very memory intensive (and this is a bit more problematic, as the RAM I need directly impacts the price of my web server...) Thank you very much for any help or advice you can provide.
  20. Thank you for the answer Would you be so nice and show me a simple example how do i do what you suggest? Im new to PIXI and I am unable to figure out what you mean by "use text as a mask".
  21. Last week
  22. Pixel artist/animator for hire! Still characters ~ 10-25$ Animated Characters 35-50$ Prices are negotiable and may vary. Check out my portfolio here: Contact me: Discord: 𝔄𝔪𝔢𝔩𝔦𝔞 𝔇𝔯𝔢𝔞𝔪#9389 Email:
  23. use Text as a mask. IUf you need more than text - that border for example - you should draw it in renderTexture together with text, and use sprite with this texture as a mask
  24. Hello there I was wandering weather its possible to perform good old CSS trick "background-clip: text;" on PIXI.TEXT, to achieve effect of a text which has a picture/texture fill instead of a color. Something like this: Thanks for any hints ✌️
  25. I was wondering why we haven't seen something akin to a Steam for high quality web games (not casual). With the evolutions in browser tech, complex and deeper games have been quite feasible for awhile (ie or , but most of them tend to either get mixed into generic casual gaming sites (Crazy Games, Kongregate) or become their own .io website, essentially forcing devs to handle everything from marketing, hosting to payments and support. Others would rather envelop their web games using tools like Electron to be able offer them on Steam as if they were native games (ie. Cross Code)... While and Gamejolt will accept/host web games, they will also mix in with any other kinds of game format and pretty much do very little curation to separate high quality from the rest... isn't there about time we see a curated experience exclusively for core and hardcore web games?
  26. Mathankb04


    Great to be here
  27. Hi, we glad to introduce you a new series of tutorial that explain how to create WebGL 3D applications using Maya and Verge3D. You will learn how to create a 3d-web application from first step till the publishing it in the net. Enjoy. Link to the application Content: 1 – Intro 2 – Creating a New Project 3 – Materials and Environment 4 – Camera, Puzzles and Background 5 – Creating HTML Interface 6 – Layout for Mobile Devices 7 – Interactive Animation and Sounds 8 – Material Configurator 9 – Adding Annotations 10 – Post-effects and Antialiasing 11 – Application Optimizations 12 – Publishing Online
  1. Load more activity