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

  1. I create a container and I add some sprites on this container, then it is very bad. This is my main code: Ground.prototype.createCGround = function (count, x, y) { var front = PIXI.Sprite.fromFrame('Tile_10.png'), blank = PIXI.Sprite.fromFrame('Tile_13.png'); var container = new PIXI.Container(); container.addChild(front); container.addChild(blank); front.position.set(0, 0); var count = count || 1; for (var i = 0; i < count; i++) { var span = PIXI.Sprite.fromFrame('Tile_11.png'); container.addChild(span); span.position.set(front.width + i * span.width, 0); } blank.position.set(front.width + i * span.width, 0); container.position.set(x, y); container.isUes = false; return container; } It have some black lines in the border !!!!!!! And the black lines are random , not all !!!! Who can help me ! I'm very need help!!! Thank you!
  2. Hey guys, Recently I've noticed some strange behaviour while using blendModes on Phaser.Graphics. I am creating a flashlight by drawing dark rectangle and lighter calculated shape of light from flashlight, I draw that on Phaser.Graphics object. Then I apply this object as a texture to sprite to see the difference between rendered outcomes. this.shadowTexture = 0, 0 ); this.shadowTexture.blendMode = Phaser.blendModes.MULTIPLY; this.sprite = 200, 0, this.shadowTexture.generateTexture() ); this.sprite.blendMode = Phaser.blendModes.MULTIPLY; update(){ // draw on shadowTexture ... this.sprite.texture = this.shadowTexture.generateTexture(); // just for test purposes } this code results in such situation: As you can see, blendMode used in Phaser.Graphics resulted with darker flashlight and the one used in Phaser.Sprite in lighter. Am I getting this all totally wrong ? Or is this some kind of a bug ? What I would like to achieve is the effect that I get using Sprite just by using Phaser.Graphics. Please, help guys, I am a bit confused here Thanks
  3. Hello guys, I'm stuck with shaders. May be you can help me. The objective to make waterfall with shader. As for now I have this frag shader: precision mediump float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform vec4 filterArea; uniform vec2 dimensions; uniform float speed; uniform float time; #pragma glslify: noise = require("glsl-noise/simplex/3d") vec2 cartToIso(vec2 pos) { vec2 res = pos; res.x = pos.x - pos.y; res.y = (pos.x + pos.y) / 2.0; return res; } void main() { vec2 pixelCoord = vTextureCoord * filterArea.xy; vec2 coord = pixelCoord / dimensions; vec2 iso = cartToIso(pixelCoord); float x = pixelCoord.x * 0.1; float y = dimensions.y / pixelCoord.y + (speed * time * 10.0); float z = time; vec3 vector = vec3(x, y, z); vec3 noise = vec3(noise(vector)); gl_FragColor = vec4(noise, 1.0); } It gives me nice waterfall result (video in attach). But the target is to make it isometric (in reality dimetric). Look at pic in the attach. Is there a way to make this? I'll be appreciate for any help. waterfall.mp4
  4. Hi everyoneIs there a tool to generate a live preview of the Matrix PIXI.I'm talking about being able to preview live the transformation of a sprite, and get the code.I find it very long and hard to do a lot of rending testing each faith to search the good behavior.It would be really great if someone could make a small live generation tool. (HTML) i made a sample on PS To help understand my need. I hope this overview helps to understand. Ideally, it be something similar to this awesome tools by Karl Matt (bigtimebuddy) I would be very happy if a similar tool would exist. thank
  5. Is there a way to call specific function or event when render finishing with rendering specific sprite or event when shader is executed ?
  6. Hi , I have problem to pass matrix to uniform variable in shader ! Can anyone tell me what is worng. I try by using "getUniformLocation" but when using this webgl function i get error that i not using current web gl programm. Thanks !!!
  7. shader

    Hi, I need help with shaders in pixi . I trying to translate and rotate sprite with shaders. I am using PIXI.Filter but I can find any example with vertex shaders(only fragmet examples ). If someone can provide some example . Thanks
  8. 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
  9. Hello everyone, Recently i finished my first medium-sized HTML5 game - Medieval Defense Z. I came from flash background and developing for HTML5 presented with some new challenges. So i would like to share what worked and what didn't. This is more like review/tutorial type of thing, so hopefully someone will find something useful. • Goals: • 60fps. • Smooth gameplay and animations. • Quality comparable to flash games. • Tools: • Language: Haxe. Strictly typed programming language, similar to ActionScript 3.0. Compiles to all major languages, including javascript. • Editing: HaxeDevelop IDE. Freeware, great code completion and very fast compared to everything i tried. • Debugging: Chrome. Has console, debugger and profiler. • Rendering library: Pixi.js. Uses display list concept like flash. Works well. • Sound library: Howler. Good enough, the id system is a bit weird though. • Bitmap font exporter: Free and web-based. • Sprite Sheet Packer: Freeware and very simple. • Graphics: • Scaling will look ugly if you use many small png files for textures. • If you want nice scaling, fast load times and fast rendering - pack everything to 2048x2048 spritesheets (include bitmap fonts too). • Resolution of assets: 1024x768, background can extend to 1382x768, so it covers most aspect ratios in horizontal orientation. • To get proper native resolution in mobile browsers i scaled up renderer and scaled down canvas by window.devicePixelRatio. • Sounds: • Library: Howler. • Sound formats: ogg for Chrome and Firefox, m4a for Safari and Internet Explorer (note: mp3 has licensing issues with play count). • ffmpeg: because of licensing issues and whatnot can't convert to m4a, unless you recompile ffmpeg with m4a, which is a pain to setup. • I used MediaHuman Audio Converter (freeware) to convert from wav to ogg and m4a (64 bit). • iOS Safari: keep in mind that before any sound could be played, user must first tap on the screen. • Mouse Events: • Used pixi.js API to open links. • iOS Safari: under "touchstart" event won't open links in new tabs, use "tap" event instead. • sprite.on("mousedown", callback) for desktop. • sprite.on("tap", callback) for mobile. • Performance: • Reuse frequently used sprites. • Avoid creating too many objects every frame. • I would recommend looking up data-oriented programming to get more juice out of Javascript. • Record timeline with Chrome profiler to find performance bottlenecks. • Masks are slow. Use trim if you only need a simple cut. • Very large functions may cause lag spikes. My best guess is that browser is trying to optimize the function. Splitting big function into several smaller ones solved my problem. • Game Debugging: • Simple CSS + DOM side menu. • Basic field view/edit. • Simple buttons with callbacks. • How to debug html5 game on android (mobile) with desktop chrome (PC): 1. Upload game to your website. 2. Go to (desktop) chrome: chrome://inspect 3. Connect Android device with USB and run your game on android chrome (your android device must be enabled for development). 4. Open Command Prompt and enter: adb devices (must have Android Debug Bridge installed). 5. To quit debugging enter: adb kill-server • Conclusions: • Programming in Haxe instead of pure Javascript probably saved hours and hours of debugging. • Would have liked more automated solution for spritesheet and sound stuff. • Poor performance bites sooner or later, so be prepared to do extensive profiling. • Stable 60fps is very hard to achieve, even if you keep your code below 1-2ms per frame. • Overall i am happy with the results, however it took longer than expected to make this game. Any feedback is appreciated. Game Link: Trailer:
  10. Hi, I'm using Pixi since several days on a game prototype which consists in a map made of tiles. The problem is that I got a big map (2000px / 2000px), so it don't fit a desktop screen, and not any mobile screen. I am looking for a way to allow the user to pan (i.e. navigating on the canvas with mouse drag and drops (for desktop) and with the finger (for mobile devices) zoom in / out the canvas Like in google maps for example Any idea of an embedded feature I can use? Thanks in advance for you answers.
  11. Hi, On some Android devices canvas renderer works better and stable than Web GL Some games may crash in Web GL mode when in canvas mode all games stable. I want to ask is there any way how can we detect it ? Maybe some benchmarks exist ?
  12. Here is my code: The problem is, when a "bullet" collides with a "character" from an area above the character's "head", it is being counted as a collision. I've tried all of the advice I could find on the forum such as setting the height/width of the sprite body and whatnot, still no success
  13. Hello, everyone. I've been playing around a lot with Pixi.js trying to find the best ways for memory optimization. Using Pixi's loader, I load my images. Some images are very large and for the first time creating and adding them to the stage, my game freezes for a moment. After reading around, I realized that freeze is Pixi uploading the texture to the GPU. Now, my question is, would it be ideal to add in a method to pixi's loader that after the texture loads, it uploads it to the GPU? That would stop the brief freeze. I have already used Pixi's built in method to upload to the GPU and the freeze is gone. What would be the pros and cons of doing this for every texture loaded? Thank you!
  14. Hello there, I'm trying without success to find all stages and renderers that PIXI has in memory, so I can call destroy on them and their children. I'm sure there is a way to have that so I don't have to keep track on my application. It is a React website and therefore the component that had that reference is unmounted and then mounted again later on. When I instantiate a new stage and renderer, I can see them piling up and using a lot of memory as I go from one part of my website to another. How could I find all instances so I destroy them before creating new ones? I have the global PIXI object on window... Thanks a lot!
  15. 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:
  16. 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?
  17. 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!
  18. 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?
  19. 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:
  20. 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] .
  21. 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); }
  22. 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!
  23. 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
  24. Its down for almost a month or something like that. No updates, no news, nothing :/
  25. 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?