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
    • 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 230 results

  1. 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.
  2. 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
  3. 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..
  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. 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/
  6. 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
  7. 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") } }) })
  8. 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 .
  9. 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%.
  10. 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
  11. 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)
  12. 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/
  13. 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?
  14. 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
  15. 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.
  16. 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.
  17. Playable: https://zblip.itch.io/mister-line Hello, I'm making a game and this is my progress. The game is a puzzle about drawing a line. The goal will be to fill the available space with the line, but I'm going to add tons of obstacles/mechanics to spice it up. Web version is being built with pixi.js Not released just yet, but soon. https://twitter.com/ZBlipGames
  18. I'm using pixi.js ver 4.8.2. I want access not premultiply color from renderer's shader in pixi.js application. I set transparent is 'notMultiplied' , but I can olny access premultipilied rgb color... Is there way to access not multiplied color ? I put code and result here. // init with not multiply mode var app = new PIXI.Application(800, 600, { backgroundColor : 0xcccccc, transparent: 'notMultiplied' }); document.body.appendChild(app.view); // draw circle graphics with red and alpha 0.5 ( drawn at display left ) var graphic = new PIXI.Graphics(); graphic.alpha = 0.5; graphic.beginFill(0xff0000); graphic.drawCircle(100,100,100); graphic.endFill(); app.stage.addChild(graphic); // use graphics as a texture ( drawn at display right ) var mesh = new PIXI.mesh.Mesh( graphic.generateCanvasTexture() ); mesh.position.set(300,100); app.stage.addChild(mesh); // replace MeshRenderer shader for test premultiply effect app.renderer.plugins.mesh.shader = new PIXI.Shader( app.renderer.gl, // vertex shader is same as original MeshRender's one ` attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; uniform mat3 projectionMatrix; uniform mat3 translationMatrix; uniform mat3 uTransform; varying vec2 vTextureCoord; void main(void) { gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); vTextureCoord = (uTransform * vec3(aTextureCoord, 1.0)).xy; } `, // I changed change fragment shader for test ` varying vec2 vTextureCoord; uniform vec4 uColor; uniform sampler2D uSampler; void main(void) { //gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; <- remove gl_FragColor = vec4(texture2D(uSampler, vTextureCoord).rgb, 1.0); } ` ); // render graphics and mesh. app.render(); The execution result Ideal result is like this.
  19. SOFTGAMES is looking for an experienced Game Developer - JavaScript / HTML5 who is goal-orientated and a strong team player. Join a team of super experienced people to build great games for Messengers that will entertain tens of millions of people around the world every month. You design, architect, test and implement game features into our live games. Further you'll work on upcoming Messenger Games from the scratch until global release and during post-launch. You will collaborate with producers, game artists and with other HTML5 Game Developers to share learning and best practices. You are passionate, ship robust and high-performance code, and act as a fount of knowledge when it comes to game development. As part of a small, high experienced and dynamic team you will enjoy a creative, challenging and collaborative environment. Your role… Develop HTML5 games for Facebook Messenger to expand our portfolio, with Pixi.js Maintain and optimize game features Write robust code to be used by millions of users Work on schedule, set clear goals Independently create complete solutions from scratch Share knowledge and help colleagues Your profile… Great passion for game programming 3+ years of professional software engineering experience Deep knowledge of: Pixi.js JavaScript / HTML5 As a plus: Phaser, TypeScript, Webpack, Reactjs, Node.js Shipped at least 2 mobile/social title, preferably on multiple platforms Ability to quickly get up to speed with existing code Deliver high-quality and well-structured code Open-minded and keen to learn Check out Cookie Crush on Facebook Messenger. Can you build this game? We offer… A spirited, inspiring, international and enthusiastic team The best and brightest company in producing and distributing Messenger Games The chance to craft games for millions of monthly gamers Valuable insights into global expansion, start-up scene and entrepreneurship Flexible working-hours and flat company hierarchy Inspiring company breakfasts, epic team events Perks: fresh fruits, cold drinks, tee, coffee, discounted local transport ticket, health package, lunch vouchers, maternity leave etc. About SOFTGAMES… Based in Berlin, the creative capital of Europe, SOFTGAMES together with its ROFL brand is the leading developer of games for Facebook Messenger and the developer behind popular titles like Cookie Crush, Solitaire Story, Candy Rain or Fish Story. Further SOFTGAMES is operating the world’s largest platform for HTML5 games distribution and monetization outside the Messengers. We’re delivering fun to tens of millions of players every month across 6 continents on the device of their choosing. Our vision is to help users to instantly discover and engage with games they like, while helping brands to reach their target audiences. Have we caught your interest? Then we look forward to your detailed application here: https://softgames.recruitee.com/o/game-developer-javascript-html5
  20. Hello, I have 2 questions regarding the optimization on Pixi.js On this page https://github.com/pixijs/pixi.js/wiki/v4-Performance-Tips On the Sprite part it says: Use spritesheets where possible to minimize total textures Sprites can be batched with up to 16 different textures (dependent on hardware) I am not sure to understand perfectly the above statement. So for exemple let says I want to display 40 differents buildings on screen. In term of performance (rendering) would it be better to have a big PNG file with all those buildings inside (that I can use as Spritesheet) or have 40 png ? Also I created a fountain water particle using https://github.com/pixijs/pixi-particles I have 2 foutains Sprite on my screen looking exactly the same with inside each, a Pixi.particles.Emitter for the water. Is there a way to have some kind of duplicate of the first fountain in order to have only one Pixi.particles.Emitter updating instead of 2. Thank you so much for your answers. Best
  21. Hi, I am working now with some projects involving Pixi.js I have made a quickstart project, with the minimum tooling, in order to start developing with Pixi.js from 0. It uses Parcel and all its amazing features like Hot Module Reloading. Highlight features: - Super fast start - Hot Module Reloading - Typescript - Unit testing Here is the GitHub link: https://github.com/llorenspujol/parcel-pixijs-quickstarter Hope can help someone to start a Pixi.js project:)
  22. Hey everyone ✌️ My name is Tibo and I’m lead Creative Developer at Voodoo, the leading mobile game publisher. I’m looking for coworkers to make HTML5 games with me :)! This is a paid opportunity for a job in Paris, France (paid relocation if needed) and actually one of the few job offers for HTML5 game developers on the market. If you’re interested in gaming and would like to enter the industry, are technically savage and eager to learn a lot this really is a gold opportunity! The goal is to create playable ads, a very new and interactive ad format that asks for nothing else but fresh ideas and technical innovations. Key Skills Basic knowledge of HTML & CSS Expert in JavaScript and able to create gameplays with PIXI.js and/or THREE.js Interest in mobile games Misc Competitive salary + Stock options + Performance Bonus + Company Profit Sharing + simply the best company to work for in the world (seriously!!) Any questions welcome in replies or PM, do not hesitate to check the full offer right here and apply! 👉 https://jobs.lever.co/voodoo/98ae288d-b923-419a-8148-78274a33eb53
  23. Hello again! I sent out a note about this several months ago and didn't quite find the right candidate, so I'm here again in an attempt to find an individual (NOT a company or a "dedicated team") who is interested in working remotely on HTML5 game projects. The perfect candidate will have significant Typescript experience, as well as a strong background using pixi.js and Flash. (Porting experience from Flash to HTML5 is also a big plus!) If you're a proven self-starter with the ability to learn quickly and hit the ground running, we definitely want to talk to you! Please feel free to contact me with your resume/CV, sample games, or anything else that would make you a good candidate to consider for this position. Competitive compensation negotiable based on experience! Thank you!
  24. XYsquid

    Q!blocks

    https://zblip.itch.io/qqblocks This is my puzzle game made with pixi.js, let me know what you think!
  25. Could you please explain me the difference between rendering through renderCanvas() and through renderer.render() There is nothing about specific differences on the doc's page , so it seemed they must work in the same way , but in fact they does not for example ... var r = new PIXI.CanvasRenderer( {width:600,height:800,backgroundColor: 0x1099bb,}); document.body.appendChild(r.view); var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines'); richText.x = 30; richText.y = 180; //r.render(richText); // - working as expected, the text stands at 30,180 richText.renderCanvas(r) // -- not really the same, the text stands at 0,0 after this I started wondering , maybe it works in this way because the text has no parent object ... ( because as said in the docs the X and Y are relative coordinates to the parent ) and then I tryed this : var r = new PIXI.CanvasRenderer( {width:600,height:800,backgroundColor: 0x1099bb,}); document.body.appendChild(r.view); var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines'); richText.x = 30; richText.y = 180; var stage = new PIXI.Container(); stage.addChild(richText); //r.render(stage); // - working as expected, the text stands at 30,180 stage.renderCanvas(r) // again, the text stands at 0,0 the result is the same , nothing works as expected