Search the Community

Showing results for tags 'pixi'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 287 results

  1. Hi, guys. NeutrinoParticles plugin for PIXI is tested and released. You can download the Editor and check out video tutorials, samples and live demos at It is the best particle editor for PIXI. Isn't it?
  2. Hi! I'm using pixi 4.5.3 and can't find a way to clear out an rectangle from my transparent render texture. Seems that all blend modes have gl.ONE_MINUS_SRC_ALPHA in them Is there any hack around this? I have a large renderTexture with mostly static bitmap text and I want to update only parts that have changed for better performance. Is there any other way to update only part of an rendertexture while retaining transparency? Thanks!
  3. Hello guys. I am struggling with having my game to run on minimal-ui on iOS safari. That is where the address bar becomes smaller when you scroll. I have found a game that does that, but how the hell they do it? CLICK Does anyone know how to achieve this?
  4. Currently, when a client moves, the inputs are processed on both the client and the server which use the same calculation to process the movement. When the client receives an update from the server, the servers position will override the clients position. I would hope that the client and the server would calculate the same positions, but that is not the case. I believe timing is the culprit. What is the best practice when syncing movement? Current flow: Source:
  5. I'm trying to get my tilemap to scale and I'm basically following the example here: However, what ends up happening is the tilemap itself will scale but the frames won't. I can't record a GIF because for some reason the screen randomly flashes white when running the PIXI app, but here are some screenshots which may be helpful:
  6. Hi guys, I have more info about the game coming soon but would like to start getting help from more people in terms of testing. I'm looking for any flaws here, errors, game play issues, bugs. Some I am aware of from prior testing and still have yet to figure out and resolve although the game should allow you to play through. The game is a simplistic simulator which allows you to build your own arcade, the walls, the machines, the floors, everything. If you've played prison architect or Rimworld you'll probably see the resemblance which I drew inspiration from. The game is planned to work in any browser and any mobile tablet. Sadly a phone version may just be too far away/complex to achieve. At current the game lets you start the tutorial and then continue to play through on the tutorial level. You can pan the camera with W A S D or by touching the edges. [update] Latest Version here: All feedback appreciated, thanks guys. Jammy
  7. Do you want to make good looking and well performing web games for a wide variety of devices? Do you want to help create real-time multiplayer games, played by millions? Hidden Monster Games is in search of a senior JavaScript developer that wants to join our studio to create accessible, competitive online multiplayer games. We want a programmer who will help us add a lot of juice, polish and fun to our games. Join our small team, where you can have a direct influence on almost every facet of our games and studio… and earn a good salary. Work at Hidden Monster Games Hidden Monster Games is working on expanding its very popular game ‘Curve Fever’. Curve Fever has millions of fans, but we want to re-envision the game in HTML5 for web and mobile, as well as creating other competitive, accessible multiplayer HTML5 games. Key aspects of your role will be to: - make games in Pixi.js and React - write clean code with the help of TypeScript - implement stunning graphics, effects and animations - optimize HTML5 games for a variety of devices Team We believe that great teams make great games. This means that we: - set clear goals - have the freedom to decide how the goals of the team are best served - share ideas inside and outside of the team, so we can continually improve ideas and process - practice respectful collaboration - always try to learn and improve ourselves We heavily value a team of professionals with a deep understanding of their specialization and understand what it takes to work together to make great games. Therefore, we put a lot of effort in clear communication and encourage team members to go to events, near and far. Once a year we all attend one major gaming conference. Last year we went to GDC. We provide the team with all the necessary tools, equipment and an awesome and inspiring environment. We frequently have lunch together and it is not unusual for us to grab a beer and play a game after work. Studio We are situated in the vibrant city-center of Amsterdam, right behind the Dam square. This allows for inspiring walks over the cobblestone streets, canals and through the picturesque scenery of the city. Our studio is on the top floor with a great view of the city-skyline from our large windows and balcony. The studio itself is spacious and inspiring, with some cool graphics on the walls. It is an open workspace, but we put a lot of effort to enable focused work. The studio is fully equipped for brainstorming and collaboration. Among our work spaces we have a lounge, meeting room, balcony and a quiet room. This enables our diverse team to work in different locations and get fresh perspectives to find solutions. Our development philosophy - Small agile team consisting of professionals - Scrum with biweekly sprints - Community focused design - Share our progress with the player community - Share our progress with the game development community Requirements - 3+ years professional experience in JavaScript - Good understanding of Pixi.js and React - Knowledge of pixi.js and React libraries and tools - At least a Bachelor degree - Willing to relocate, the job is onsite in Amsterdam - Willing to expand your knowledge - Experience working with scrum - Give constructive feedback on design, process and people - Receive constructive feedback on design, process and people - Wear multiple hats, and help out in other areas when necessary - The job is a full time job We offer - A small team (8 people) that is talented and ambitious - The possibility to shape a team and company - A professional team culture built on trust - Direct impact on the game and input on game design and art - An attractive office in the city center of Amsterdam - Help with relocation Salary Competitive salary, also compared to other sectors, depends on experience. Apply by sending a cover letter, CV and example source code to [email protected] .
  8. I am creating new AnimatedSprites on pointerdown event (and deleting them on next pointerdown event) over the course if application lifetime. At some point around 20 clicks, the app crashes with an error: Rats! webGl crashed. At that point no error is displayed in console. Crash happens on a mobile device, and would probably also happen on desktop, if someone perform plenty of clicks. Code that is repeatedly used is below. I also include live example at Can someone please point out what am I doing wrong? From other answers I deduced that you need to reset the loader and call destroy() on animated sprite. I call both of this methods, but there is still an issue. function createNewAnimatedSprite(resources,newLoader){ var tmpSprite = new PIXI.extras.AnimatedSprite(setupFrames(resources["nextSprite"].texture.baseTexture)); app.stage.addChild(tmpSprite); spritesArray.push(tmpSprite); setupNextSprites(tmpSprite); app.renderer.plugins.prepare.upload(tmpSprite, function(){ console.log("updoaded now"); canRunNext = true; newLoader.reset(); //console.log("kill"); delete tmpSprite; }); } function setupNextSprites(nextSprite){ nextSprite.x = app.renderer.width / 2; nextSprite.y = app.renderer.height / 2; nextSprite.anchor.set(0.5); nextSprite.loop = false; nextSprite.animationSpeed = 0.5; nextSprite.visible = false; nextSprite.onComplete = function (){ console.log("animation finished"); isAnimating = false; }; } function setupNextAnimation(){ var randomNumber = getRandomInt(0,3); switch (randomNumber) { case 0: nextColor = "red"; break; case 1: nextColor = "aqua"; break; case 2: nextColor = "green"; break; case 3: nextColor = "purple"; break; } } app.stage.on("pointerdown", function () { if (firstRun && !isAnimating) { firstRun = false; isAnimating = true; currentSprite.gotoAndPlay(0); currentSprite.gotoAndPlay(0); }else{ if (canRunNext && !isAnimating){ isAnimating=true; if (currentSprite.visible){ currentSprite.visible = false; currentSprite.destroy(true); } spritesArray[spritesArray.length-1].visible = true; spritesArray[spritesArray.length-1].gotoAndPlay(0); app.stage.removeChild(spritesArray[spritesArray.length-2]); spritesArray[spritesArray.length-2].destroy(true); canRunNext = false; setupNextSpritesAnimation(); } } }); function setupSpritesAnimation(){ //created currentSprite just once at the start of app spritesArray.push(currentSprite); }
  9. Hi there, Can anyone here point me in the direction of a Live2D tutorial or library that would work with Phaser? This seems like an interesting concept and I have not seen anyone try this yet to my knowledge. Thanks in advance!
  10. EDIT: TANKS TO :Jammy EDITOR: TANKS TO :bigtimebuddy FROM EDITOR: SOURCE: ___________________________________________________________ hi !, is there a pixi.text generator for the style. Because I find it very long to try different configuration styles without preview. similar as pixi-particles but for the text style ? thank a lot for help
  11. Its down for almost a month or something like that. No updates, no news, nothing :/
  12. I use this code to setup a texture atlas animation: PIXI.loader .add('out2', 'assets/out2.png') .load(function (loader, resources){ onRotationsLoaded(loader, resources) }); function onRotationsLoaded(loader, resources) { first = new PIXI.extras.AnimatedSprite(setupFrames(resources["out2"].texture.baseTexture)); app.renderer.plugins.prepare.upload(first, function(){ console.log("loaded first"); // ready to go }); } function setupFrames(name) { var frames = []; array is an array that stores correct position for each frame of animation for (var i = 0; i < array.length; i++) { var rect = new PIXI.Rectangle(array[i].frame.x, array[i].frame.y, array[i].frame.w, array[i].frame.h); frames.push(new PIXI.Texture(name, rect)); } return frames; } I would like to change the texture of the AnimatedSprite first in a click event or something. The new texture needs to be fetched from the server(I do not want to load it at start, because there are too many of them). I could destroy first and create second AnimatedSprite, but is there a way to just change it's texture atlas image?
  13. Hey guys! I'm starting a new project and I think this is the best place I can find some help. The way the story progresses in this upcoming project is very akin to an interactive graphic novel. I was wondering, would Pixi be the way to go? I see in one of their showcases they do in fact have a graphic novel in there, but I'm absolutely lost about how to start creating something like that. As far as I can understand, Pixi doesn't have global variables, right? So for example if the reader makes a choice in Chapter 1, is it possible to call that variable in Chapter 2? I'm exploring Pixi because it's a project focusing on mobile devices first, desktop browsers second. For app creation, I'm looking at Cordova/Crosswalk. Anyone who could point me in the right direction? Any advice is greatly appreciated!
  14. Hello visitor! I'm looking for skilled javascript developer to build small web game for 2 weeks with me. My main goal to get know more about pixi.js by doing valuable project for estimated time. What you will get at the end of development? You can share game with others, it will be your own portfolio; You can stay with me for next 2 weeks to monetize the game to get revenue from advertising. I will share 50% with you; If you not familiar with pixi.js, you will get experience by doing real project and you will spend only 2 weeks to get results; You will meet good guy (me :)), we can collaborate to do next projects which will give you money. Who am I? My name is Andy Tyurin. I'm working in banking sphere in a role of front-end team leader. I spend my free time by working with my own 2.5D game engine which is written on Dart. I'd like to build games, but I haven't got any real games to show, which can be described as a problem for me, but I did a lot of examples build on top of three.js, lwjgl (java). Except the fact, that I'm Dart enthysiast, I'd like to work with other languages such as javascript, node.js and java. Which tech stack I want to use by doing this game? Pixi.js as rendering engine to build 2D game; KOA framework to build REST, websocket server (node.js); React to make UI components. What about project, any other information? The game is called as "Space football". I will glad to tell you more, please contact first by skype: AndyTyurin Kind regards!
  15. Hey there! Catacomb Chaos is an endless action arcade game where you try to survive against unrelenting waves of skeletons. You can loot gold and purchase potions for your next life. Let me know what you think! Play here: I learned some neat stuff making this. Engine design, ECS, and steering behaviors are some of the cooler things I experimented with for the making of this game.
  16. I'm working on a small card game and I'd like to make an array of sprites to make the code more readable. What I mean is I have hearts,spades,clubs and diamonds and I'd like each to be its own array when I load my images from my assets. Below is similar to what I have: PIXI.Loader .add("hearts10","hearts10.png") .add("hearts9","hearts9.png") ... .load(start) I'd like to be able to access the cards via an array of arrays, sort of like: var current_card = new Sprite(;
  17. So, I have a text in size 200x50, and wan't to scale it down precisely 2 times (100x25) option 1) Scale 0,5. This sucks, as the quality is crewed (more on up-scale, less downscale, but anyways it is..) and I can't afford that in my project. option 2) FontSize/2. This sucks as well in my case, because it wont be precisely 100x25. So are there any alternative options, so I get the precise size and quality as well? Some kind of scale + re-render, duno?
  18. Hi, this is my first post I'm trying to use an image (png) as a container mask, it seems to work well on macOS but on Windows 8.1/10 ( ie11, edge, firefox 53) mask has no effect. Here is the simple code var app = new PIXI.Application(window.innerWidth,window.innerHeight); document.body.appendChild(app.view); var baseContainer = new PIXI.Container(); app.stage.addChild(baseContainer); var theMask = PIXI.Sprite.fromImage('mask.png'); var baseImg = new PIXI.Sprite.fromImage('base.jpg'); baseContainer.addChild(baseImg); baseContainer.addChild(theMask); baseContainer.mask = theMask; I'm using PIXI 4.4.1 Any idea why this is not working? Thank you
  19. Hello, How do I make my canvas look the same on all devices? function PixiPlay(){ var renderer = PIXI.autoDetectRenderer(350,460,{antialias: false, transparent: false}); document.body.appendChild(renderer.view); var root = new PIXI.Container(); I saw a tutorial talking about Pixiv4. But he talks almost nothing about the canvas Can anyone teach me how to do this, in a simple way, please?
  20. Hello everyone, First time using Phaser, and I'm trying to add a tileSprite to the game using a texture generated by Pixi. But I'm getting the following warnings and errors: Warning - Phaser.Cache.getImage: Key "__default" not found in Cache. Warning - phaser.min.js:3 Phaser.Cache.getImage: Key "__missing" not found in Cache. Error - phaser.min.js:3 Uncaught TypeError: Cannot read property 'base' of null at new c.TileSprite I discovered that the error disappears when I add a preload method, load any image, even an image that does not exist. By doing this, the tile appears normally and the erros desappears. Can anyone tell me what's going on? I need to use textures already loaded outside the Phaser. My Code(.coffee) @_game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, @element, preload: @_preload create: @_onPhaserCreate update: @_onPhaserUpdate render: @_onPhaserRender) _preload:()=> @_game.load.image('load-nothing', ''); _onPhaserCreate:()=> @_game.physics.startSystem(Phaser.Physics.ARCADE); @_background = new PIXI.Texture(new PIXI.BaseTexture("image_element")) @_stars = @_game.add.tileSprite(0, 0, window.innerWidth, window.innerHeight, @_background) _onPhaserUpdate:()=> # _onPhaserRender:()=> #
  21. Crash and close Cocoon app, when use PIXI TEXT witn WebGL Render, for Pixi version 4.3 or superior.
  22. I try to use `containsPoint`, but it always return false. It seems `containsPoint` must work with `startFill & endFill`, but when I use `bezierCurveTo` draw line, the fill not working. But the canvas original function `isPointInPath` is working. Why? Here is my demo:
  23. Hi When i load my textures with the loader and add this to the stage it's not showing. But when i create a texture with PIXI.Texture then works perfectly. I load in the game.js file the main-scene.js, in the main-scene.js i add some sprites when i create the texture in the mainscene it works fine but when i use the resources from the loader i get no error but the sprite is not displayed. What i'm doing wrong? Thank you game.js import * as Pixi from 'pixi.js' import MainScene from './scenes/main-scene/main-scene' export default class Game extends Pixi.Application { constructor (vueContext, config) { super() // Contexts this.vue = vueContext this.config = config // Add Game view to site this.vue.$el.appendChild(this.view) // Scenes this.scenes = {} // Main Scene this.scenes.mainScene = new MainScene(this, this.vue, this.config) this.stage.addChild(this.scenes.mainScene) this.load() } load () { this.loader.add('sprite2', '/static/game/images/sprite2.png') this.loader.load(this.setup()) } setup () { // Setup Scenes this.scenes.mainScene.setup(this.loader.resources) } run () { } destroy () { } } main-scene.js import * as Pixi from 'pixi.js' import Scene from './../../engine/scene' export default class MainScene extends Scene { constructor (context, vueContext, config) { super() // Set Contexts = context this.vue = vueContext this.config = config } setup (resources) { // This is wokring let Texture = Pixi.Texture.fromImage('/static/game/images/sprite1.png') let sprite1 = new Pixi.Sprite(Texture) this.addChild(sprite1) // This is not working let sprite2 = new Pixi.Sprite(resources.sprite2.texture) this.addChild(sprite2) } }
  24. I am trying to load texture atlas dynamically. The load happens when the user clicks on canvas. At the same time an animation fires. The next time the user clicks on canvas, previously loaded animation runs. Perhaps it is best to demonstrate the problem. I uploaded the files on a test server. You can see the delay here: I hardcoded the first animation load, meaning that you will see a delay on second canvas click. Run this code on a low end mobile device, and you will se a huge delay. I am getting a 4s delay on a motorola G and 0.5s on an iphone 5. What can I do solve this annoying issue? you can inspect the code on a website, but I will also paste it here: $(function(){ var current; var next; var canRunNext = false; var isAnimating = false; var firstRun = true; var container = document.getElementById("canvas-container"); var app = new PIXI.Application(550,584,{transparent:true}); var canvas = container.appendChild(app.view); setupCanvas(); loadRotationsAndCurrent(); var infiniteLoader = PIXI.loader; function setupCanvas(){ $(canvas).attr("id","canvas"); if (window.screen.width < 600){ $(canvas).css("width","100%"); $(canvas).css("height","100%"); $("#canvas-container").css("width","100%"); }else{ $("#canvas-container").css("width","50%"); } } function loadRotationsAndCurrent(){ PIXI.loader .add(['jimages/1s.png.json']) // load all rotations .load(onRotationsLoaded); } function loadNext(){ if (firstRun){ infiniteLoader.add('jimages/2s.png.json'); infiniteLoader.load(function(loader, resources) { next = new PIXI.extras.AnimatedSprite(setupFrames("2_000")); next.visible=false; next.animationSpeed = 0.5; next.loop= false; next.x = app.renderer.width / 2; next.y = app.renderer.height / 2; next.anchor.set(0.5); next.onComplete = function() { console.log('onComplete'); isAnimating=false; }; app.stage.addChild(next); // app.renderer.bindTexture(next); canRunNext=true; console.log("next loaded"); }); }else{ infiniteLoader.add('jimages/2s.png.json'); infiniteLoader.load(function(loader, resources) { next = new PIXI.extras.AnimatedSprite(setupFrames("2_000")); canRunNext=true; console.log("next loaded"); }); } } function setupFrames(name){ var frames = []; for (var i = 0; i < 30; i++) { var val = i < 10 ? '0' + i : i; // magically works since the spritesheet was loaded with the pixi loader frames.push(PIXI.Texture.fromFrame(name + val + '.png')); } return frames; } function onRotationsLoaded(){ // all rotations loaded current = new PIXI.extras.AnimatedSprite(setupFrames("1_000")); current.x = app.renderer.width / 2; current.y = app.renderer.height / 2; current.anchor.set(0.5); current.loop=false; current.animationSpeed = 0.5; current.visible = true; isAnimating = false; current.onComplete = function() { console.log('onComplete'); isAnimating=false; }; app.stage.addChild(current); } var run = true; $("#canvas").on("click touch touchstart",function(){ if (firstRun && !isAnimating){ loadNext(); isAnimating=true; current.gotoAndPlay(0); console.log("first run"); firstRun=false; }else{ if (canRunNext && !isAnimating){ isAnimating=true; next.visible=true; current.visible=false; next.gotoAndPlay(0); console.log("can run next"); }else{ console.log("cannot run next"); } } }); });
  25. I have this simple jsfiddle that displays the problem that I'm trying to solve. It looks like the render texture get's cropped based on the position of the object passed to the renderTexture.render function. Is there a way around this?