Search the Community

Showing results for tags 'PixiJS'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 214 results

  1. Huanzyz

    New Pixi Loader

    Hello everyone, I am a student from Vietnam. I bump into some issues on my very first step into Pixi JS and it was two days that i cannot find a way to make it work. Therefore, i decide to seek for help and it means a lot to me if you guys can give me some advices about my problem. Thank you all in advance. My idea is very simple. I want to load an image and trigger some events when the image start/finish loading, then display it on the canvas. My image path is an URL. My problem is: - the resources doesn't include the texture property (but when i download the image, save it locally and use a local path instead of URL, the texture property appears) - it works when i use Sprite.from(url) but i cant attach events when start/finish loading like using loader Wish you have a nice day sir and stay safe canvas.html
  2. Anybody here who knows any Community chatroom for pixijs/threejs/game development that are active? My laptop (from my work) blocks some site including html5gamedev because it has some tags for "gaming" but surprisingly not discord/gitter/reddit so I am trying to find alternatives while I am on my laptop.
  3. On first images (red circles) im using draw method and they are very VERY bad quality On second image I used png texture, but still new trouble - somewhere circles are DEFORMED. How to draw solid smooth circle???
  4. Harryk89

    physics library

    Please tell me, what is the best physics library for Pixi.js or commonly used and do they all work with pixi.js v5?
  5. joelt

    Math Hero

    Hi! I'm in the process of developing a math based, arcade style game: Math Hero. The core of the game is to solve mental arithmetic challenges to progress through the levels. It is a mobile-focused game and the format I guess is a bit towards the hyper-casual genre, with short and quite intense game sessions. I think the game mechanics turned out pretty cool but I would like to hear what you guys think. The theme is set in space, where your navigating between planets. The next big feature that I'm currently is implementing is a CO-OP mode where you can join forces with a friend in real-time to solve problems and earn points together (hence the server focused implementation). http://mathhero.xyz Any feedback would be greatly appreciated.
  6. Hi, all I need to show loading spinner until PIXIJS finish calc all nodes and before the going to render scene. do you now to give a callback to PIXIJS to call before first render ? @ivan.popelyshev do you have any idea?
  7. That's how I currently load an image as a sprite. As for now, some image are distorted due to a different ration than the sprite's: this.sprite = PIXI.Sprite.from(this.image); this.dimensions = { width: window.innerWidth * 1.05, height: window.innerHeight * 1.05, alpha: 0 }; // later in code getPosition = () => { if (!active) { this.sprite.position.set(window.innerWidth / 2, window.innerHeight / 2); this.sprite.width = this.dimensions.width; this.sprite.height = this.dimensions.height; this.sprite.anchor.set(0.5); this.sprite.alpha = this.dimensions.alpha; } else { const {width, height, top, left} = document.querySelector('.detail__image').getBoundingClientRect(); this.sprite.position.set(left, top); this.sprite.width = width; this.sprite.height = height; this.sprite.anchor.set(0); this.sprite.alpha = this.dimensions.alpha; } }; update = () => { if (!this.sprite) return; this.getPosition(); } As you can see, when active is true, the sprite is bound to a html element, if not it's about the size of the window. How can I make the image cover the sprite, without distorting? Just like `background-size: cover` or `object-fit: cover`. Tried to find something online, but couldn't make it work for me.
  8. let bigRect = new PIXI.Graphics(); bigRect.beginFill('0x00FF00'); bigRect.drawRect(0, 0, 200, 150); bigRect.endFill(); let smallRect = new PIXI.Graphics(); smallRect.beginFill('0xFFFF00'); smallRect.drawRect(0, 0, 190, 140); smallRect.endFill(); let smallRect_x = bigRect.x + (bigRect.width - smallRect.width)/2; let smallRect_y = bigRect.y + (bigRect.height - smallRect.height)/2; smallRect.position.set(smallRect_x, smallRect_y); app.stage.addChild(bigRect); bigRect.addChild(smallRect); bigRect.position.set(100, 100); I want to center smallRect inside bigRect. Why is it working in the code above when positions are set to (0, 0) initially, but wouldn't work if I had any position other than (0, 0) for the bigRect. It's not a problem to set the initial positions to (0, 0) and than change them, I just want to understand how it's working underneath.
  9. Dear members, For a project im a working on i need to make a countdown timer, for the visuals i am stuck on how to achieve it. Is there any functionality pixijs has that could achieve this: So far i have looked into the PIXI.sprite.mask but if possible i would like to achieve a radial mask or similar effect that would not require me having a spritesheet or list/array of pictures for the countdown animation.
  10. I have a displacement filter using an radial map you can find attached to the post. This filter is bound to a sprite which is following the cursor. In addition to this displacement filter, I'm trying to also include an RGB split at the cursor's position. To do so I installed the type `RGBSplitFilter` and tried to use it the way I use the displacement filter: initDisplacement = () => { this.displace = true; new PIXI.Loader().add("/dis.png").load(((loader, resources) => { this.posX = window.innerWidth / 2; this.posY = window.innerHeight / 2; this.displacementSprite = new PIXI.Sprite(resources["/dis.png"].texture); this.displacementFilter = new PIXI.filters.DisplacementFilter(this.displacementSprite); this.displacementSprite.anchor.set(0.5); this.displacementSprite.x = window.innerWidth / 2; this.displacementSprite.y = window.innerHeight / 2; this.displacementSprite.scale.set(2); this.displacementFilter.scale.set(2); this.stage.addChild(this.displacementSprite); this.stage.filters.push(this.displacementFilter); document.querySelector(".detail__image").addEventListener("mousemove", (e) => { this.posX = e.clientX; this.posY = e.clientY; }) })) }; loopDisplacement = () => { this.displacementSprite.x = this.posX; this.displacementSprite.y = this.posY; }; As you can see I get the map's texture, define it as a sprite and kind of attach a displacement filter to it. Likewise I tried to use `this.rgbFilter = new PIXI.filters.RGBSplitFilter(this.displacementSprite)` - but this didn't work. What's the correct approach to implement such an rgb split at the cursor's position?
  11. Hey all, I've been working on this game with Vanilla JS now as a hobby for a while now and I've just released a new major version on GameJolt. It'd be great to get some feedback before I push it out to iOS and Android. It's rendered in PixiJS. https://gamejolt.com/games/arcadebuilder/491387 I'm also working on this kinda weird embedded version for my website where it loads a "mini" version of the game in the background. http://jamdonut.com/demo.php More about me and the project: http://jamdonut.com/about.php Thanks to any who try it out, and if you wanna talk about dev more or about the game drop in on discord here: https://discord.gg/mBZ7zDQ Thanks, Jammy Credit to: pixi-tileset, pixi-viewport, easystar, pixijs & community.
  12. I have a `PIXI.Container()` I apply a shader/filter to using `container.filters = [filter]`. Documentations says, to remove a filter, just set `container.filters = null`. This works, but it's kind of a hard cut, when the image/sprite inside of the container is still visible, hence my question: Can I remove a filter with a kind of fade/transition?
  13. Hi, guys I need your help, i have angular 9 project with lates pixiJs 5.x. my GPU go up until 100% when i run. I see nice article About Angulr & Pixi -> https://medium.com/@hazterisk/how-3-lines-of-code-reduced-cpu-and-memory-consumption-by-13-b451de874701 after implement changes still i get 100% GPU I create issues on https://github.com/pixijs/pixi.js/issues/6578 you will find steps to reproduce and repo
  14. Hi, I'm new to this forum so hi to everyone! :) Currently, I'm trying to build an isometric tilemap that also displays a certain height. Here is a demo: https://www.pixiplayground.com/#/edit/69C1wfNIowvu5wNNccv8w I have the following problems and maybe somebody could guide me in the right direction. 1. Shadows: When I remove the lineStyle, different heights and the depth of the scene are not really recognizable. I think this could be solved with proper lighting and shadows. Any suggestions on how to implement this? 2. Sprites & Performance: I'm currently calculating all vertices manually and then I draw a PIXI.Graphics-Polygon according to the vertices. Is there a more efficient way to do this. I'm not very experienced with PIXI.Mesh, SimpleMesh or SimplePlane. I wanted to use the PIXI.SimplePlane first but the documentation seems to be wrong... In addition to the mesh generation do you have any tips on how to properly cover the mesh with sprites, soften the edges and smoothly transition between different sprites. 3. Player movements & buildings: In the future I'd like to be able to add players and buildings. This is not so important right now but as the objects will heavily interact with the map, I'm happy if you have some guidance on this topic as well. Thank you very much! All the best Tom
  15. We are a team of developers and designer working on a multiplayer dungeon crawler that’s procedurally generated on the blockchain, inspired by classic text and grid based MUDs. We are looking for a pixiJS developer to work with us to launch the dungeon. Preferably this developer should be experienced with pixijs v5. Otherwise, experience with flash/actionscript would be helpful. Our team is based in New York and the UK, and we are looking for someone to work remotely with us. PM me if you are interested or reply here if you have any questions!
  16. Hi all! I made a simple platformer, a hobby project done in free time. It is a HTML5 port of a game I made in Pascal as a teenager over 20 years ago. I improved a lot of things in terms of game mechanics, level design, etc. but the graphics are all original - hand drawn in MSPaint somewhere around 1998 I have a bit of nostalgia for this game and I can find some charm in its style but probably the reality is that it just looks ugly. I would like to get some feedback whether it's playable nevertheless, what can be improved and whether the graphics disqualifies it or not. The game has 4 levels, difficulty gradually increases with later levels. It works on both mobile and desktop - on desktop it's easier to play as you can use the keyboard to control rather than touch. I can beat it on a mobile phone without problems but I played it a lot during playtesting so got used to the controls. It's coded from scratch and uses pixijs for drawing. It's my first complete HTML5 game, I hope someone will enjoy it Here is the link: http://platformowka.pl
  17. Hello, everyone! It's been a while since I don't touch this project, but I really wanted some feedback on this. I call it Ready 2 Dance and it is a dance rhythm game that uses PoseNet and PixiJS. Inspired by ParaPara Paradise, DDR, OSU and many others, it consists on hitting the circles in the right time following the song, which would be identical to the choreography from the youtube video. Not all songs include the video choreography right now. Since it is a dance rhythm game that uses posenet, it is required to have a webcam to play. I hope everything goes alright accessing the camera. 😅 And you would need to get up and dance. 😛 At this moment all the content is restricted to the dance charts I make, but I wanted to make this open to every logged in user. I'm afraid of the proportions that this is going to take in terms of billing (I'm not familiarized with that) and trolling. I thought about making this an electron app instead, so the users can make whatever they want and share with whoever they want, but I'm not really sure if this would be the best solution. I'm pretty new to programming in general, so I would be really happy to hear any advice and opinions that you have. 😁 Link to the game: https://parapara-game.web.app/ Screenshots: I hope you like it! kikito
  18. i am trying to making zoomin images slideshow using pixijs on canvas from three images below this I tried but not succeed. My question in how to add zoomin or zoomout image in pixijs for specific width and height, then second image and so on. I am writing this code var pixiapp; var pixiloader = PIXI.Loader.shared; initpixiapp(); function initpixiapp() { pixiapp = new PIXI.Application({ width: 1280, height: 720 }); document.getElementById('canvas-container').appendChild(pixiapp.view); pixiloader.add('images/img1.png').add('images/img2.png').add('images/img3.png').load(handleimagesload); } function handleimagesload() { var imagessprites=[] var img1 = new PIXI.Sprite(pixiloader.resources['images/img1.png'].texture); var img2 = new PIXI.Sprite(pixiloader.resources['images/img2.png'].texture); var img3 = new PIXI.Sprite(pixiloader.resources['images/img3.png'].texture); imagessprites.push(img1) imagessprites.push(img2) imagessprites.push(img3); for (let index = 0; index < imagessprites.length; index++) { const element = imagessprites[index]; pixiapp.stage.addChild(element); // here will the the code to run zoom image to specific width and heigth and then move to next image, // here is my code, its only display zooming third image var ticker = new PIXI.Ticker(); ticker.add(() => { console.log('ticker called') element.width += 1; element.height += 1; if(element.width==1500) { ticker.stop() } }) ticker.start() } } One more things, how to display a box with text for three seconds before slideshow start.
  19. About the role A Game Developer at Roxor/Playsafe plays a crucial part of the creation of our awesome games. You will be working in a team that is responsible for taking the game from a concept stage to a finished game, optimized for both desktop and mobile devices. Not only will you write structured, testable quality code but you will also support our graphics and FX artists with implementing and coding art and graphical effects. We work in small agile teams consisting of a game designer, sound designer, producer, QA, artists and of course game developers. We believe that working closely in small team is crucial in creating the best games and it helps us in an agile way to take faster and better decisions. We develop our games in Javascript and TypeScript. They are rendered with the PIXI engine in WebGl and Canvas. To give the players the best experience, we put a lot of effort in optimizing our games for all platforms, both regarding file size and performance. We work in an ambitious, casual and fun atmosphere where we take a lot of pride in the games we create. Your Tasks ⦁ Participation in the design process for new features in the new games framework ⦁ Implementing new features in the new games framework ⦁ Implementing new games in games framework ⦁ Code Reviews of new features implemented by other developers Qualifications and Experience ⦁ +2 years of prior experience of software development as employee or contractor ⦁ Experience working with graphically performance-heavy web applications and games ⦁ Working experience with JavaScript, ActionScript, TypeScript, or similar ⦁ Working experience with any JavaScript based game engines, like PIXI, Phaser or similar ⦁ Interest in computer graphics programming, animations and effects ⦁ Good communication skills to explain technical requirements to the game designer and producer ⦁ Experience with client-server integrations ⦁ Understanding of good practice version control, artefact versioning, branching model ⦁ The ability to deliver in an agile, iterative environment where pace is high and all voices matter We also value ⦁ Experience with hardware-accelerated 3D techniques ⦁ Experience working with TDD and automated testing techniques ⦁ Any other creative skill, from sound design to 3D modeling Who are you and what do we offer We are seeking a social, positive, and driven person who can help us create the best video slots on the market. You are a team player with strong initiative and self-motivation thriving in a small team environment where the route from idea to implementation is very short. You should be collaborative, fun to work with and be able to augment our design process with great animation instincts and a firm grasp of the best tools for building cross platform experiences for the modern web. If your interested in the position please feel free to notify me at nico.vdmerwe@playsafesa.com. We are based in Cape Town, South Africa. GameDeveloperRole - Job Description.docx
  20. hi friends. I want dispatch a custom event for one sprite. for example: when click on bunny sprite. dispatch an event that name is : sayHello. i wirte this code: but when run and click on bunny show this error: but if i change this code: this.dispatchEvent to -> document.boy.dispatchEvent work successfuly. but i Want dispatch to my sprite or container . can do it????
  21. 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?
  22. Hi all ! I'm currently working on a bomberman-like game, full of traps and special items and up to 10 players (objective: 100 players) The game is currently under development and we have a lot of plans to enhance it: new mods and modding engine new heroes, skins, biomes manage your account, friends, group host your local games and much more... (made with pixi.js, react & howler for the frontend) Play right now here: https://beta.starbomba.io/ Hope you'll enjoy and feel free to discuss
  23. Hi every one... I am very new to pixijs... need do a userlogin screen, I am unable to figure out how to add a textbox to canvas .. please let me know how can I do that.. and I want present the table of data.. in the next screen as well so let me now how to add a table as like object to the canvas.. Thank you for your time..
  24. Hi all, I'm on the lookout for anyone who would be interested in collaborating on the development of a few PixiJS based games. I've done a fair few now myself but I'm quite pushed for time, I'm more of a designer than a developer & have a small backlog of projects that could do with a helping hand. Ideally I'm looking for someone more on the development side with at least basic graphic design skills needed to take the assets from a psd into the game (prepping atlases, 9 sliced sprites etc), but if you can do more than that all the better! Going forward the games will mainly be built in es6/PixiJSV5, with animation through GSAP & Spine. Example of the type of project we'd be working on below... If you're interested, feel free to drop me a PM and can go over in more detail and discuss rates etc, Cheers!
  25. NMN

    Brush Blur

    Hi All, I'm trying to implement a paint brush blur filter similar to the brush displacement filter here: https://codepen.io/PavelLaptev/pen/aLVbxG . Could anyone point me in the right direction? Thanks!