All Activity

This stream auto-updates     

  1. Past hour
  2. Result: 1. I've removed the masks changing the code below from import * as PIXI from 'pixi.js-legacy' export class RoundedBgView extends PIXI.Container { private readonly sprite: PIXI.Sprite private readonly roundMask: PIXI.Graphics constructor(w: number, h: number, container: PIXI.Container, texture: PIXI.Texture) { super() container.addChildAt(this, 0) this.sprite = new PIXI.Sprite() this.sprite.width = w this.sprite.height = h this.sprite.texture = texture this.addChild(this.sprite) const round = 5 this.roundMask = new PIXI.Graphics() this.roundMask.beginFill(0x000000) this.roundMask.drawRoundedRect(0, 0, this.width, this.height, round) this.addChildAt(this.roundMask, 1) this.sprite.mask = this.roundMask } isSameBg(texture: PIXI.Texture): boolean { if(texture == this.sprite.texture) return true return false } } to import * as PIXI from 'pixi.js-legacy' export class RoundedBgView extends PIXI.Graphics { private readonly texture: PIXI.Texture constructor(w: number, h: number, container: PIXI.Container, texture: PIXI.Texture) { super() this.texture = texture const matrix = new PIXI.Matrix() matrix.scale(w/texture.width, h/texture.height) this.beginTextureFill(texture, 0xFFFFFF, 1, matrix) this.drawRoundedRect(0,0, w, h,5) this.endFill() container.addChildAt(this, 0) } isSameBg(texture: PIXI.Texture): boolean { return texture == this.texture } } 2. I've made default powerPreference low-power this.app = new PIXI.Application({ antialias: antialias, // default value is window.devicePixelRatio * window.innerWidth <= 2000 resolution: resolution, // default value is window.devicePixelRatio backgroundColor: GameColor.getColorHexValue(GameColor.Color.Sea), powerPreference: powerPref, // default value is 'low-power' }) 3. I've added buttons for antialias, resolution & powerPreference, so players can change it: https://prnt.sc/qqoc4k The game seems to be more optimized. But it still heats up my mac while playing. The problem is most other games also heat it up. I think macs have an internal problem with webGL. Plain HTML games never heat it up. I also checked "two videoadapters" things and my mac only has one. I hope after this update windows users won't have any problems and mac users will be okay with it. 15% of our players are from mac. Lets see how the community reacts to it.
  3. Will not spam. You are quite right about my post. Babilon, Pixi and Phaser are all JavaScript. You can mix them together. Maybe even organize them with some Angular code. Well depends on your JavaScript coding skills. I probably can google about complex projects made with these three, but If you can name some of them, I would like to see. Probably @coelacanth would also like to see some examples made with these three. I cannot recall the name of that browser game made by Firefox team? It was with multiplayer and it was RPG. You are a knight and you walk on a pixelated map. You gather potions and weapons and as you go, you kill monsters which give you experience points. As you get more experienced you get to kill bosses I think and visit hidden places like dungeons and caves. And this all was built I think with Phaser and some other tools, probably Socket.io or the like. EDIT: Yes got it: BrowserQuest, Article on the game Phaserquest - BroswerQuest made with Phaser
  4. I'm using pixi.js-legacy and when I do forceCanvas: true everything slows down. I know the game is simple and shouldn't need webGL but pixi is built for that I guess
  5. Today
  6. Unfortunately both the global setting of WRAP_MODE and the setting of WRAP_MODE on a texture have no effect: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>PixiJS v5 Compressed Textures Bleeding</title> <script src="https://cdn.jsdelivr.net/npm/pixi.js@5.2.0/dist/pixi.js"></script> <script src="https://cdn.jsdelivr.net/npm/pixi-compressed-textures@2.0.3/dist/pixi-compressed-textures.min.js"></script> </head> <body> <script> //PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST PIXI.settings.WRAP_MODE = PIXI.WRAP_MODES.CLAMP const app = new PIXI.Application({ width: 1024, height: 512 }) document.body.appendChild(app.view) new PIXI.Loader() .add('photo1', './1.dds') .add('photo2', './2.dds') .load((loaderInstance, resources) => { const texture1 = resources.photo1.texture const texture2 = resources.photo2.texture texture1.baseTexture.wrapMode = PIXI.WRAP_MODES.CLAMP texture2.baseTexture.wrapMode = PIXI.WRAP_MODES.CLAMP const sprite1 = new PIXI.Sprite(texture1) const sprite2 = new PIXI.Sprite(texture2) sprite1.width = sprite1.height = sprite2.width = sprite2.height = 512 sprite2.x = 512 app.stage.addChild(sprite1, sprite2) app.stage.scale.set(.8, .8) }) </script> </body> </html>
  7. yeah, that should do it. Btw, if you want to make shader for graphics or sprite, here's an example: https://www.pixiplayground.com/#/edit/zmDpwnZkvbb1b-aWaO9S8 Its batch shader . If you want to make gradients, I can help with that too.
  8. you guessed right, its related to texture options. Its about REPEAT Switch it off. "baseTexture.wrapMode = PIXI.WRAP_MODES.CLAMP" with LINEAR, edge pixels when scaled are interpolated with pixels from opposite edge.
  9. My requirement can be achieved by: 1) create a graphic and apply my filter on it 2) call renderer.generateTexture to generate a texture 3) create a sprite to use the generated texture and then apply rotation. There's no need to use "outputMatrix", as you have told, not the right abstraction. Thanks again, Ivan.
  10. Okay, thanks. I think I use wrong abstraction for my purpose😆
  11. Hi, I am using PixiJS version 5.2.0 with the compressed-textures plugin version 2.0.3: If two dds-images are placed directly next to each other in a container and the container is scaled, a thin strip appears between the two images: If the scale of the parent container is exactly 1, no stroke is visible. With PixiJS 4.8.8 and compressed-textures-plugin 1.1.8 it works correctly and no stroke is visible. When the PixiJS scale mode is set to nearest (PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST) no stroke is visible (but the images becomes a little bit blurry). I suspect this is related to the interpolation constraint of the scale mode LINEAR, but I'm not sure if this is a PixiJS problem or a compressed-textures-plugin problem ... This is the complete code: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>PixiJS v5 Compressed Textures Bleeding</title> <script src="https://cdn.jsdelivr.net/npm/pixi.js@5.2.0/dist/pixi.js"></script> <script src="https://cdn.jsdelivr.net/npm/pixi-compressed-textures@2.0.3/dist/pixi-compressed-textures.min.js"></script> </head> <body> <script> //PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST const app = new PIXI.Application({ width: 1024, height: 512 }) document.body.appendChild(app.view) new PIXI.Loader() .add('photo1', './1.dds') .add('photo2', './2.dds') .load((loaderInstance, resources) => { const sprite1 = new PIXI.Sprite(resources.photo1.texture) const sprite2 = new PIXI.Sprite(resources.photo2.texture) sprite1.width = sprite1.height = sprite2.width = sprite2.height = 512 sprite2.x = 512 app.stage.addChild(sprite1, sprite2) app.stage.scale.set(.8, .8) }) </script> </body> </html> Has anyone a good idea? Siddi
  12. Why is "outputMatrix" needed in filters? To position a texture over it, for masking or displacement. Filter area is defined by container bounds, but to define texture coords relative to that area its better to do so through sprite, we can put calculated sprite transform matrix inside filter for it.
  13. > And then I rotated the sprite by 45, then as you can see, my expectation is it only draws pixels inside the blue rectangle I marked on the bottom right. How filters work: container is rendered into temporary texture. It doesn't matter what is the shape of container - filter area is rectangular parallel to screen axises. Then the quad drawn on screen: shader has that old temporary texture as an input "uSampler". Your "gl_FragColor = vec4(color, 1.0)" means that alpha is always 1.0. If you do not use input from "uSampler" and you are asking the question - you are using wrong abstraction. You do not need filter. You need mesh shader: https://pixijs.io/examples/#/mesh-and-shaders/triangle-color.js Its the basic abstraction of webgl, If you read https://webgl2fundamentals.org/, you'll understand how webgl is all about those shaders. Why pixi books contain only filters? Because v4 didnt have a good way to define shader for mesh. It had only https://github.com/pixijs/pixi-plugin-example and it didnt exist just after v4 release, I had to make it. Why filters even needed if they are good not solution for your case? Why were they main solution for PixiJS v4 and v3? Because of need to apply shader to SEVERAL sprites at once, without need to think of their rotations, scales, e.t.c. - main case is BlurFilter. Filters can work with several passes and be much more effective than just mesh shaders - blur uses horizontal blur, then vertical, several times, to get desired effect - its very hard to do with just one shader pass. How to fix your example easily? Well, use `uSampler`. Take a "texture2D(vTextureCoord, uSampler);`. Take alpha from it. Here's another example for mesh shader: https://www.pixiplayground.com/#/edit/6ThqOOz-SVJe3AyvkbnaU
  14. Here, I'm changing strip texture to WHITE and back on click: https://www.pixiplayground.com/#/edit/yMxrmJL59TO_H9zyKvDsf
  15. it should work. Maybe something wrong with your new texture?
  16. I have tried to change the texture of SimpleRope mesh by mesh.texture = "new texture" at run time... But it's not changing. Even I have tried by mesh.material.texture as well. Both didn't work for me. Can anyone please help?
  17. Here's my pixi playground. https://www.pixiplayground.com/#/edit/huvn96zZqn-UfdrhsUXv7 The shader I've written is from "The book of shader, chapter five". Basically it draws a line and a nice gradient from black to white. You can see right top one on the above screenshot. And then I rotated the sprite by 45, then as you can see, my expectation is it only draws pixels inside the blue rectangle I marked on the bottom right. But somehow it draws pixels on the whole bounding box. The question is how to achieve my goal when rotation is applied to the sprite?
  18. I think you need to figure that out, because your game seems suited for Canvas. No heavy graphics, no rotation, turn-based. You are using 'new PIXI.Application({forceCanvas: true, ...)' right? The API says: "prevents selection of WebGL renderer, even if such is present, this option only is available when using pixi.js-legacy or @pixi/canvas-renderer modules, otherwise it is ignored."
  19. I just don't understand, what is the point of your comment? It literally does not answer his question that he asked. Do you even read your own post before you post it? Putting that aside, to answer topic's author question. Yes, any of those libraries are fine to build complex games, they even are based on WebGL renderer which allows for bigger limits to render stuff on screen at the same time than regular canvas allows you to and even allows 3D stuff as well if you choose right framework to work with. Talking about limits, it depends on how you make the game but if you optimize well enough you could create as large game as you'd like, there's many ways to do that and goes very in depth with it so i'm not gonna explain that but if you want to find more about it, i'd suggest googling that.
  20. I'm using pixi v5, not sure why but everything works very slow when I just use canvas..
  21. Hey guys, Here are this week’s new free music tracks for your projects: On my Action 3 page: WILD WEST COAST RACING 9 – (Looping) https://soundimage.org/action-3/ On my Nature /Science 3 page: ARIZONA SUNSET – (Looping) https://soundimage.org/nature-science-3/ On my Puzzle Music 5 page: PEACEFUL PUZZLES – (Looping) PIXEL BUILDER – (Looping) https://soundimage.org/puzzle-music-5/ And on my Sci-Fi 8 page: SNEAKING AROUND THE GRID – (Looping) https://soundimage.org/sci-fi-8/ For daily updates as I release new tracks, friend me on Facebook: https://www.facebook.com/profile.php?id=100017638394276 Have a good week…and keep being creative!
  22. Yesterday
  23. Actually, I do not consider html5 as a way to earn money for now. It's a hobby for me and maybe only in the future, I'll be able to do freelancing. Nowadays I just try to use decent financial tools in order to keep my money save. For example, on this review, I found information about one visa credit card. It's quite advantageous because it has no yearly fees.
  24. The game is now available as open source under GPL3 in https://github.com/jkarjala/starmines-tng Feedback (and pull requests) welcome!
  25. I always have this with WebGL. Do you need it? Just use CANVAS, smooth...
  26. Hi, I can surely help you in solving the issue. Please share your response to rachel at cisinlabs dot com
  1. Load more activity