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 Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • 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 239 results

  1. 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!
  2. 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/
  3. 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
  4. 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!
  5. 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...
  6. 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.
  7. 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; } }
  8. 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
  9. 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.
  10. 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.
  11. 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
  12. 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.
  13. 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
  14. hi.. I wanna create game tool to create scene. it will be control like spine, sound, event, filter can you recommand UI library to create HTML5 GAME TOOL? thx a lot..
  15. To The Capital 2 is a game in the genre jRPG with classic turn-based battles in which you have to travel together with four heroes visiting a lot of cities, dungeons, mysterious places and fight with various bosses. It took almost 2 years to develop and finally we have reached this important event as the release of To The Capital 2! Big thank you to everyone who has followed our project. I hope our game will give pleasure to fans of the genre of jRPG, and beginners in it. https://store.steampowered.com/app/795120/To_The_Capital_2/
  16. Hi everyone! I have been doing a lot of work with PIXI.js, and it is an absolute wonderful engine. However, I have had trouble with loading extra APIs such as pixi-display and pixi-multistyle-text synchronously in the head tag. I have managed to fixed the issue by loading the extensions once the document was fully loaded effectively inserting an extra asynchronous step, and then running the whole program. I was wondering if anyone had a better solution? Right now it is like this: load pixi.js and all document -> load pixi-display and all other apis -> run javascript And preferably, i was wondering if it would be possible to load pixi.js and pixi-display all together -> run javascript once document loaded
  17. I am trying to constantly update the source of my PIXI.Sprite(resources.image.texture) to match the source of the image that has entered the viewport, while keeping the same displacement map running constantly. Please tell me if this is not possible, or if there is a better solution. If you need more information please ask and I will happily provide it to my best ability. I am new to Pixi.js too so some code examples would be great. Thank you! I will post the relevant html and javascript below to my most recent (failed) attempt. Here is the link to said project. Here is the link to a semi-working version where the background is not changing as an example of what the displacement map should look like. HTML: <body> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section"> <img src="book5.png"> </article> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section"> <img src="book5.png"> </article> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section" section> <img src="book5.png"> </article> </main> <section class="one"> </section> JS: const sectionTag = document.querySelector('section') const articleTags = document.querySelectorAll('article') const bodyTag = document.querySelector('body') const pixels = window.pageYOffset const pageHeight = bodyTag.getBoundingClientRect().height let originalImage = null let originalImageSource = null sectionTag.innerHTML = '' // Set up a pixi application const app = new PIXI.Application({ width: 2000, height: 2000, transparent: true }) // Add the pixi application to the section tags sectionTag.appendChild(app.view) // Make image equall nothing let image = null let displacementImage = null let displacementImage2 = null // Make a new loader const loader = new PIXI.loaders.Loader() // Load in our image loader.add('image', originalImageSource) loader.add('displacement', 'displacement3.jpg') loader.add('displacement2', 'displacement1.jpg') loader.load((loader, resources) => { // Once the image has loaded, now do this image = new PIXI.Sprite(resources.image.texture) displacementImage = new PIXI.Sprite(resources.displacement.texture) displacementImage2 = new PIXI.Sprite(resources.displacement2.texture) image.width = 2000 image.height = 2000 image.interactive = true image.anchor.y = -0.1 displacementImage.width = 1000 displacementImage.height = 1000 displacementImage2.width = 1000 displacementImage2.height = 1000 displacementImage.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.MIRRORED_REPEAT displacementImage2.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.MIRRORED_REPEAT image.filters = [ new PIXI.filters.DisplacementFilter(displacementImage, 200), new PIXI.filters.DisplacementFilter(displacementImage2, 50) ] // Add the image to the app app.stage.addChild(image) app.stage.addChild(displacementImage) app.stage.addChild(displacementImage2) // add rotation app.ticker.add(() => { displacementImage.x = displacementImage.x + 0.5 displacementImage2.x = displacementImage2.x - 0.5 }) }) articleTags.forEach(article => { document.addEventListener("scroll", function () { if(article.offsetTop - 200 <= pixels){ originalImage = article.querySelector("img") originalImageSource = originalImage.getAttribute("src") } }) })
  18. Hello I'm building an app that will allow the user to draw different primitive shapes on the image ( circles, rectangle ... ) as well as scale and rotate them. The problem is in the size of the image. The images being used are around ( 25000 x 5000 px ) and its to high to load that into PIXI.TextureCache . The images won't have any interactivity to them except the zoom and pan functions. I'm looking for an efficient way how to do that . I was thinking maybe loading image on the separate off screen canvas and splitting it on smaller chunks that will be loaded into the Texture object, or maybe splitting images on the server and generating the spreed sheet of 512 x 512 px tiles. But i don't have a clue how to do that ( i do but it's a really small clue ) - How can i implement images this big ? - Should i choose different library for this ? ( I really like performance of pixi.js but if you have something in mind feel free to say ) I'm looking forward for your feedback, thanks for reading this and cheers .
  19. I noticed a strange issue with PIXI.js. Previously I developed in Phaser.js and such problem never happened. So, I want to handle clicks on buttons, these buttons are containers and I put hitArea into each. Problem is when I playing the game in Chrome with device toolbar and pick iPad (what does not fit into my screen), zoom mode toggles to 50% and after, all click handles in different areas. With zoom 100% everything good, but as I said, devices as iPad does not fit into my screen with 100%.
  20. To The Capital II - is a game in the genre jRPG with classic turn-based battles in which you have to travel together with four heroes visiting many cities, dungeons, mysterious places and fight with various bosses. Storyline Prior to the overthrow of the current authorities and getting to the capital, Louis gets an assignment from the king to find fugitive participants in the failed coup. Together with Ralph, Bernard and Amelia joined by order of the command, they go on a journey through mysterious forests, snow-capped mountains and hot deserts. Official site: tothecapital.com We will be glad if you join us on Facebook www.facebook.com/tothecapital
  21. I have a huge sprite that contains many sub sprites, I want to add mosaic to a specific area of this sprite. I have tried the PixelateFilter but it takes effect on the whole sprite. The attachment is what I want (see top-right corner)
  22. Hy everyone, My question is about the hitArea of a sprite. First of all I am not quite sure if I understood the definition correctly, so I would really appreciate a clear explanation about it. What I want to do is: I have sprites in my game and I would test collision between them, but the sprite's width and height is not perfectly accurate to its 'actual appearance' so I would reduce the hitArea to improve my collision detection algorithm (but sometimes setting the hitArea is making it worse than using just the regular .getBounds() function). This is how I did it for the first time but collision didn't occur. let player = new PIXI.Sprite(texture); player.position.set(75, app.stage.view.height / 2); player.anchor.set(0.5); player.hitArea = new PIXI.Rectangle(player.x, player.y, 60, 20); Later I found out that it is because the enemy that I am checking the collision against, is not being compared to my player object, but the initial coordinates of the PIXI.Rectangle that I use to modify hitArea with. I have found out that if I want to compare the player.hitArea of the current position of my player object to enemy.getBounds(), in my game loop I update the hitArea of player like: app.ticker.add( () =>{ player.x += player.velocityX; player.y += player.velocityY; player.hitArea = new PIXI.Rectangle(player.x, player.y, 75, 85); }; I feel like this is a poor solution that I have came up with. Is there a better way of always updating hitArea coordinates to the player object's current coordinates?
  23. Link: JigsawPuzzles.io - multiplayer cooperative jigsaw puzzles There are always a few ongoing public games on the homepage. Anyone can join these. If you want a more controlled experienced, signing in allows the creation of private games. You can invite friends into your private games. Tech stuff: The game is made in a hybrid of canvas and Pixi v4. The multiplayer is node.js + websockets via nengi.js. The game is only online multiplayer, even when playing alone. I'm primarily a network programmer and the whole project began as strange experiment of programming a casual puzzle game as if it were a shooter (movement prediction, lag compensation, reconciliation). I usually work on shooters. The hope was that the controls would come out feeling like the game was single player up to 500 ms of latency and 5% packet loss. The project has changed a little since then (the servers are no longer 30 tick) but the essence remains. It uses 2K and 4K images depending on the puzzle size, which is kinda fun because of how much it is possible to zoom in/out. The big puzzles are primarily aimed at desktop users, but are decent on touch tablets. Mobile isn't supported yet... but it does kinda work on some phones just by chance. We've got a few crazy modes that we're considering in the future. For now the only mode is a cooperative recreation of the table top experience. Thank you for checking out the game Here's a 1148 piece puzzle: Here's a smaller puzzle: What the catalog/setup page looks like (gotta sign in first, so that progress we can save): Social accounts for the game: https://www.facebook.com/JigsawPuzzles.io/ https://www.instagram.com/jigsawpuzzles.io/ https://twitter.com/JigsawPuzzlesIO https://www.reddit.com/r/jigsawpuzzlesio/ https://discordapp.com/invite/axT9bRw
  24. Hey y'all, I made a package that I have been heavily using and honing in a game I'm working on. It allows you to use markup to create PIXI scenes. I'm hoping it'll help someone out there (and help make PIXI easier to use with angular2). Currently, it's not really optimized for performance as it's in its early stages (and I'm not that talented). If anyone has suggestions, feedback, or just wants to give it a whirl here is the github and npm info. It is being actively developed and maintained. https://github.com/Shadowstep33/Angular2Pixi https://www.npmjs.com/package/angular2pixi FYI: on the roadmap is more support and out-of-the-box components that implements PIXI's built in features.
  25. I've loaded two animations in Pixi with spritesheets. I wanna swap to second animation right after the first animation is finished. However, (It's happen with a 3840x1080 resolution, and the GPU memory usage is mainly fall between 90%-99%) 1. there's a significant lag of the transition between these two animations in the first time. 2. After the first play, if I remove and add the animatedSprite from the stage immediately, the transition is very smooth. 3. After the first play, If I remove the 2 animatedSprite from the stage, wait for ~2-3 minutes and add the 2 animatedSprite into the stage again, the transition is lagging again. I wanna know the proper way of swapping two animation in Pixi and also the reason of this phenomenon.