Leaderboard


Popular Content

Showing content with the highest reputation since 01/18/20 in all areas

  1. 3 points
    https://valhallaepisodes.com/ This is the first game I've ever made and released to the public. Made in Phaser 3, using React for UI elements. Full list of all technologies are available in game. It's an adventure puzzle game adapted from an old Amiga game of the same name; You must guide the Prince through the castle in order to Reach the Lord of Infinity and take your rightful place on the throne. You must think both logically and laterally to complete your objectives. Hi. This is my very first game created, and I'm happy to take any constructive criticism you guys can throw at me
  2. 2 points
    yulijun

    make jigsaw game with webpack

    tutorial for using pixi.js to make jigsaw game with webpack. try it online : http://testactivity.goooku.com/ishop-demo/jigsaw/index.html source code : https://github.com/proudcat/pixi-jigsaw
  3. 2 points
    charlie_says

    Use PIXI.Graphics as button

    Thanks @ivan.popelyshev I almost replied immediately, explaining that was exactly what I had been trying... Then when I reviewed the code, it transpired I need glasses (actually, I do), I'd made a typo in "event", so of course it didn't work...
  4. 2 points
    mapacarta

    [Phaser 3] Rookie Bowman

    Game Link: https://www.kongregate.com/games/mapacarta/rookie-bowman Hi, I published my game on Kongregate yesterday. I hardly get feedbacks on there, so any feedback is appreciated. It is a platformer game with boss fights, collectible items, secret rooms etc...
  5. 2 points
    b10b

    complex games with html5

    Unity exports to a WebAssembly and WebGL output, no "plugin" needed. But that's not to say it's ideal for web, especially not mobile web (search up Unity "Tiny" instead) Possible yes ... but consider this first ... Motion Twins' "Dead Cells" is authored with Heaps, a Haxe based game framework (which has Javascript WebGL output options). Also Motion Twins' catalog before this title was predominantly web games so they clearly have web capabilities. Therefore ... it's reasonable to conclude there's no all-blocking "technical" reason why there isn't a browser version, but there are likely many commercial or user-experience reasons why such a game isn't being published on web (yet). Same issues would likely apply / hinder any other similarly scoped game intended for web, irrespective of authoring tools? Conclusion, as always, is ** understand the audience ** ... on what platform do they want their game (big, complex, small, tiny) to be on. Or ... make web games that absolutely require, embrace and leverage the "web".
  6. 2 points
    Hello! There's one small isometry demo: https://pixijs.io/examples/#/plugin-projection/iso-basic.js However that's not how I usually do isometry. Usually I just use Y scaled by 0.5. You even don't need those "x+z" "x-z" coordinates, if you want to make tiles - take whole two-dimensional array and remove "odd" cells. Like, use only "black" cells of chess board. Then the only problem is to detect which tile is under mouse, but then it will be the only place where you have a isometry math. Everything else is just "x=x'; y = y' / 2" I have many things to tell about isometry: how to sort elements, how to make walls on tiles and intersect/sort them too, but I want to sleep. Try to do something, then I'll give you more info. and Welcome to the forums!
  7. 1 point
    http://pixijs.download/release/docs/PIXI.interaction.InteractionEvent.html#stopPropagation
  8. 1 point
    I see you've tried many things 1. re-creating TextureSystem second time 2. resetting the renderer state, binding/unbinding resource to baesTexture 3. binding/unbinding resource to baseTexture on every upload Unfortunately, that all should not affect behaviour. I dont know what is wrong with your case, I dont actually have websocket server with a video locally. Even without video, I dont know what is supposed result of that demo and what you see is wrong with it. Can you provide more information? I'm sure I can fix that and make your code much smaller if I at least see the bug with my eyes However, you use pixi 5.2.0 - maybe 5.2.1 or dev version ( pixijs.download/dev/pixi.js ) will work better, I remember we fixed something related to texture bind
  9. 1 point
    I expected the visual propety to be deleted, removed from the stage. the cube object exist on the board and when I normally use this command it works fine. later in the code I discard the object and I let the garbage collector "do it's thing": user_cubes[i].pop(); user_cubes[i].pop(); and thanks for the nice greeting into the forums, I am glad to have a place to consult about my PIXI development problems
  10. 1 point
    yulijun

    Pixi.js Showcase

    hi I have made a jigsaw game with pixi.js. hope you guys like it. try it online : http://testactivity.goooku.com/ishop-demo/jigsaw/index.html source code : https://github.com/proudcat/pixi-jigsaw
  11. 1 point
    easy, just call "baseTexture.update()" , it will chang all updateID's , and TextureSystem wlll see that texture was changed on bind: https://github.com/pixijs/pixi.js/blob/1d09bfca1ae1a2fcdcca4c8a80ed59f605abcd76/packages/core/src/textures/BaseTexture.ts#L507 https://github.com/pixijs/pixi.js/blob/1d09bfca1ae1a2fcdcca4c8a80ed59f605abcd76/packages/core/src/textures/TextureSystem.ts#L141 When you call "baseTexture.setSize()" it changes ID's too. Actually, if its only the format you've changed, you can just set "baseTexture.format" and use our regular BufferResource. As for bind problem you encountered, I think I need to see your demo to solve that.
  12. 1 point
    Hello everyone, in late 2013 I started experimenting with what is possible using JavaScript/WebGL (coming from a computer engineering - C++/Java university background). Over time it grew into a game engine and then this game, as I worked on it in my free time next to full time jobs and more recently, contracting work. So it is entirely custom code (the only library used is RequireJS to load the JS files themselves), and I made all the assets as well (models, textures, music, sound effects (using some free CC licensed sound samples as a base) - you can find details in the "About" page in the game. As a result, the engine features and asset quality are rather modest. It is still heavily work in progress as the title suggests, but it has become quite playable recently, so I decided to share it here. About the game My goal is to create a fully fledged 3D space sim with procedurally generated missions that can be played on any computer with a modern browser. I am going for more of a softcore sim feel rather than an arcade one (there are many arcade options these days, but I prefer the more serious, elaborate controls of sims, without the time/hardware investment needed for something like Elite: Dangerous - which also doesn't run on my linux machine) Check out the facebook page, where I post updates and you can also find a recent gameplay teaser video. Game features (so far): full 3D, 6 degrees of freedom gameplay Newtonian physics (with flight assist) basic combat mechanics (primary weapons, shields, flight modes, targeting) 11 simple, authored missions (+3 training missions) against AI in-game database with info about the ships detailed, persistent graphics and control settings graphics settings automatically lowered if default settings are not supported by the hardware (high FPS is not ensured, only that it runs) joystick support an editor to mod the game (even more WIP/unstable than the game) Planned (missing :)) features: procedural missions, with ship upgrades in-between advanced combat mechanics (missiles, jamming, boosting, communication with wingmen) more content (ships, weapons, more detailed environments....) multiplayer Also a lot of polish, HUD changes, performance optimizations etc are planned. You can get a general idea by checking out the issues page of the game's github. Please note! The download size for the game can be significant (tens of MBs - depends on graphics settings and the mission being loaded), so I do not recommend trying it with a plan where you pay based on the amount of data! Play it here Let me know what you think! Technical info You can check out the code at https://github.com/nkrisztian89/interstellar-armada. Feel free to fork it - since it is 100% client side code, you can just throw it into the public HTML folder of your server (e.g. Apache) and it should work locally right away. Then you can use the built-in editor in the tools folder (localhost/the_folder_you_put_the_game/tools) to see how the game data files are organized, play with them (to apply the changes just hit export and then overwrite the original with the exported file in the data folder). Note that you cannot create or export missions or edit config/settings from the editor (as of now) Since this is a long project and I regularly revisit and update parts of the codebase that I might have not touched for a year or so, I try to keep it organized and nicely commented even if just for myself. However, this is not the number one priority, so there are parts of the codebase (which at this point grew above 60,000 lines) which are in terrible, terrible shape. I believe the best example of this currently is the code for the HUD.
  13. 1 point
    rolnxyz

    Pixi Filter and pixel size

    Hi, I'm trying to learn how to pass and use textures in PIXI.Filter. I have a game that uses a complex filter that takes multiple textures and behaves differently depending on the color of the pixel of each texture. It's too complicated to post here. The main problem I have is: I don't know how to measure the width / height of a pixel of the texture I'm passing inside my shader. Here I have a very simple filter that illustrates my issue: I want to create a filter that I pass the following "u" shape texture the filter uses that shape to generate a red drop shadow like this: The problem is the shader messes up and doesn't calculate properly the length of a pixel resulting on this: I was expecting to have a perfect stair going up, and I was expecting more steps on the stair (see algorithm below). Does anyone know what I'm doing wrong? Here's a link to a codepen illustrating the issue: https://codepen.io/alvaromartinlop/pen/abOvzxb?editors=0010 Here's the vertex shader: attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; uniform mat3 projectionMatrix; varying vec2 vTextureCoord; uniform mat3 shadowMapMatrix; varying vec2 vShadowMapCoord; void main(void) { gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); vTextureCoord = aTextureCoord; vShadowMapCoord = (shadowMapMatrix * vec3(aTextureCoord, 1.0)).xy; } Here's the frag shader: precision highp float; varying vec2 vTextureCoord; uniform vec4 inputPixel; // Problem is here varying vec2 vShadowMapCoord; uniform sampler2D shadowMapTexture; void main() { vec4 shadowColor = vec4(1, 0, 0, 1); vec2 displacementCoord = vShadowMapCoord; vec4 shadowMapColor = texture2D(shadowMapTexture, vShadowMapCoord); vec4 finalColor; vec4 translateColor; vec2 translate = vec2(inputPixel.z,-inputPixel.w); for(int i= 0; i < 10; i++) { displacementCoord -= translate; translateColor = texture2D(shadowMapTexture, displacementCoord); if (translateColor.x > 0.0 && shadowMapColor.x == 0.0) { finalColor = shadowColor; break; } } gl_FragColor = finalColor; } Clearly the issue is with inputPixel, displacementCoord is not decrementing properly on each iteration in the for loop. Here's how I calculate the matrix for the texture public apply( filterManager: systems.FilterSystem, input: RenderTexture, output: RenderTexture, clearMode: boolean ): void { this.uniforms.shadowMapMatrix = filterManager.calculateSpriteMatrix( this._matrix, this._shadowMapSprite ); filterManager.applyFilter(this, input, output, clearMode); } So the question is. How do I properly calculate inputPixel so that I don't have the irregular staircase problem? Thanks.
  14. 1 point
    However, if you do manual binds and other stuff, please call "renderer.reset()" method so pixi knows that someone else worked with that context. Yes, we store current boundTexture and active location top optimize our webgl commands sequence. Its here: https://github.com/pixijs/pixi.js/blob/22c9cc00adaafbfd3a3f51dc74f3c9b4925686dd/packages/core/src/textures/TextureSystem.ts#L127
  15. 1 point
    Hello! PixiJS binds textures automatically, you put a link to texture in shader uniform - and it'll work: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js However, you want to upload texture for yourself. In that case you can use our texture resource API: https://pixijs.io/examples/#/textures/gradient-resource.js You dont need to create gltexture nor to bind it. Just call texImage2D inside "upload" method. As for texture params, you can either set them in baseTexture wrapMode/scaleMode, either override "style" method of resource, it has the same signature as upload. If you worried that PixiJS operations wont be optimal, you can snoop them through https://spector.babylonjs.com/ and see that texture params are exactly the same. Welcome to the forums!
  16. 1 point
    Is there any built in system that would pass on attributes and properties to children for example inside of a container? A bit like how html works if you have an element inside another, and for example make the element w 50, h 50, position: abs, right: 0, top: 0, the properties gets passed on to the children etc etc, i could make this myself but it would save some time if there already was something for it.
  17. 1 point
    Not complaining or pushing! If it gets done at all, it would make my day. I continue to be impressed by the evolution of the PIXI project. In the course of my own project, I have had to deal with a lot of maths of my own. The worst being implementing BOUNDED 2-finger panzoom up to my high standards of precision/quality or smoothly animating panning and zooming into another point in 2d space and back again. (Those small phone screens really stretch the imagination on how to make a largish game board usable) Of course, that is all 2d transformation stuff at which you guys are probably pros. I mention this to show my empathy for all the additional maths you guys have to deal with. I'll check out the resources to which you directed me. Thanks!
  18. 1 point
    Usually, its easier to change transforms on individual graphics. However, I do not know architecture of your code, and how do you prefer to write that kind of algorithms. Resetting graphics means pixi will have to call triangulation. It will also re-upload the vertex buffer in case figure has more than 100 vertices. I don't know how to explain it clearly, if you want you can take https://spector.babylonjs.com/ and capture one frame of your app, and see how many webgl commands that mean. Do what is easier for you to do from the coding perspective. It won't be hard to rewrite it later.
  19. 1 point
    FYI, see here : https://github.com/melonjs/melonJS/issues/982
  20. 1 point
    d13

    background downloader for pixi.js

    There's an example here: https://github.com/kittykatattack/learningPixi#loading
  21. 1 point
    Oh i mean resource-loader v3 its this one: https://github.com/englercj/resource-loader/tree/8c27956c2ee68e5190e489d87a3e641df035116b
  22. 1 point
    Nagaraju

    Multi-Style text

    Working great. Thank you.
  23. 1 point
    ivan.popelyshev

    Scratchcard

    Now I really recommend to look at your demo with spectorJS. However to capture the actual frame where ERASE happens you have to spam ERASE automatically, not just on click.
  24. 1 point
    Hello All -- Looking forward to learning a lot from the people on these forums! How can I get the following to work? I am trying to get a container to rotate around it's center, much like is seen here: http://scottmcdonnell.github.io/pixi-examples/index.html?s=basics&f=container-pivot.js&title=Container Pivot However, I can't seem to figure out the math behind placing the container on the screen and then the amount that you must offset it in order to have the pivot rotate in the center. My setup is I have a screen with width: 1536 and height: 722 I have a container with width: 384 and height: 361 I have centered the container in the center by using the following: container.position.x = 576; container.position.y = 180.5; I tried to then set my pivot with the following: container.pivot.set(384 / 2, 361 / 2); My thinking that the local center of the container would be half of its width and half of its height, but then this repositions the container and it is no longer centered. My animate function is as follows FYI: app.ticker.add(animate); let delta = 0; function animate() { delta += 0.1; container.rotation += 0.01; }
  25. 1 point
    IF you just created container, it does have width and height 0, because it doesnt have children. Width and Height are calculated properties, and yes, our main example gives a bad idea to people. It was the same way in Adobe Flash, and its completely different from you see in web development. If you dont understand how "pivot","width/height" work, try to make everything without them. consider that graphic coords are relative to center of the screen.
  26. 1 point
    Jonny Shaw

    Fastest way to do masking?

    Brilliant thanks Ivan, will take a look in detail first, it maybe something else that's causing the error on mobile and report back. Device currently testing on is a Samsung Note 8 (though will try others)
  27. 1 point
    ivan.popelyshev

    Fastest way to do masking?

    > Also seems that using graphics for masks on V5 doesn't work on mobile for me? In a project I'm working on at the moment I have a scene with 5 masks that are simple rectangular graphics and the height of the masks is tweened on occasion. It should work. If it doesnt work - make a demo and tell us a device that doesnt work with it. We made several changes in v5 releases regarding masks, and one of them - scissor masks for rects work inside the filters too. Its not easy to debug that stuff because we have not enough reports from people. For 5 objects there cant be benefits, 5 is a very small number. Pixi-heaven sprite masks weren't ported to v5 but i can port them provided you can actually test it and report back.
  28. 1 point
    Hi, I'm new to PIXI.js and we just have upgraded our project (floor planning) from v4 to v5.2.0 We set the background to white, draw horizontal and vertical lines, two axis lines and the floor design itself and everything was working on v4 before the upgrade process. the problem that not all lines are visible correctly, some lines disappear on zoom in and appear on zoom out. here is the code for drawing the horizontal and vertical lines: draw(keepCurrentGridSpacing?: boolean) { this.clear(); this.removeChildren(); let backgroundLineSize = this.stage.getPixiConstantBasedOnCurrentScale(PixiConstants.backgroundLineSize, PixiConstants.backgroundLineSizeMax, PixiConstants.backgroundLineSizeMin); let mainAxisLineSize = this.stage.getPixiConstantBasedOnCurrentScale(PixiConstants.backgroundAxisLineSize, PixiConstants.backgroundAxisLineSizeMax, PixiConstants.backgroundAxisLineSizeMin); if (!keepCurrentGridSpacing || keepCurrentGridSpacing.valueOf() === false) { this.updateBackgroundSquareSizeBasedOnScale(); } let fromX = ((-1 * this.stage.position.x) / this.stage.scale.x); let toX = fromX + (this.stage.canvas.getCanvasParentWidth() / this.stage.scale.x); let fromY = ((-1 * this.stage.position.y) / this.stage.scale.y); let toY = fromY + (this.stage.canvas.getCanvasParentHeight() / this.stage.scale.y); let startX = (fromX - (2 * this.backgroundSquareSize)) - ((fromX) % this.backgroundSquareSize); let startY = (fromY - (2 * this.backgroundSquareSize)) - ((fromY) % this.backgroundSquareSize); let endX = toX; let endY = toY; let width = endX - startX; let height = endY - startY; this.beginFill(0xFFFFFF); var color: any = PixiConstants.backgroundColor; this.lineStyle(backgroundLineSize, color); this.drawRect(startX, startY, width, height); // Draw Horizontal and Vertical Lines var i: number; for (i = startY; i <= endY; i += this.backgroundSquareSize) { this.moveTo(startX, i); this.lineTo(endX, i); } for (i = startX; i <= endX; i += this.backgroundSquareSize) { this.moveTo(i, startY); this.lineTo(i, endY); } // Draw Axis this.beginFill(0xFFFFFF); this.lineStyle(mainAxisLineSize, PixiConstants.backgroundAxisColor); this.moveTo(startX, 0); this.lineTo(endX, 0); this.moveTo(0, startY); this.lineTo(0, endY); this.stage.animate(); } private updateBackgroundSquareSizeBasedOnScale(){ let canvasWidth = this.stage.canvas.getCanvasParentWidth(); let canvasHeight = this.stage.canvas.getCanvasParentHeight(); let max = Math.max(canvasWidth / this.stage.scale.x, canvasHeight / this.stage.scale.y); let ratio = max / this.backgroundSquareSize; if (ratio < 10) { while (max / this.backgroundSquareSize < 10) { if (this.backgroundSquareSize == 100) { // Smallest grid size allowed is 1 meter break; } this.backgroundSquareSize /= 2; } } else if (ratio > 20) { while (max / this.backgroundSquareSize > 20) { this.backgroundSquareSize *= 2; } } } i'm sure it would be a small issue but i can't find anyone to help me, appreciate your efforts.
  29. 1 point
    Make some kind of a grid algorithm PixiJS doesnt have anything in the package, we dont handle collisions. Grid usually is coded by users themselves.
  30. 1 point
    Hi, i am curious what is best way to make collision. At this moment I make it this way: i have all elements with collision in an array and i iterate through it and calculate distance this way: let dx = this._enemies[i].cords.x - this._players[y].cords.x; let dy = this._enemies[i].cords.y - this._players[y].cords.y; let distance = Math.sqrt(dx * dx + dy * dy); if(distance < 100) { //collision } This calculations make a sphere. We can do it this way to get a square or rectangle: if(Math.abs(sprite1.x - sprite2.x) < 100 && Math.abs(sprite1.y - sprite2.y) < 10) { //collison } I think this is not the best method, because lets imagine we have 1000 things with collision. We have to calculate their distance 1000x1000 = 1000000 times per frame. My second thought is a 2d array that pretends to be map. If object is on x=200 and y=200 we can assign it like this map[200][200] = 1. And then another object check is that place is free (there will be 0 then). Its good when the object is 1 pixel wide and high. For larger objects it could be harder to implement. How are you doing this?
  31. 1 point
    ivan.popelyshev

    Scratchcard

    Hello! This is my example that was added before we had ERASE blendMode. There are several ways to do the same thing. Yes, there's an easy way to do it through ERASE blendMode in brush sprite, if you draw that brush in overlay renderTexture. That way you dont need masks/filters, you just need a sprite with renderTexture over everything. But, even if you described situation correctly, you made something wrong if it doesnt work for you. Please share your demo in pixiplayground.com or jsfiddle or codepen. One of ways to debug whats going on there is to use https://spector.babylonjs.com/ , it can capture one frame and give you information about webgl commands inside.
  32. 1 point
    @gogoprog have help me to solved this problem. And this topic is closed. Thanks everyone.
  33. 1 point
  34. 1 point
    The fix was made in december and will appear in 5.2.1: https://github.com/pixijs/pixi.js/pull/6270 Two ways how to get it: Use "pixijs.download/master/pixi.js" (map file and typings are in the same folder) Look in the example https://www.pixiplayground.com/#/edit/kuhrhc4jG5QnRRtIfwGwk and copy the bottom part to your app (blurFilterPassApply and the hack) Welcome to the forums!
  35. 1 point
  36. 1 point
    @ivan.popelyshev Yeah, the answer is not for newbies, I will need to learn this to implement. (im doing this right now) Can I stay this post OPEN to make new questions when I need? TY @eXponeta for the answer! My case its much more simple than your, but I will need to learn what you say to implement. Thank you!
  37. 1 point
    Congratulations, you've found a bug! https://github.com/pixijs/pixi-compressed-textures/blob/6fa56acaa6a98863f3f00bdf2ed2be16f864f42d/src/CompressedImage.ts#L125 - compressed textures didnt handle CLAMP/REPEAT at all
  38. 1 point
    Hi people, I'm about to start a personal project and I'm thinking to go with pixijs. Is about a city builder isometric-game. I would like to know if anyone have any tips, suggestions or can point me directions of the problems I may find ahead. Several years ago, I did a lil project with PixiJS for my graduation and I remember have a good time with it. But couple years before I had a real pain trying to come up with a isometric game in Construct 2, so I'm quite afraid of follow up with this genre. Any advice will help, since I'm starting blank. Thank you all.
  39. 1 point
    demiculus

    How does the render work?

    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.
  40. 1 point
    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?
  41. 1 point
    Hi , question about GC or how i can clean canvas2d object after use method generateCanvasTexture game use PIXI.WebGLRenderer - only PixiJs version 4.8.2 (this my pain, but i can`t up pixijs to v5) on class this.data:PIXI.Graphics this.view:PIXI.Sprite .... on sometimes i need redraw data on view this.texture =this.data.generateCanvasTexture(PIXI.SCALE_MODES.LINEAR,1); this.view.texture = this.texture; on next time try to clean this.texture, remove from PIXI.Texture.removeFromCache this.texture .destroy(true); delete this.texture ; but debug console in Safari (tab Canvas) show all Canvas wich created on method generateCanvasTexture, but they never destroyed on memory How i can do clean up memory on it?
  42. 1 point
    ivan.popelyshev

    custome Event for pixi

    add a container inside, add containsPoint() that checks if its in red area. It should be easy if you know equations for square and circle.
  43. 1 point
    Hi! I am currently trying out pixi-tilemap. All works well except that CompositeRectTileLayer is making everything blurry when I had set the SCALE.MODE to NEAREST (my sprites are not blurry, only the tile layer). I then foolishly tried RectTileLayer and it isn't antialiasing (great!), but I cannot get addFrame to actually insert the right texture. My first question is, what is the difference between CompositeRectTileLayer and RectTileLayer? And what about the rest of the classes like GraphicLayer? There is no documentation anywhere on the web on in the src folder. My second question is, how to disable antialiasing in CompositeRectTileLayer? (or alternatively, why RectTileLayer only accepts 1 texture) I am using the pixi.js v4 version of pixi-tilemap. I have included the way I am currently adding textures to both layer: var tiles = new PIXI.tilemap.CompositeRectTileLayer(0, [texture1, texture2], true); this.tiles.addFrame(0, x1, y1); this.tiles.addFrame(1, x2, y2); //this works for CompositeRectTileLayer, but doesn't work for RectTileLayer... //RectTileLayer displays texture1 on both x1,y1 x2,y2 I have attached the CompositeRectTileLayer vs RectTileLayer effect.
  44. 1 point
    jasonsturges

    Change cursor view in PIXI.js

    Since this is the #1 Google Search result for changing Pixi cursor, just noting the URL appears to have updated: https://pixijs.io/examples/#/interaction/custom-mouse-icon.js
  45. 1 point
    It's actually simple for matter or impact, you just need to pass world instead of scene. super(scene.matter.world, x, y, sprite, frame, option); // if you are using matter // OR super(scene.impact.world, x, y, sprite, frame); // if you are using impact But if you are using Arcade, that creates a problem. you can't just extend Phaser.Physics.Arcade.Sprite. You have to add this line of code. scene.physics.world.enableBody(this, 0); P.S. To solve this kind of problem I created a development setup to custom create classes. IF you like you can check out my setup at github.
  46. 1 point
    HI i too have been looking for a group of game developers to alongside with and build games together i am still learning the nacks of codiing im not in it for the money i just want to start making some games with a group also i do have a telegram account that you can contact me on im an energetic optimistic person and love to work with people and hope to learn more of game developing as well im a pretty easygoing person and i get along with a lot of different people i myself have a passion for animating i also work on pixel art as well here are some of my sprites i made in pixel art here is some main info about me im male 16 turning 17 this year timezone is perth GMT 8
  47. 1 point
    Ziao

    Where are the Layers?

    For anyone looking for similar functionality - I've created a temporary solution until Containers are added to Phaser 3. Feel free to let me know if this works for you https://www.npmjs.com/package/phaser3-interim-containers
  48. 1 point
    Hi, first post and very new to PIXI! I'm trying to figure out how positioning works and how to do it properly. I have a few followup questions which I'll take later. Goal: Having a centered "mask area" where I can count the "unmasking progress" But first off; here is a fiddle. As you can see I have a centerContainer which I add all my sprites and bind all interactivity to. I center all the sprites relative to the app width and height values. I create the renderTexture with the same width and height as onTopOfMask and imageToReveal (400x400). The renderTextureSprite is not positioned and it results in only a corner being "unmasked" (clearly visible if I comment out the masking, it's positioned top left). If I position renderTextureSprite (fiddle) the same way as I've done with the sprites it works but then the brush/unmasking has some weird offset. 1. Is that the way to properly center the sprites etc or is it better to center the container instead? (like so: fiddle) or any other way? 2. When positioning, why does the mask have a weird offset? Fiddling around but not getting any wiser so help is greatly appriciated!
  49. 1 point
    For your case I suggest to use canvas2d API for drawing, instead of that. drawingCanvas = document.createElement("canvas"); drawingContext = drawingCanvas.getContext("2d"); pixiTexture = PIXI.Texture.fromCanvas(drawingCanvas); function drawBrush() { drawingContext.drawCircle(); //I dont remember API, please consult MDN //you want to count pixels var imageData = drawingContext.getImageData(0, 0, w,h); for (i=0;i<imageData.data.length; i+=4) { ... } //upload drawingCanvas to pixi pixiTexture.baseTexture.update(); } EXTRACT is much slower than texture upload from memory to GPU. So it'll be better if you do manipulations on Canvas2d site , count pixels, then upload it. One more trcik to make drawing in pixi faster: draw the grass to drawingCanvas, and ERASE it with special globalCompositionMode (please consult MDN) https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation That way you wont need mask - you just put drawing sprite on top of revealing sprite, and initially grass just rendered over the sprite.
  50. 1 point
    always have to laugh when i read something like that, 98% of the games that pop out somewhere every year are somehow clones, not exactly 100% clones but they take ideas from existing games here and there i once read a article called "steal like an artist", its all about getting inspired by others if you can manage to create an unique game that dont remind you of another one then do it, but be sure you can make it quick and you can sell it and its really unique :> as for html5 games, to make a living out of it and ensure it works on most mobile devices i prefer simple games, concepts that work and lovely details you add to make it a bit better and bit more unique