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

  1. When i am drawing any sprite usign pixi its looking blurry on both mobile (android mobile ) and pc (chrome browser) Then i tried setting (roundPixels: true). Then it becomes sharp on pc but still blurry on mobile devices. I have looked at forums but could n't get any help. I tried looking on stackOverFlow but i got nothing which could actually resolve my problem. I have used below code. var gs = {width:950,height:640}; var app = new PIXI.Application(gs.width, gs.height, { resolution: 1, antialias: false, forceFXAA: false, forceCanvas: false, autoResize: true, transparent: false, backgroundColor: 0x000000, clearBeforeRender: true, preserveDrawingBuffer: false, roundPixels: false }); var down = PIXI.Sprite.fromImage("images/icon.png"); down.anchor.set(0, 0); down.position.set(100, 150); app.stage.addChild(down); Please help.
  2. Remove SpriteSheet TextureCache

    I have loaded SpriteSheet using json. Like this below. const loader = new PIXI.loaders.Loader(); loader.add('bunny', 'data/bunny.png') .add('spaceship', 'assets/spritesheet.json'); loader.load((loader, resources) => { }); I want to remove all the TextureCache which was loaded using this spritesheet.json only. I have tried. PIXI.Texture.removeFromCache("spaceship"); PIXI.Texture.removeTextureFromCache("spaceship"); But in PIXI.TextureCache names of all the spriteFrame were included there. And still i am able to use image form frame. Using this. var bgSprite2 = PIXI.Sprite.fromFrame("ship1"); bgSprite2.anchor.set(0.5, 0.5); var pos = {x: 300, y: 200}; bgSprite2.position.set(pos.x, pos.y); stage.addChild(bgSprite2); I want to remove all the entries of spriteFrame in TextureCache and i want to load new set of spriteFrame. I am doing this because i have spritesheet animations of two diffrent spaceship but the individual symbol name of both spaceship are same. Please help.
  3. Sky Fight now live

    Announcing, made with pixi, html5, php with the servers in c++, it has taken me 12 months which is about 5,000 hours on the code/art, it has been localised into 6 languages, with more work and languages to follow. I hope you like it The game has 7789 lines of JavaScript, 9430 lines of c++, and 984 lines of PHP/HTML with pixi as the graphics engine. I have UK/European and USA servers. so don't just sit there, get one up!!!
  4. Stoping followcurve

    Hi everyone, I'm new to pixi.js, I have made sprite and moving it by followcurve function, I want to detect mouse collision with sprite and change followcurve path, but I can't stop sprite and starting new path until the sprite reach to the end of current path. xDestinition = yDestinition = 0; function play() { if (pointer.hitTestSprite(cat)) { console.log('*****************************************'); gotoNewPath(cat); } z = Math.floor(giveMeDistance(cat.x, cat.y, xDestinition, yDestinition)); if (z == 0) { gotoNewPath(cat); } } function gotoNewPath(movingObj, xD, yD, time) { xDestinition = (xD != null) ? xD : giveMeRand(fWidth); yDestinition = (yD != null) ? yD : giveMeRand(fHeight); let curve = [ [movingObj.x, movingObj.y], [giveMeRand(fWidth), giveMeRand(fHeight)], [giveMeRand(fWidth), giveMeRand(fHeight)], [xDestinition, yDestinition] ]; c.followCurve( movingObj, curve, 120, "smoothstep", false ); } Any advice? thanks.
  5. Hi All, I'm familiar with these technologies: JavaScript, AS3, Haxe, and have a lot of experience in multi-platform development. Several recent projects have been created using the Phaser framework, but I'm always open to new knowledge. Send me message or use email Regards, Nikolai
  6. Pixi.JS / Pan & Zoom Canvas

    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.
  7. Displacement filter scale issue.

    Hi, I've long wanted to implement a neat looking invisibility effect for my game, tried using DisplacementFilter, but stumbled upon an issue with scale property. While it works correctly to displace areas under the displacement sprite I created, it also displaces entire container on which the filter is applied. I presume its from non existent knowledge about the subject and how those filters work, but I'm still hoping for either a fix or a reasonable explanation if anyone can help me with this please. Everything in my code follows DisplacementMap example on (one with the grass and magnifying glass). What is different is my stage tree. I have 3 containers for each layer and inside those there are separate containers for chunks that hold the map data, since it comes from the server. const playerSprite = new PIXI.Sprite(new PIXI.Texture(PIXI.utils.TextureCache['player.eyes'])); const displacementSprite = new PIXI.Sprite( new PIXI.Texture(PIXI.utils.TextureCache['player.normal']) ); let displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite); playerSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs); playerSprite.scale.set(globalScale, globalScale) this.scene.addChild(playerSprite); this.scene.addChild(displacementSprite); displacementFilter.scale.x = 20; displacementFilter.scale.y = 20; displacementFilter.enabled = true; displacementSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs); displacementSprite.scale.set(globalScale, globalScale) return { scene: this.scene, filter: displacementFilter }; the return value from this block is added to the main stage container, and filters are applied to bottom 2 layers. Should i perhaps look into filterArea? Here is the undesired effect on the edges. You can also see the slanted top layer on the trees. so 2 layers are moved by the filters scale property.
  8. text height isue

    Hi, I have problem with getting height of text. Here is a example: = width; var height = text.height; Height is not correct value! After some time when i print in console "text.height" I get correct value! Is there a way to force text transform ?
  9. Disabling blending

    Hey everyone, I was looking at the documentation on BLEND_MODES and noticed there was actually no way to disable blending, equivalent of calling glDisable(GL_BLEND) on Desktop and ES OpenGL. On native mobile it increases performance when rendering fullscreen background images that do not need to blend (ie. they have no transparency in the image). Is there another way of achieving this I'm not aware of ? Thank you.
  10. Preparing the Sprite-sheet

    I am trying to learn how to make a sprite from a spritesheet and I'm following Kitty's tutorial as a reference on how to work with spritesheets. I am using Texture Packer to create my spritesheet. I was successful in exporting all my images the only thing that has me confused is why do I have a .json file for each of my images? I suspect this is because I had to enable multipacking because all my images wouldnt fit on one sheet. In a lot of the examples I've seen online most devs just import one tile-sheet and one .json file. I was expecting Texture Packer to do the same, now I am unclear how I would import all of this...just for one sprite. Is there a better method of doing this? Quick info about the images I am using, I made a 3d render in Blender and exported the final render into .png frames, the size on each frame is roughly 2000x1000. Perhaps there's another way I could export my render and have it ready for PIXI?
  11. I am using masks for eyes in my game. I have a black background for the eye and a white pupil. The white pupil uses the black background as a mask so that when the character blinks the pupil is hidden. The issue is that my white pupil is rendered grey (if i disable the mask the pupil is rendered white which is correct). I have looked at the alpha and it is set to 1 so it does not seem to be a transparency issue. Just wondering if anyone else has had into this issue?
  12. I have issue with loading images from atlas! Game I developing works great , but on older devices after loading , images are not shown! This happens on Samsung Galaxy Tab 2 in every browser (chrome , opera ,firefox). So if somebody have solution , please help
  13. I am looking to hire a HTML5 game developer to build Snooker and Billiards games. This is a paid assignment, we can work on a fixed fee or on hourly basis. Please mail your interest and portfolio to
  14. 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!
  15. 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
  16. Help with shader waterfall

    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
  17. 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
  18. Is there a way to call specific function or event when render finishing with rendering specific sprite or event when shader is executed ?
  19. Shader translation

    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
  20. 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
  21. 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:
  22. When Canvas better WebGL

    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 ?
  23. Hitbox is too high for collision

    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
  24. 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!