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

  1. 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/
  2. Easy

    To The Capital II

    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
  3. 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)
  4. Mat Groves

    Pixi.js Showcase

    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/
  5. kristof

    How to update hitArea of a sprite

    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?
  6. 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
  7. Shadowstep33

    Pixi.js and Angular2

    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.
  8. 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.
  9. XYsquid

    Mister Line devblog

    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
  10. 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.
  11. 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
  12. 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
  13. 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
  14. 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:)
  15. 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!
  16. XYsquid

    Q!blocks

    https://zblip.itch.io/qqblocks This is my puzzle game made with pixi.js, let me know what you think!
  17. Gagiopapinni

    renderCanvas() vs renderer.render()

    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
  18. ijonatron

    Entity interpolation with Pixi.js

    Hey everyone! Just joined this forum hoping someone could help me out here... I'm working on a test project to try out some of these concepts. I'm currently working on entity interpolation and I think I'm pretty close to it working, but the moving objects still seem jittery. On the back end I'm sending snapshots of player positions every 50ms... // send snapshots setInterval(() => { const snapshot = { timestamp: Date.now(), players }; ws.clients.forEach(client => { client.send(pack('snapshot', snapshot)); }); }, 50); These snapshots are being received on the client like so... const sync = snapshot => { // keep the last 2 snapshots if (snapshots.length === 2) snapshots.shift(); snapshots.push(snapshot); snapshot.players.forEach(player => { let manager = playerManagers.find(mngr => mngr.id === player.id); ... manager.updateRemote(player); }); t = 0; }; The manager here is a class instance associated with each player that controls the sprite's position, rotation, etc. Here is that updateRemote method... updateRemote = player => { this.local = this.remote ? this.remote : player; this.remote = player; } What this does is set the manager's local and remote properties. These are the states that the sprite should interpolate between. Then here is the Pixi.js ticker... let t = 0; ticker.add(() => { t += ticker.deltaTime; let lag = 50; if (snapshots.length >= 2) lag = snapshots[1].timestamp - snapshots[0].timestamp; playerManagers.forEach(manager => manager.interpolate(t / lag)); }); Here I am increasing t by the ticker's deltaTime and dividing that by the time between the two snapshots (or the intended time if there aren't two snapshots available). Remember above that t is reset each time a snapshot is received. This means when a snapshot was just received, t will be 0 and start counting up. When another snapshot is received, t will be at 50 (or whatever the real lag is) then be set back to 0 and repeat. In other words, t / lag will be between 0 and 1 for the lerp function... Here is that interpolate method... interpolate = delta => { this.sprite.position.set( lerp(this.local.pos.x, this.remote.pos.x, delta), lerp(this.local.pos.y, this.remote.pos.y, delta), ); this.sprite.rotation = lerp(this.local.direction, this.remote.direction, delta); } And the lerp function is the second formula here. AFAIK this should give me smooth movement between the past snapshot (local) and the new one (remote), but movement still seems choppy and jittery. I'm fairly new to interpolation, prediction, and other game networking concepts so hopefully someone can help me out here. Please let me know if any more information is needed.
  19. I am working on a project where I am trying to create an animation of a watercolor effect to 'paint' in an image. The image is dynamic, so rather than using a simple video, I have created a video to use as an alpha mask to apply to the image via Pixi. The area around the visible image needs to be transparent, so I needed to use an alpha mask rather than just covering the image with white pixels. I have attached a full example file with all of the code that I have set up for this, but here's a quick summary of what I've done: Create a texture from video Create a sprite from image Add the image sprite to a container Set 'mask' property of container to be the video texture This worked beautifully, but the one concern that I have is of performance, as there will be other things going on on the page at the same time. A performance audit of the page while the animation is running shows that the main thread is being used for scripting for almost 100% of the time of the entire duration of the animation, which is slightly degrading the performance of things such as scrolling on the page while that is happening. I'm certainly willing to accept that this is simply a very performance intensive animation and that it doesn't get much better than what I've got, however this is my first time using Pixi, so I wanted to seek out some advice about whether I have done this the best way that I can, or if there is anything that I can do to help make this a bit more efficient. Thanks in advance for any help that anyone can offer! If I need to provide any more information or anything like that, just let me know, and I will do my best watercolor-test.html
  20. batman

    Coordinates

    Guys, hi, spent couple hours to figure out how to combine local and global coordinates. The issue: I have a stage, there is a gameboadr on this stage, the gameboard holds many elements with coordinates related to this gameboard. Then I add element on game stage. It is animated effect. So when I click on element on the gameboard. It passes itself as parametr to that animation and trigger it. But, animation is displayed in a wrong place (it just need to be on the stage, not on gameboard). What I try to do is simply display that effect on top of the element. The gameboard scale is 0.5, the element is scaled to 0.9, the effect scale is 1, the anchor for all objects is 0.5. The relation as follows: app.view (pixi app/canvas)->> Game.stage (where effect is placed) ->>Gameboard->> Elements I did as follows: Animations.rocketRun = function (elementOnBoard) { let frames = []; for (let i = 0; i < 25; ++i) { frames.push(PIXI.Texture.fromImage(picture_' + i + '.png')); } let anim = new PIXI.extras.AnimatedSprite(frames); //anim is my effect should be put on top of elementOnBoard,so actually cover it, only of X axis //anim.x = -319 + CELL_SIZE + SPACE; manual calculation, bad approach //anim.x = Game.stage.toGlobal(elementOnBoard.position).x;// wrong //anim.x = Game.stage.board.toGlobal(elementOnBoard.position).x;//wrong //anim.x = elementOnBoard.parent.toGlobal(elementOnBoard.position).x); //like on tutorial, but got Cannot read property 'toGlobal' of null, on tutorial is says: "And it will work even if you don't know what the cat's parent container currently is." anim.x = elementOnBoard.getGlobalPosition().x; // finally supposed to be the best one, but... Game.stage.addChild(anim); anim.anchor.set(0.5); anim.animationSpeed = 0.1; anim.loop = false; anim.play(); }; P.S. I found a solution during making this post. The problem was, I think scale. I simply adjusted the coordinates calculation of my effect as below (multiply on scale, and deducted one of my constant - manual adjusment points). Indeed there is some inaccuracy, not sure why, but I adjusted by adding custom number. Could you explain why? Thanks, anim.x = elementOnBoard.getGlobalPosition().x * 0.5 - SPACE-19;
  21. 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. 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. I'm currently finishing the implementation of the account system and I'm working on several new maps. More updates will follow soon!
  22. Harryk89

    Loader Json

    HI! which boot loader JSON should I use to boot now? And tell me the difference between JsonLoader, SpineLoader and PIXI.Loader
  23. Harryk89

    Can't load json in spine

    When I load json in loader gives an error message PIXI.loader .add('spineCharacter', 'character_assets/red.json') .load(function (loader, resources) { var animation = new PIXI.spine.Spine(resources.spineCharacter.spineData); self.container.addChild(animation); }); but if I use another method PIXI.loader .add('character_assets/red.json') .load(init); function init() { this.spin = new PIXI.spine.Spine(PIXI.loader.resources['character_assets/red.json'].spineData); this.container.addChild(this.spin); } There is no error, but the screen is just black and nothing is displayed
  24. Harryk89

    Connect Spine

    Hi, everebody! Tell me how to connect to pixi.js spine
  25. Hey guys, I'm experiencing some bad Ghosting. I can't take a screenshot because it's fine when ever I do it. But basically, when a sprite starts to move quickly (not uber fast), the trailing edge gets blurred. Any reasons why or how I could fix this? Thanks, Nick