Jump to content

Search the Community

Showing results for tags 'PIXI'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





  1. After a lot of time spent creating abilities and animations, I've finished a space multiplayer game with pixi.js (available at https://starmos.io/). My original idea was to make a vector based space game using SVG, but that quickly bogged the rendering. Switching to pixi was a lifesaver, and I was able to keep adding more animations without drops in framerate. The idea of the game is to fight with other players (or bots) to gain levels and increase your score, which unlocks increasingly powerful combat abilities (abilities can also be caught temporarily by a passing comet). There are six
  2. Hello, I have a problem with my pixiJS App, i have many sprites that I can move in my scene and my goal and create a plan with collisions between sprites, for that I use the bump plugin and the rectangleCollision fuuntion :https://github.com/kittykatattack/bump/ let collision = b.rectangleCollision(selectCont,c2,true,false,true); It's works (the middle case on the pic)if my sprite have no rotation but if i want to apply a rotation on my sprite the collisions doesen't work (left and right case in the pic). I thnik it's a problem with sprite bounds but i have no i
  3. I am building a stock chart on PIXI.js. To display different chart styles on chart, I am using PIXI.graphics' drawRect, drawPolygon, lineTo functions. Graphics, Edges, grid lines, text are not sharp in this chart. I would like to say that I've tried several workarounds from the web to make this chart sharp. But those didn't help me. Examples how the chart looks on in candle and area chart styles and renderer parameters are shown in below. const renderer = PIXI.autoDetectRenderer(canvas.width, canvas.height, {view: canvas, antialias: true, transparent: false, resolutio
  4. Hi everyone I have a texture which I use it in Graphics.lineTextureStyle : the whole code goes like this : const app = new PIXI.Application({ antialias: true , width:1000 , height:1000 , backgroundColor: 0xFFFFFF }); document.body.appendChild(app.view); const texture = PIXI.Texture.from('./a.png'); // the size of image file : 900*900 const g = new PIXI.Graphics(); g.lineTextureStyle({width:40 , texture:texture , alignment:0}); g.beginFill(0); g.drawRect(0,0 , 900,900); // the size of rectangle : 900*900 g.endFill(); app.stage.addChild(g); the result :
  5. I'am trying to create 5 sprites and combine them into 1 sprite only once. Then i create multiple objects and assign that 1 sprite to each one of those objects. My idea is that each object has 5 properties like name, image etc.. and if i create 5 sprites per object then it will cause alot of draw calls and sometimes fps drops if the objects are too many, so iam trying to combine the 5 sprites into 1 sprite then add that sprite to each object and inside the object i want to be able to change the sprites inside the 1 parent sprite for each object while that 1 sprite is acting as if it was ac
  6. Hi all , since I am new here I want to say that it's an honor to be part of your great community. I am using Leaflet.PixiOverlay to visualize some data on a Leaflet map . Since I have zero knowledge on PixiJS I would like to ask you if it is possible to wrap the displayed graphic in all maps left and right . The code I am using is the following Note that that's not the completed code, I think that's the part of the code I need to modify , if you need more info I can provide you the whole code var _pixiGlCore2 = PIXI.glCore PIXI.mesh.MeshR
  7. Hello! I have a questions about compressed textures. Questions: 1) Default extension chooser pick @*x multiply depends on window.devicePixelRatio. It works well for mobile, iPhoneX has window.devicePixelRatio = 3. But desktop chrome browser has window.devicePixelRatio = 1. So by default I will get the lowest resolution for desktop browser. Solution is to check userAgent and if it is desktop, force to pick the highest resolution. Are there any others fancy solutions? 2) I have source textures for 1920x1080 resolution, I am generating textures @3x(1920x1080), @2x(1280x720) and @1x(640x3
  8. This is strictly for educational purposes only Since Flash is pretty much being deprecated in most browsers so is Habbo. Since there's retro versions, most of Habbo's assets are available on the internet. I've been using Pixi for now to create a 2D loading screen, which I did successfully. Then it occurred to me that Pixi is mostly just a renderer, and doesn't support 3D the same way as Three or Babylon does. Problem is that, I found coding of 2D UI elements in both Three and Babylon really difficult compared to Pixi. In Habbo it's really minimal what i
  9. Whenever I try to apply RGB split shift effect on the below Image, the rgb effect doesn't work. I dont know why the rgb color effect is not working on Image which has small color variation. For reference, I have added link to codepen demo and Image. The effect is working fine if the Image has color variations so, is there any way i can apply rgb effect on the below Image. Thanks in advance. https://codepen.io/piyushwalia/pen/pobVgWe
  10. pixi-sound don`t work in facebook playable ads but in ironSource all good
  11. Hi, does anyone can help me? I have a video on PIXI, that is not responding to play command, however the events are being triggered 🤷‍♂️ http://fonosteps.com/pt/demo thank you smaller.mov
  12. I'm researching about creating a visual " algebra geometry " desktop game-oriented app for students which the user can create 2D primitive shapes and parametric shape patterns with help of numeric-nodes. the similar application would be something like " grasshopper " plugin for " rhino 3d ". In parametric patterns user may create some thing around 1000 to 1500 user-defined shapes which each shape: - has its own animation for vertices, position, rotation - may response to mouse interactions - has its own color or texture and stroke - will be generated dynamically in runtime base on user
  13. I want to render 50k circles of varying radius and colors. The radius can vary from 1 to 1000. I want to show it in a scatterplot chart where there are circles of different sizes and colors. I have made this codepen sample where I am drawing 10k circles and changing the radius and color of circles by clearing the graphics and rerendering it. The frame rate drops to 4fps. https://codepen.io/ranajitbanerjee/full/abNRRXN How can I make it faster?
  14. Hi everyone, I am new to the HTML5 gaming scene (had experience making games in Flash back in the day), I have recently started learning PIXIjs after being made redundant back in June. anyway, please try out the games I have recently made and any constructive comments welcome 🙂 Fruit Lines - kc-folio.uk/demos/fruitlines/ Fruit Blocks - kc-folio.uk/demos/fruitblocks/ Thanks Ken
  15. Minus the choice. and adventure. Day Job is a delve into the mundane. Play the role of a generic office worker. What do you do? Work, slack, or consume. Once you finish your day at work a narrative will occur to your character. This is based on your character's personality. Whoa, that's right. Getting psychological up in here. We actually follow The Big Five Personality Traits and narratives and items both affect these traits. Some narratives require a certain range of trait values. The game itself is made using angular2pixi (found here) which we created to integrate Pixi
  16. Hi, I am trying to take a snapshot of the main container ( stage) of my application ,which I render on every frame ( customRenderer.render(stage)), and paste that snapshot on the topmost child container of the stage. The code looks like, const snapshot = this._customRenderer.generateTexture(this._stage) const sprite = new Sprite(snapshot ) this._stage.getChildByName("snapshotHolder").addChild(sprite) It takes snapshot alright, but if the stage is scaled down , the sprite even though of actual size of the stage ( lets say 1000x1000), the area covered of it by the snapshot i
  17. Hey guys, I'm brand new to PixiJS and have an issue that i can't seem to figure out. I'm working on a real time multiplayer game where there is a larger map ~3200 x 3200 and players are free to roam. However I want each players "camera" to only show a certain number of pixels so that someone with a large screen wont have an advantage over someone with a small screen. All the game simulation is handled on the server side. I know how to setup an on resize handler I'm just struggling with which values to update. I was able to fudge this with plain javascript like so: (I only every want to show 64
  18. Squid Books is looking to augment its team to build physics based games in PixiJS and MatterJS. Squid Books is an educational platform aimed at making Science accessible. At the core, there is a flexible reader whose learnings are strengthened by surrounding quizzes, videos, and word games. The next initiative is to build games demonstrating NGSS’s Earth and Space Science concepts. We are looking for part-time to full-time contractors/consultants which can lead to salaried employment. ~Additional Information~: - Website: https://squidbooks.com/ - SAAS Vendors: Google Clo
  19. Hello, I need help in drawing text vertically using using pixi. Ex: have to print text "NAME" in container as below; N A M E Ex 2: Text=" NAME PIXI" N P A I M X E I
  20. We have a JS developer job opening that would benefit from someone with WebGL skills. Are you a talented programmer with a passion for open source? We'd love to hear from you. The job is developing an open-source scientific library, https://github.com/psychopy/psychojs for the precise/rapid presentation of stimuli to participants in reaction time experiments and similar, which is why skills in dynamic high-performance graphics programming would be of benefit. This is part of a larger project mostly in Python, www.psychopy.org, which is a pretty popular package within behavi
  21. I have this line "window.addEventListener('click', overBack);" which works perfectly. When having "window.on('click', overBack)" window is undefined, so I left the first option. But the problem is that "window.addEventListener('tap', overBack);" doesn't do the job. I've tried to replace window with page and screen and it didn't work. So I thought you might help me. How do I refer to the window/screen? Thanks in advance
  22. I have a class that extends PIXI.Graphics and created grapics objects in the class. I give them zIndex-es seperately but they show up as if the last item created is the one that is visible. What can be a problem here?
  23. Hey guys I have this input fields (they're not finished yet, I use them just for example). When I enter text the cursor goes with it and when I click outside I want to remove the cursor and keep the text obviously. Only mousemove event does the job but that's not suitable in this case. I pass a function that removes the cursor. I tried almost all the events but I don't manage to remove the cursor when I click outside of the input field.
  24. Rayj

    PixiJS and WebRTC

    I am dabbling in WebRTC and creating a One To Many feature. Note that I am not a seasoned developer and basically learning as I go. I was wondering if, down the line, I can incorporate PixiJS into my WebRTC for things like lower 3rds graphics or other graphic related things? If so, any additional suggestions for using Pixi with WebRTC is certainly appreciated?
  25. this.cursor = new PIXI.Graphics(); /****some code ****/ this.addChild(this.cursor); setInterval(function () { this.cursor.alpha = 1; //alpha is undefined setTimeout(function () { this.cursor.alpha = 0; }, 500); }, 1000); /*************************************************************************************/ let a = this.cursor = new PIXI.Graphics(); /****some code ****/ this.addChild(this.cursor); setInterval(function () { a.alpha = 1; setTimeout(function () { a.alpha = 0; }, 500); }, 1000); Hey guys, could you please explain why I get '
  • Create New...