Search the Community

Showing results for tags 'pixi.js'.



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 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 248 results

  1. Made anything cool with pixi.js? Post it up here and share it with the world! Whether it's a cool game demo, a fully fledged website or some tripped-out crazy experiment, we would all LOVE to see it! To get the ball rolling, here are some pixi.js projects that exist out on the internets: games: http://www.goodboydigital.com/runpixierun/ http://www.theleisuresociety.co.uk/fightforeveryone/ http://flashvhtml.com/ experiments: http://gametest.mobi/pixi/morph/ http://gametest.mobi/pixi/balls/ http://www.goodboydigital.com/pixijs/bunnymark/
  2. I tried to find answers to these questions online, but was only partially success-full and most of the info I found was for pixi v3 version. Given that we are now on v5 and few things changed, I decided to ask this here to better understand pixi and webgl in general for optimising big amounts of assets. A small intro to my project I am working on a mobile / web game that relies on images for it's ui / characters / items / backgrounds etc. In some places we are talking high detail, fullscreen graphics for characters, something similar to this: https://www.artstation.com/artwork/n616E that have more graphics on top of them (equipment slot ui / equipment item graphics). As you can imagine to have these appear nice and crisp on retina devices some images can be rather big i.e (1125x2436 for a full screen iphoneX screen). And my game has a lot of these. My current experience with pixi and what I am doing now Right now I am not doing anything crazy. I have a loader that generates sprites for all my textures. I did however ran into an issue where some of the bigger character graphics caused lag when their scene was displayed because they were being uploaded to GPU (I think?). I was able to solve this issue by using renderTextures, what I did was map through all loader resources, created sprites, rendered them on render textures and stored those references for future sprites. I actually had separate question about this here My questions / concerns In general my approach so far has been working good, I see smooth animations and memory usage (at least what I see in XCode when I run app on my phone) looks good. I did start noticing few small hick-ups here and there though further into my development and am concerned that I am loading too many assets now. Furthermore I saw few posts saying that webgl can't handle many textures / big textures and this concerns me. What I want to do now is create separate loaders, so I don't load everything at once and ensure I destroy and recreate my renderTextures as they are needed. I also want to start creating spritesheets to group my assets logically. I have following questions: 1. How big can these sprite-sheets be and how many of them can I have? (My lowest supported target is webgl 1 on safari) 2. Do I actually need to use renderTextures to ensure my graphics are ready to go at a moments notice, or is there a better approach? 3. When I use loader with my sprite sheets and create sprites from those sources, what do I need to destroy to cleanup? Just loader, or also sprites and texture sources? 4. And in general what approaches / practices would you recommend for handling 100's of assets like examples below in a game designed for high density displays? 5. Is pixi even suitable for this kind of project? examples (not from my game, but I guess you can picture how big in terms of pixels these can get and there are many of them) https://www.artstation.com/artwork/n616E https://www.deviantart.com/maumonts/art/ITEM-ART-World-of-Reos-795990267 https://www.deviantart.com/francescabaerald/art/Map-of-Middle-Earth-Lord-of-the-Rings-642266670 https://www.deviantart.com/evil-s/art/Burnblade-UI-516602551
  3. Hi, I am new to Pixi.js and I have been searching and looking for the custom blend mode usage with only WebGL in Pixi.js. I looked through the post( ) and the github PR (https://github.com/pixijs/pixi.js/pull/4049) to explore the possible to create my custom BlendMode. Here are my questions: 1. Does pixi v5 support the custom BlendMode like #4049 mentions, and it seems the version that above post uses is v4.5.3 2. I have no idea how to apply the custom BlendMode to the particle effect with reading the repo (https://github.com/pixijs/pixi-particles). I think I should make some change in ParticleUtils.ts, but I have no clue to begin. 3. I also looked the PR about more BlendMode(https://github.com/pixijs/pixi.js/pull/5391), and does this mean if I want to achieve the custom BlendMode, it can only happen in canvas2D but not in WebGL? 4. If I can not use the method: var gl = WebGLRenderingContext; var blend = new PIXI.BlendMode(gl.ZERO, gl.DST_ALPHA, gl.ONE, gl.ONE_MINUS_DST_ALPHA); sprite.blendMode = blend; then how do I construct the shader like blendFunc(gl.DST_ALPHA, gl.ONE_MINUS_DST_ALPHA) Any advices are appreciated! Thanks in advanced!
  4. I import pixi.js like this: import * as PIXI from 'pixi.js-legacy' But somehow when I visit the web-app using a browser having webGl disabled I get an error which tells me to use "pixi.js-legacy". How so? My package.json still contains the normal pixi.js and hence it's still installed, but not imported - could this cause the problem, i don't think right?
  5. Buizerd

    Zapper.io

    Zapper.io is a free massive multiplayer online game. You can play it here: https://zapper.io Android app is now available: https://play.google.com/store/apps/details?id=io.zapper.zapperio It can be played in the browser on desktop and mobile devices. The game is fundamentally different from typical mmo snake-style games in several ways: - Players can always attack other players and bite their tail, although head-on collisions with larger players result in instant defeat. - The world is covered in an electrical grid that provides players with a speed boost. - Zapper worms are procedurally generated and over 2 billion combinations are possible. Players can store newly generated entities in their collection. Zapper.io uses the awesome Pixi.js renderer with the recently improved glowfilter. I also used Pixi.js for my other game, Ninja.io. Zapper.io went live today and I've decided to fill the server with bots to keep the minimum number of entities at 50 until it hopefully gains some traction. Any feedback, comments or suggestions is much appreciated! Thanks.
  6. I try to make my pixi.js scene to adjust its size to the window on resize. To do so I use the following: window.addEventListener("resize", () => { this.renderer.resize(window.innerWidth, window.innerHeight); }) It resizes the canvas, inspecting the element it shows the correct size, but somehow the scene is cut off. Both the text and image are pixi.js generated - all stored in several PIXI.Container()'s
  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. I'm all new to WebGL and Pixi.js - I started digging into this, because of this exact effect I'm trying to achieve: Demo As of now I got a scroll with multiple text object created using PIXI.Text() - this works fine, it's scrollable etc. But unfortunately I'm stuck implementing that kind of old tube tv screen bend effect on the text - don't even know where to start. Can I achieve this using pixi.js? I'm thankful for every hint! Do I need a different approach? That's how I init each text of mine: constructor($el, stage) { this.stage = stage; this.title = $el; this.text = new PIXI.Text(this.title.innerHTML, { fontFamily: "Unno", fontSize: 120, fill: "transparent", stroke: "white", strokeThickness: 1 }); this.text.resolution = 2; this.getPosition(); this.stage.addChild(this.text); this.addListeners(); const font = new FontFaceObserver("Unno"); font.load().then(() => { this.text.updateText(); }) } getPosition = () => { const {width, height, top, left} = this.title.getBoundingClientRect(); this.text.position.set(left, top); }; ...
  9. 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?
  10. 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?
  11. EDIT: I just realized, that importing the normal font as a .woff2, defining a `@font-face` within css and then use `fontFamily: fontName` kind of works as well. One more problem though, the font is not being used on initialization, but when I f.e. change its color on hover. How so? How can I make it use the font from the very beginning? OLD: I'm currently trying to load a custom font to use is in combination with `PIXI.text()`. I got everything set up, the text is being displayed etc. - the custom font is not working though. To use a font, I read online, that it's necessary to create an XML file. After converting my .ttf to XML .fnt using Littera I added it to my project and called the loader. I don't know why it's not working, but `console.log(resources.font)` returns, what looks to me, a font object. How is it still not working? constructor($el, app) { this.app = app; this.title = $el; const loader = new PIXI.Loader(); loader.add("font", "/assets/fonts/font.fnt").load((loader, resources) => { this.text = new PIXI.Text(this.title.innerHTML, { fontFamily: "font", fontSize: 120, fill: "transparent", stroke: "white", strokeThickness: 1 }); this.getPosition(); this.app.addChild(this.text); }); } Using `fontFamily: resources.font` instead returns the following error: FYI: I added the .fnt file to the appendix. font.fnt RL Unno.woff2
  12. After a couple of days working with Pixi.js, I've built up a simple boiler plate for the TypeScript language I'm glad to share: https://github.com/yahiko00/PixiProject The game loop with a FPS meter is already implemented. This boiler plate supports source maps, incremental builds, unit tests and browser auto-refresh. Maybe this could be helpful. Feel free to comment. There is certainly a room for improvement. Cheers!
  13. Hey!, I have started learning Pixi.js. What I am trying to do is fill the whole screen, but preserve the pixel art style and ratio. I tried using renderer.resize() but it simply changes the viewport. Suppose I have a game at 320x240 resolution, and my screen is 1366x768. So my game should zoom 3x and new resolution should be 960x720. But the new screen should use nearest neighbor scaling
  14. Hi, I have encounted something strange and I don't know how to fix it. I have git cloned the examples page onto a local webserver and the plugin projection, 3D Camera spine layers works fine. But when I try to reproduce it into my electron app, the layers start acting like this. How can I fix this? I've tried everything, why does it work on the examples html page but not on my html page. thanks!
  15. 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
  16. Ninja.io is a fast paced, 2D multiplayer shooter inspired by games like Soldat, Unreal Tournament and N-game. Currently implemented game modes include Capture the Flag and Deathmatch. It uses the Box2D physics engine to enable convincing rigid body simulation. Players can make various moves including backflips, rolls, proning, running, flying and crouching. The game is still under active development and I'm willing to devote a great deal of time to finishing this project. I've made a test server available and you can join it by following these steps: - Go to ninja.io - Play as Guest - Enter a username - Join CTF or Deathmatch. - Select primary and/or secondary weapon Press H to display table of controls. Decrease the size of the browser window in case it runs slow. I've noticed that some laptops and older systems have trouble maintaining adequate fps. It is currently not possible to register a username, but I've been making progress on an account and highscore system. The game server is currently located in Europe. I plan on running additional servers on other continents and for the site to serve as a gateway to the nearest game server when players join in order to minimize latency. 2 European and 3 North American servers are available. Any thoughts, feedback or suggestions would be much appreciated! Thanks. Edit - 15-12-2017: New version! Sound effects have finally been added, weapons & items have been updated & tweaked, libraries have been updated and many improvements have been made along with numerous bugfixes. Edit - 15-05-2019: Several versions later: lots of new stuff! Running in Pixi.js v5 now. Party mode has been added, several new maps, new weapons, new sounds, new UI, new account/profile management (WIP), new FX! More to come! I'm currently finishing the implementation of the account system and I'm working on several new maps. More updates will follow soon!
  17. hi masters ๐Ÿ˜ im beginner in pixi.js and game develop. i write a program that in some time load some picture or video or music... not problem in pictures but when load a video or a music. it take long time until play . I decided when start my program . download all video and all music. then show a progressbar with title (loading...) i created my progressBar but can't connect it on my media. thanks for your helps. and sorry for my english languge...
  18. I am trying to setup a Pixi particle emitter using the pixi-particle dependency. Does someone have an example scaffolding file I could use? The examples that are listed are unfortunately only for v4 and I have not been able to accurately update them to get them to work. I would want something that I could drop in an particle object from here: https://pixijs.io/pixi-particles-editor/ and then play around with to see how everything is working.
  19. I want to make my fish(fish_) can transform to another form (fishFly_) while jumping, and I wrote a function called "jump" to do so. But when I was trying to change the .visible of them, console gave me: Uncaught ReferenceError: fish_ is not defined at jump (game.js:142) //the line of "fish_.visible = true;" in "else statement" of "jump function" at t.fn (game.js:127) //which is the line of app.ticker at t.emit (TickerListener.ts:107) at e.update (Ticker.ts:479) at _tick (Ticker.ts:187) seems like I used the wrong way to change it. Can someone help me T_T p.s not native in English, Sorry for my poor English let Resources = PIXI.Loader.shared.resources, Container = PIXI.Container, AnimatedSprite = PIXI.AnimatedSprite; //put in loader and .load(setup functions) let fish = new Container; fish.jump = 0; function fishSetup(){ let fish_ = new AnimatedSprite(Resources['fishWalk'].spritesheet.animations["lagi3_2"]); fish_.anchor.set(0.5,1); fish_.x = 120; fish_.y = 660; fish_.zIndex = 31; fish_.animationSpeed = 0.15; fish_.gotoAndStop(2); fish.addChild(fish_); } function flyingFishSetup() { let fishFly_ = new AnimatedSprite(Resources['fishFly'].spritesheet.anmations["fishFly"]); fishFly_.anchor.set(0.5,1); fishFly_.x = this.fish_.x; fishFly_.y = this.fish_.y; fishFly_.zIndex = 32; fishFly_.animationSpeed = 0.25; fishFly_.play(); fish.addChild(fishFly_); } app.ticker.add(delta=>jump(delta)); function jump(delta){ if(fish.jump){ fish_.visible = false; fishFly_.visible = true; } else{ fish_.visible = true; fishFly_.visible = false; } } window.addEventListener("keydown",downHandler); function downHandler(e){ if(e.keyCode === 32){ console.log("jump key") fish.jump = 1; } }
  20. Hey yall - my friend and I have been working on GORILLA TOWN for about 4 years off and on as time permits. It started as a way to teach my friend how to code but also make it fun - so we aimed at making a clone of the old Qbasic Gorillas game for MS-DOS. Little by little it warped over time into an action oriented artillery game where you have to battle robots and escape said town. You blow up blimps and use power ups through 22 levels. The art, story, music, and voice overs, and UI was inspired by the jazz age and 1920s-30s Art Deco movement, but with a dash of weird humor. There is also a local multiplayer turn-based mode where you can play 1 on 1 or 2 on 2 - similar in fashion to the original Qbasic game. We have a fancy marketing site with more screenshots and features of the game that uses the same tone of voice and writing style we use in the game http://gorilla.town And of course a trailer and a Steam page! https://store.steampowered.com/app/1217560/GORILLA_TOWN/ Background I was responsible for most of the graphics, animation, UI design. We have a custom animation library, particle system, and time scaling game loop - we ended up basically with a small engine with Paper.js and PIXI.js for graphics, with howler.js for audio. We originally started with just using Paper.js, which has an AWESOME api, but keeping the game as vector based over canvas was just too slow - so we switched over to using PIXI.js and little by little migrated many of the techniques and graphics that were procedurally generated in Paper.js to sprites. Later on we used PIXI's Spine runtime plugin to so we could create our game characters. We ran into to many challenges along the way since I was so unfamiliar with the necessities of game development, I build web apps for my day job in both JS, C#, and SQL server, and very little of the usual patterns used there make sense for attempting a real-time interactive application. Object pooling, optimizing collision detection, full keyboard based navigation, etc, etc. A series of problem after problem, that could have probably been solved by not practically starting from scratch. While I learned a lot about the necessary components and the inner works of what a game engine needs - I don't think I have the time or patience to try and tackle it again, and will probably use a full fledged game framework or engine like Godot or Unity, where I can focus on the act of creating a game, and not the performance challenges with trying to make something 60fps in JS. My friend went from no programming experience at the start to tackling complex bugs and implementing many first version features as well as gamepad support. He's also responsible for a lot of the great ideas for the game, that at one point seemed impossible for us to implement. Not to mention, the original soundtrack, sound effects, and voice overs are all his doing. I highly recommend, if you are attempting to go it alone on a game, to try and rope a friend in to the process - having someone to be accountable to and generate ideas with made the difference between quitting years ago, and pushing each other to build a polished game we think we could put up on Steam. So, the game is a smattering of different graphics and audio libraries with custom written glue to turn it in to a game. We started with require.js using the revealing module pattern and migrated to ES6 and transpiled with babel. Then, in the last few months, since chrome/electron support nearly all of ES6 features, use babel only for transpiling to AMD modules so we can use require.js. So, we started with a lot of JS tools that were popular 4-5 years go but have fallen to the wayside. The web dev world these days would be using TypeScript and webpack, but we didn't see the return on investment for overhauling everything we'd already built. We did most of our day to day development inside of Chrome, but the end-goal is to release as a packaged desktop application. We started with NW.js when that was the more popular and easy to start with option, but have since migrated to Electron and all the amazing build tools created by the open source community that make it a snap to create installers for different platforms. We are planning to release on Windows first, then MacOS, and then some flavors of linux down the road. The PIXI.js forum helped us tackle some problems we couldn't solve out of the box. A very special shout-out to Ivan P who lurks on the PIXI.js forum for constantly answering our question almost as soon as we post them ๐Ÿ™‚ Request for Feedback So, we are in beta now, and trying our best to reach people who are willing to play our game and give us some honest feedback. We have an open beta program were we are requesting feedback, and in turn, we will give those who participate a free copy on Steam upon release this April. We've had a lot of downloads, but very, very little in way of that turning in to feedback. I'm hoping a few of your here can try the game out for at least of few minutes and give us your general impression. We wan' to make our little game the best we can. You can download it for windows from: http://gorilla.town/beta.html And, for the curious, he's requirements: OPERATING SYSTEM Windows 10 64 bit PROCESSOR Intel Core i5 2.0Ghz MEMORY 2 GB RAM GPU Dedicated GPU with 1Gb VRAM or better: AMD Radeon R9 / Nvidia GeForce 650 *sorry, integrated Intel graphics chips just won't do* STORAGE 430MB available space Thanks for reading this lengthy post and we're eager to hear any feedback! - Sean
  21. Hi everyone! I want to set the current position to 0 in pixi.js video object. (video file extension is mp4. Loaded and played successfully) And stop the video completely (not pause). How can I do that? If you know about this, please kindly let me know. Thanks.
  22. const font = new PIXI.Text('TJXY'); font.anchor.set(0.5); font.position.set(renderer.screen.width / 2, renderer.screen.height / 2); font.interactive = true; font.buttonMode = true; font.on('pointerdown', function () { font.scale.y *= 1.25; }); stage.addChild(font); that didn't work. but the v5 doc suggested that it's possible, no error show in console.
  23. hi, I'm completely new to pixi.js and i have trouble to replace a video by another video in my canvas. i wrote this code to launch the first video : const video = PIXI.Texture.from('img/dc.mp4'); far = new PIXI.extras.TilingSprite(video, 1920, 1080); stage.addChild(far); .... and when i want to replace this video i used this : video.destroy(true); far.destroy(true); var video2 = PIXI.Texture.fromVideo('img/sd9.mp4'); far = new PIXI.extras.TilingSprite(video2, 1920, 1080); stage.addChild(far); it works but i ve some errors in the console : it say : TypeError: this.source is null TypeError: null has no properties and the number of this last error is growing in time ; Can someone explain me what is wrong and what should i do to resolve those errors. i don't know if there is a more simple way to update the video. Thanks, Pierre
  24. I'm looking to make a simple game using Pixi.js as a renderer and Matter.js for the physics. But I'm having a hard time wrapping my head around how to do that. Does anybody have some code or projects, using both pixi and matter, that I could take a look at? Any documentation/articles/videos are also welcome. Much appreciated.
  25. I making a platform game function hitTestRectangle(r1, r2) { //Define the variables we'll need to calculate let hit, combinedHalfWidths, combinedHalfHeights, vx, vy; //hit will determine whether there's a collision hit = false; //Find the center points of each sprite r1.centerX = r1.x + r1.width / 2; r1.centerY = r1.y + (r1.height / 2); r2.centerX = r2.x + r2.width / 2; r2.centerY = r2.y + r2.height / 2; //Find the half-widths and half-heights of each sprite r1.halfWidth = (r1.width / 2 ); r1.halfHeight = (r1.height / 2); r2.halfWidth = r2.width / 2; r2.halfHeight = r2.height / 2; //Calculate the distance vector between the sprites vx = r1.centerX - r2.centerX; vy = r1.centerY - r2.centerY; //Figure out the combined half-widths and half-heights combinedHalfWidths = r1.halfWidth + r2.halfWidth; combinedHalfHeights = r1.halfHeight + r2.halfHeight; //Check for a collision on the x axis if (Math.abs(vx) < combinedHalfWidths) { //A collision might be occurring. Check for a collision on the y axis if (Math.abs(vy) < combinedHalfHeights) { //There's definitely a collision happening hit = true; } else { //There's no collision on the y axis hit = false; } } else { //There's no collision on the x axis hit = false; } //`hit` will be either `true` or `false` return hit; }; I need a collision point ignoring the player's foot, the game I'm doing is the platform game to be more precise. I want a collider that allows the character to move, but keeping the block collision, vertical and horizontal Image of the bug, the player collides vertically but does not collide horizontally https://imgur.com/a/fNqpni1