Search the Community

Team: Author: Raizen (Mauricio Pastana) Designer: Geraldo de Rívia Artist: Kiba Additional Information: Engine: PIXI.js/ RPG Maker MV Progress: 100% Resolution: Full HD (1920 x 1080) Platforms: Windows, Mac, Android/iOS(Reduced Resolution) Languages: English, Portuguese, Japanese (likely) e Mandarin (likely) So, just showing my card game that will be going out to Steam June 29th! It is a mythological Anime based card-game made on PIXI mostly, some of the VN I used the RPG Maker engine. Below some gameplay and the link to the store page :)! Kamigami: Clash of the Gods no Steam (steampowered.com)

I'm trying to remove sprites and containers from the current app.stage as to add new ones–e.g. change scene. However, both: let i = 0; app.stage.children.forEach(function(child){ app.stage.removeChild(i); i++; }); and app.stage.children.forEach(function(child){ child.destroy(true); }); remove the top level sprites but not the ones in a container?! Very strange. A second trigger of either of the above then removes them but I'd rather not trigger a function twice without working out why it's not working. I'm running pixi.js - v5.2.0

Hi there, I have a collection of sprite animations happening inside of a PIXI Container. I need to take a rectangle section of this animation and display it inside of a Spine animation using a Mesh. (this seems to be working all fine) However, I am able to do get the full contents of the container and place it into my Spine animation no problem using renderTexture, but I only need a small section of its contents. I thought I would be able to do something like this.... var party = PIXI.Container(); // Sprites of people in a party inside of here var texture = PIXI.RenderTexture.create(party.width, party.height); texture.frame = new PIXI.Rectangle(100, 0, 100, party.height); // also tried texture.trim texture._updateUvs(); // on rAF update the mesh texture and apply to the mesh renderer(party,texture); slot.attachment.region.texture = texture; slot.attachment.updateUVs(); Here it looks like it should only use a section from 100 pixels in from the left and only take a 100 pixel wide slice, but it doesn't. I also thought I would create the renderTexture at the size of the slice I need.... var texture = PIXI.RenderTexture.create(100, party.height); texture.frame = new PIXI.Rectangle(100, 0, 100, party.height); // also tried texture.trim But this just takes a 100 pixel section at the left most of my container. Maybe I could apply a mask to the section I need and create a texture from that or something?

Hello I have problem in understanding how pixi layers work. I want to make some layers like top one, mid and bottom. I want to add players to the top layer, enemies to mid and move dead enemies to bottom layer. I tried to do this, but my sprites are invisible now. Can you provide minimum working code for pixiv4 for my problem? I init player this way: this.player = new PIXI.Sprite(texture_hero); this.player.anchor.set(0.5, 0.7); this.player.x = cords.x; this.player.y = cords.y; this.player.visible = true; container.addChild(this.player); This is how i init pixi: var type = "WebGL" if (!PIXI.utils.isWebGLSupported()) { type = "canvas" } const app = new PIXI.Application(1000, 800, { transparent: false, backgroundColor: '0x000000' }); document.body.appendChild(app.view); //var layer = new PIXI.display.Layer(); //stage.addChild(layer); var container = new PIXI.Container(); app.stage.addChild(container); My game is quite big and its hard to select code to post it here to explain my problem. If something is unclear i can post more. Thank you for your time

I need help with creating objects in pixi In the backend I have a code running every 1000 millisecond, which passes the id, and x and y positions and I made a for that runs through the list of players. but when the first player comes in, it picks up the sprite "cat" which is a variable. then when the second player enters it also picks up the same variable, but as the first one already had it it becomes invisible. I need help, so that every id I pass in is for it to take an instance of "cat" and if I put the cat variable inside the for it gets creating several cat. const texture = PIXI.Texture.from('images/cat.png'); let cat = new Sprite(texture); const socket = io(); socket.on('newPositions',function(data){ // recebe o pacote 'newPosition' for(let i= 0;i < data.length; i++){ // fazendo um for do tamanho da data cat.x = data[i].x; cat.y = data[i].y; app.stage.addChild(cat); }

I have simple Filter and need to make access in shader to data: - position of sprite / mesh of Stage - textureRegion rectangle info How to do this? var fragSrc = ` precision mediump float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform vec2 dimensions; uniform vec4 filterArea; uniform vec4 texRegion; vec2 mapCoord( vec2 coord ) { return coord * filterArea.xy; } vec2 unmapCoord( vec2 coord ) { return coord / filterArea.xy; } void main() { vec2 coord = vTextureCoord; coord = mapCoord(coord) / dimensions; coord = unmapCoord(coord * dimensions); vec4 color = texture2D( uSampler, coord ); gl_FragColor = color; } `.split('\n').reduce( (c, a) => c + a.trim() + '\n' ); module.exports = RepeatRegionFilter = function RepeatRegionFilter() { RepeatRegionFilter.super_.call(this, null, fragSrc); } Util.inherits(RepeatRegionFilter, PIXI.Filter); RepeatRegionFilter.prototype.apply = function(filterManager, input, output) { this.uniforms.dimensions[0] = input.sourceFrame.width; this.uniforms.dimensions[1] = input.sourceFrame.height; filterManager.applyFilter(this, input, output); }

Assume I have a circle mask for my stage, coded as below. const RADIUS = 200; const mask = new PIXI.Graphics(); mask.beginFill(); mask.lineStyle(3, 0xB2112D); mask.drawCircle(RADIUS, RADIUS, RADIUS); mask.endFill(); stage.addChild(mask); When I set the mask of another container in stage to this mask, I don't see any line around the edges. Is it possible to have border line effect in masks? What should I do if I want to outline the mask area? Currently I just put another Graphics object with a larger radius behind the masked container but this is just a work around.

https://github.com/pixijs/pixi.js/pull/2414 I made a very scary PR for pixiv4, stil work in progress. It takes care of multiple things: No need to calculate matrices for objects every tick: only when they position/scale or something else was changed Same with bounds Same with interaction Sprite size doesnt change scale Camera projection doesnt change transforms. Object transform wont be re-calculated if camera was scrolled or rotated. DisplayObject can have pre-calculated local bounds that will be used to speed up interaction process. Things that I'm preparing right now: Z-indices, displayorder for camera. culling based on bounds for camera 3d transforms. See that gif at https://www.kickstarter.com/projects/chimeraco/lux-a-survival-mmorpg-pc-mac-xb1-ps4 ? Its pixi-flip. new version of pixi-spine that will use all that stuff. I need people who understand WTF is I am doing and who can tell me what can go wrong with it, because that's one of the most sofisticated things that I've made in my life.

In short, I've just recently updated the html5 app I'm working on to use the newest version of Pixi (v4) recently. It looked nice & all and it basically didn't break anything. (Well, except for a ColorMatrixFilter because v4 for some reason has a padding attribute set as default to 4.) Anyway, I was really happy with the new promises such as WebGL renderer mobile optimizations and I quickly compiled my project (using Cocoon.io) to an Android apk to test. Well saying that it ran slower is an understatement. Gameplay parts where the previous Pixi v3 provided an estimated 50-60 fps, this struggled to get 20-30. I made some other changes to the code so I wasn't sure if it was the update's fault at first, but I quickly reverted to v3 and regained the old and much better performance. Some info: - I'm probably not using any SpriteBatches - I'm initializing the renderer as this: renderer = new PIXI.WebGLRenderer(window.innerWidth, window.innerHeight); - I'm drawing a lot of Sprites with different sizes at the same time, maybe 100 at max - A lot of the above Sprites are visibility/alpha toggled many times during gameplay, but I do not store them outside the render area - I'm using manual scaling on a lot of Sprites individually, I just rarely scale a container Well, that's all I could think of right now. The strange thing is that v4 actually seemed to run faster on desktop (Firefox).