Search the Community

Showing results for tags 'pixi'.



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

  1. I want to make the camera follow my sprite around. (so my sprite is always in the center of the screen) What's the best way to go about this? Does Pixi have built-in camera functions? I thought about just moving everything else relative to my sprite, but I thought this wouldn't be the best way. I googled around a bit, but with no luck. Any tips or resources would be much appreciated. Thanks.
  2. I have a layer (displayobject) with multiple sprites inside. I want to add a circular explosion that would remove the parts of the object they overlap. So, after adding the explosion circle the current display object should. Attached is a picture of what I want to achieve. I know that I could use a black & white mask, where everything is white and the explosion is black so it's masked, but this means creating a new bitmap as large as the entire canvas just to draw a tiny cutout and this would have to be done for each explosion. Also, new sprites might be added after the explosion occurred, so the new items shouldn't be masked by old explosions. The issue is that the background is a texture, not a solid color. If it was only a color I could have simply added a new circle with the background color over the shapes and it will look like a cutout. I think a WebGL solution such as using shaders might be used. Question 1: Can we add a mask in PIXI that says: "hey, keep everything from the original image EXCEPT for the pixels of this mask" ? Question 2: Do you have a better idea of how to create an explosion that removes parts of sprites that already exist and allow for new sprites to be placed over the explosion? What's the most efficient way to implement this? PS: The sprites are actually meshes, I tried converting them to bitmap using .cacheAsBitmap on the mesh, but it seems to be buggy (the quality drastically drops and the entire mesh is actually displaced by several pixels when it is cached as a bitmap).
  3. Hi all I was wondering if Pixi has a method for creating the appropriate sized text when within a scaled container. In my case, I scale the main container so that its height is 1080. In this container, I would create a Pixi.Text object with height 20px. From what I understand, this creates a 20px text object, which is then scaled down when placed in the container. This results in text which is slightly blurry. I'm planning on creating a method which would calculate the true pixel height required, which would then be scaled to the size needed. Is this something which Pixi itself supports, or would I need to build this myself?
  4. Hello everyone ! I'm pretty new in PixiJS and i can't figure out how to do this : Have a texture passed to a shader through uniforms and resize its sprite without "jumps" : https://jsfiddle.net/spiraloops/zohpru02/ (try to resize it...) What i want to have : https://jsfiddle.net/spiraloops/k5wfmqu1/1/ My final intention is to perform video masking with resize. So I need the two textures (video and mask) to resize the same way...
  5. Not sure if here's the best place for this but since it is not a bug etc I avoided opening an issue on github I stumbled upon some odd rotation code in phaser while reading https://phaser.io/tutorials/advanced-rendering-tutorial/part7 From src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js and src/pixi/display/Sprite.js // Rotate matrix by 90 degrees // We use precalculated values for sine and cosine of rad(90) a = a0 * 6.123233995736766e-17 + -c0; b = b0 * 6.123233995736766e-17 + -d0; c = a0 + c0 * 6.123233995736766e-17; d = b0 + d0 * 6.123233995736766e-17; Ok. Some rotationcode with fancy precalculated values. But: the value given in e-notation is 0.00000000000000006123233995736766 and therefore effectively zero. Which makes sense since this was meant to be the precalculation of cos(rad(90)) - which equals exactly to zero. I suppose the literal resulted from a rounding error when someone typed Math.cos(Math.radians(90)) into a console So a better version would be: // Rotate matrix by 90 degrees a = -c0; b = -d0; c = a0; d = b0; Maybe someone sees this and is willing to fix it on the side...
  6. Hello everyone! I've been release my own atlas packer for pixijs. It's fast and easy to use command line tool. You can try it and send me your beedback. Main features: - scaling for multiple dimenstions - alpha trimming - multisheet textures if not all sprites could be allocated into a single texture - png, jpg - texture format - texture size limit - sprites border to avoid render artefacts Platforms: MacOS, Windows Download from: https://github.com/Gaikov/GameTools/tree/master/SpritePackerConsole
  7. Hi, I'm just getting started with Pixi. I made a little sprite that walks around and shoots things. Whenever I bump my sprite into the bad guys, I want him to disappear. So I ran stage.removeChild(mySprite) and he disappeared! But... He still shoots when I click and he still moves around with WASD. So it just makes the sprite invisible? Here's a link: http://www.med.wadholm.com/Kaitlyn/sprites/pixi/bunny/
  8. Hi All! Do you have experience in HTML Game Developement? And the following skill set? JavaScript, JQuery HTML/HTML5 CSS/CSS3 Pixi JS / Spine JS Google Closure Active knowledge of English Send me a PM if you would like to know more details about this. Relocation is required and VISA is supported. Please don't contact me if you are selling services from company's. Only looking for people who are willing to move to Prague and have a full time contract with us.
  9. 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.
  10. 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.
  11. Announcing skyfight.io, 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!!! http://skyfight.io/
  12. 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.
  13. 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 bestpositiveexperience@gmail.com Regards, Nikolai
  14. 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 pixijs.com (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.
  15. voste

    text height isue

    Hi, I have problem with getting height of text. Here is a example: text.style.wordWrapWidth = 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 ?
  16. 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.
  17. 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. https://github.com/kittykatattack/learningPixi#sprites 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?
  18. 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?
  19. 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
  20. 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 ram@digient.in
  21. 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!
  22. 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 = this.player.game.add.graphics( 0, 0 ); this.shadowTexture.blendMode = Phaser.blendModes.MULTIPLY; this.sprite = this.player.game.add.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
  23. 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
  24. 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) https://pixijs.github.io/pixi-text-style/# I would be very happy if a similar tool would exist. thank
  25. Is there a way to call specific function or event when render finishing with rendering specific sprite or event when shader is executed ?