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. Hello! I have a trouble when scaling down big assets. I just have a stage contains some sprite and i'm doing: stage.scale.x = stage.scale.y = 0.2; https://jsfiddle.net/n67xwb5w/ As a result I have an ugly ragged image. I found a solutions for a simple canvas drawing without pixi http://jsfiddle.net/qwDDP/ from here http://stackoverflow.com/questions/18761404/how-to-scale-images-on-a-html5-canvas-with-better-interpolation Can I achive the same smooth effect after rescaling in PIXI?
  2. We are looking for developers who can create our single-page web-based mini-games. We prefer to finalize the hiring in freelancer websites like Upwork to ensure proper delivery and payment. We have several in the pipeline and it has become a bit challenging to find Pixi developers in Upwork so we are trying our chance to find developers here.
  3. I have a game with a lot of containers and sprites. I used GPU-Z for testing. After I replaced all containers and sprites with 2D, GPU load decreased on 20% What is the reason of that? What is the difference between container / sprites and container2d / sprite2d?
  4. mazoku

    Car Racing

    Simple car racing game. Made with Pixi this time. Link
  5. Hello, I am making an arena shooter multiplayer game with destroyable obstacles. You can see a pre-alpha here: http://mechsgame.s3-website.eu-west-2.amazonaws.com I have encountered a problem I'm not sure on how to proceed on and I surprisingly couldn't find any information on similar issues. My game will have tall walls and other obstacles which can potentially cover the player's character. I would like to make an effect similar to RTS games, where an outline or a shadow of the player is visible on top of the obstacle. See the below picture to get an idea of what I mean. My player container contains several sprites. I have a few ideas on how to do this, but I do not think they are optimal. One is rendering the player container to a texture and using that a mask for potential overlapping obstacles, along with a filter. Secondly is just placing a simple GUI marker that shows where the player character is. In both cases, I am unsure on how to detect overlapping sprites. Is there an established solution for such cases? Thanks!
  6. Hey guys, So I was fiddling around with Pixi's drag example on their website. I was wondering how can one drop the object in a container. For example I want to move and object and when it reaches near the container it attaches on top of it. I'm really scared of posting this since people might think I want someone to code it for me but I just want to understand the concept and the things I can use, so to say a guide. Would appreciate the help
  7. Is there a way to bind mouse action on PIXI.Graphics line?. I have used below codes to bind action on the line. But the action is bound on all chart area I think, hitArea is not correctly set. this.strategyGraphic.interactive = true; this.strategyGraphic.hitArea = this.strategyGraphic.getBounds(); this.strategyGraphic.click = function (data) { alert('hit rect'); } Would like to hear any advice on the subject. Thanks in advance!
  8. This is more a question about how people try to do things rather than a problem with PIXI per se. What I've found is, if I force the loading to fail (by turning off WiFi or similar) PIXI behaves as expected, an error event is fired, and then the game will play but with missing assets. The question: How do people gracefully handle the failure? Do you force the loader to start over? Push the error items to an array and reload? (I think this one is good, but there's a possibility that you could get caught up endlessly in the game retrying); Ignore it? (hey it's the internet, things break from time to time!) Create an error screen, which has a link for the player to start over? (this is probably the best option.) Thanks!
  9. 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?
  10. I'm having some issues loading videos... I can get them load ok, but, as I've got a number of separate videos that I need to sequence together seamlessly (or as close as possible to) I'm preloading them, or trying to... ...but, despite the texture appearing to have loaded, there's a delay in starting playback. I've tried a number of things, but would welcome any ideas that anyone has to getting an accurate idea of how much is loaded? I did have an idea that I could load a video as a blob, but I couldn't find an example of loading an item as a blob and then converting it, any leads on that would be welcome.
  11. OlegShaygu

    Pixi.js

    Hi! I'm a newborn at Pixi.JS and ask your help. I'm trying to put 4 characters on the stage in one line. They are moving one by one (in ticker function). Stage width is 928px. The gap between characters is 800px. And I can't understand why first three characters are put at the stage right way, but the last one is above the third one. It seems like the the width is not enough. What should I do?
  12. Hi, I'm trying to implement the pixi-v4 filters in phaser 2 (CE Version). I'm especially interested in this one: https://github.com/pixijs/pixi-filters/tree/master/filters/zoom-blur I've noticed this example (http://phaser.io/examples/v2/filters/pixi-filter) in phaser 2 is outdated/not working (link to pixi filter is wrong). Even when i fix the link (e.g. https://github.com/photonstorm/phaser/blob/v2.6.2/filters/pixi/RGBSplitFilter.js) the filter gives an error because pixi is not included. So I'm wondering what is the right method to do it. I guess the main questions here are: is pixi-v4 filters compatible with phaser-v2 method of importing of pixi filters? if yes, where are the new filters (interested in the zoom-blur one: https://github.com/pixijs/pixi-filters/tree/master/filters/zoom-blur)? if not, any pointers how to port them? Thanks!
  13. I am building a stock chart on PIXI.js. To display different chart styles on chart, I am using PIXI.graphics' drawRect, drawPolygon, lineTo functions. Graphics, Edges, grid lines, text are not sharp in this chart. I would like to say that I've tried several workarounds from the web to make this chart sharp. But those didn't help me. Examples how the chart looks on in candle and area chart styles and renderer parameters are shown in below. const renderer = PIXI.autoDetectRenderer(canvas.width, canvas.height, {view: canvas, antialias: true, transparent: false, resolution: 1}); renderer.view.style.position = 'relative'; renderer.view.style.display = 'block'; renderer.autoResize = true; renderer.backgroundColor = 0xFFFFFF; Area Chart Style Candle Chart Style Would like to hear any advice on the subject. Thanks in advance!
  14. Hey guys! I am kinda new to PIXI so I apologize if there is a super obvious fix to this problem but I am having a super hard time getting display objects I called buttons to show up. Button 1 and the TilingSprite appear just fine but the rest of the buttons do not. I looked at the contents of app.stage in my console and it says the buttons are all in there. Thanks in advance for the help! function playerSelect(){ // var onClick = function(){ new characterSelect()}; var stage = new PIXI.Container(); stage.visible = true // var container = new PIXI.Container(); var button1 = new Button("resources/button-small.png", 323, 162); var player1 = new Button("resources/player-select-buttons/1player-noselect.png", 293, 575); var player2 = new Button("resources/player-select-buttons/2player-noselect.png", 293, 575); var player3 = new Button("resources/player-select-buttons/3player-noselect.png", 293, 575); var player4 = new Button("resources/player-select-buttons/4player-noselect.png", 293, 575); //selected var player1Select = new Button("resources/player-select-buttons/1player-selected.png", 293, 575); var player2Select = new Button("resources/player-select-buttons/2player-selected.png", 293, 575); var player3Select = new Button("resources/player-select-buttons/3player-selected.png", 293, 575); var player4Select = new Button("resources/player-select-buttons/4player-selected.png", 293, 575); button1.position.x = 800; button1.position.y = 900; player1.position.x = 323; player1.position.y = 227; player2.position.x = 653; player2.position.y = 227; player3.position.x = 975; player3.position.y = 227; player4.position.x = 1300; player4.position.y = 227; player1Select.position.x = 323; player1Select.position.y = 227; player2Select.position.x = 653; player2Select.position.y = 227; player3Select.position.x = 975; player3Select.position.y = 227; player4Select.position.x = 1300; player4Select.position.y = 227; button1.on("mousedown", function(){ stage.visible = false; new characterSelect()}); player1.on("mousedown", function(){ stage.addChild(player1Select) }); player2.on("mousedown", function(){ // stage.removeChildren(); stage.addChild(player2Select)}); player3.on("mousedown", function(){ app.stage.addChild(player3Select)}); player4.on("mousedown", function(){ app.stage.addChild(player4Select)}); player1Select.on("mousedown", function(){ console.log("hit")}); app.stage = stage; var renderer = PIXI.autoDetectRenderer( 1920, 1080, {view:document.getElementById("game-canvas")} ); //switch to png PIXI.loader .load(function(){ var b = PIXI.Texture.fromImage("./resources/playerSelection-final.png"); var tilingSprite = new PIXI.extras.TilingSprite(b, 1920, 1080); tilingSprite.alpha=0.5; stage.addChild(tilingSprite); stage.addChild(button1); stage.addChild(player2); stage.addChild(player1); stage.addChild(player3); stage.addChild(player4); renderer.render(stage); }); } function Button(path, width, height) { var texture = PIXI.Texture.fromImage(path); PIXI.extras.TilingSprite.call(this, texture, width, height); this.tilePosition.x = 0; this.tilePosition.y = 0; this.interactive = true; this.buttonMode = true; this.viewportX = 0; } Button.prototype = Object.create(PIXI.extras.TilingSprite.prototype); Button.prototype.setViewportX = function(newViewportX) { var distanceTravelled = newViewportX - this.viewportX; this.viewportX = newViewportX; this.tilePosition.x -= (distanceTravelled * button.DELTA_X); };
  15. Hello, I'm attempted to load a spine animation (v3.5.51) into the current version of pixie-spine (as it states that it's only compatible with Spine 3.5.x I'm not using the Pixi loader, instead I'm just passing in the loaded Spine JSON in the constructor. It's valid JSON with the bones/animation properties in there (so not a string etc) However, what I'm getting is a crash 'Cannot read property 'children' of undefined at new Skeleton': for (var i = 0; i < data.bones.length; i++) { var boneData = data.bones[i]; var bone = void 0; if (boneData.parent == null) bone = new core.Bone(boneData, this, null); else { var parent_1 = this.bones[boneData.parent.index]; bone = new core.Bone(boneData, this, parent_1); parent_1.children.push(bone); <-- ERROR/CRASH HERE } this.bones.push(bone); } The exported JSON is v3.5.51: "skeleton": { "hash": "m3kYx9f3hy1R9hSrlYyJs6o/0fk", "spine": "3.5.51", "width": 202.11, "height": 317.08, "images": "" }, Any ideas?
  16. Hi, I'm working on a game that may need to be playable on IE11 (ugh!) Having got my basic game now working, I've found that the sound is failing, with the error: Object doesn't support property or method 'addEventListener' It seems that pixi sound should work, but, it's not clear to me why this isn't happening for me... Any ideas?
  17. Hi all, My project manages asset loading through it's own loading system (I'm not using the Pixi Loader) and I'm a little confused about using SD and HD assets. I export 2 versions of each sprite sheet (from Texture Packer) - 1 SD size (e.g. sheet.png) and 1 HD size (e.g. sheet@2x.png). My loading system then checks window.devicePixelRatio and loads the correct asset accordingly (SD for dpr=1 and HD for dpi > 1 etc). However, I'm a little confused as to setting the baseTexture resolution to tell the renderer the scale of the texture I know the Pixi loader does this, but how to I set this correctly according the the DPR without using the loader? Thanks in advance!
  18. Hi, I'm certain there will be a way of doing this, but having looked through the docs I'm not seeing the answer... I'm loading some videos like this: const videoPathAndName: string = pathTo+'video/'+level+'/video/'+name; let videotexture = PIXI.VideoBaseTexture.fromUrls([ { src: videoPathAndName+'.webm', mime: 'video/webm' }, { src: videoPathAndName+'.mp4', mime: 'video/mp4' }, { src: videoPathAndName+'.ogv', mime: 'video/ogv' } ]); videotexture.autoPlay = false; this._texture = new PIXI.Texture(videotexture); this._texture.baseTexture.on('loaded',this._checkLoaded); which works fine. But, what I wondered was: as I repeat various sections whether I could check whether the video was already in the cache before trying to load? This would save repeated loads. Or does the loader handle this already? Thanks!
  19. I've been working with Pixi for quite sometime with V3 up until now. Recently decided it was time to move some code over to version 4 but have been experiencing some issues with interaction events. I have a button class that originally used both listeners for touch and mouse events to a.) change the visual state of the button on up/down etc b.) perform an action on click/tap. This had been working perfectly fine in version 3 and I could have multiple buttons in a class/container. Switching to version 4 this caused issues with click/tap area where only the last button to be added to a particular class/container will fire this event. All buttons will fire the up/dwn start/end events still though. On upon researching I tried converting them all pointer events and still experience the issue. I'm currently using V4.7.0. I've been trying to pick my way through the PIXI source trying to figure out why the event doesn't fire but it's not clear to me. All I can see is that it doesn't seem to have 'trackingData' when processing the up portion when it does on the one that does fire the tap/click. I've being using Chrome only at this point for Dev tools and tried but desktop and mobile/tablet emulator, both having the same result. I know interaction was reworked for v4 but can anyone give me any pointers as to why those changes have affected my code thus. I don't understand well enough the changes to be able to find the right place to look for a solution. I can't provide the exact code at the moment as it's not a personal project and corporate rules prevent me from doing so. But can give an overview. The class is structured with a parent container (essentially a stage) to add class container to and a class container to display the current button state (current button state can be a graphic, sprite, animation). The current button state container has all the interaction events attached to it. These call binded functions within the class which either change the current state sprite or call a function on click/tap that has been passed in the settings on instantiation (event data is sent to this function). As stated if the event is fired, which it is on the last button added, the function is fired but event doesn't trigger for click/tap on the others. All other events fire normally on each button. I've possibly just overlooked something simple as you get to that 'wood for the trees' state. Any thoughts, suggestions would be grateful.
  20. HI, Apologies for the rather basic question, but, the almost all of the articles & threads I've found are about loading JSON files in relation to a tileset or atlas. I just need to load some data, it doesn't have to be JSON, it could be csv, but examples are a bit thin on the ground. Is this possible? I have found one example, but it has a separate loader just for the JSON, it doesn't appear to add it into the loader resources - does it have to be done this way? Thanks! <edit> So, immediately after this I got it working by accessing the resources in loader complete method. But, I still wonder if it's possible to access the JSON from the cache as you do with sprites?
  21. Hi, I wold like to implements one effect that I found in codepen: this is the link of the effects: codepen My question is : Is there one way to implements it in pixi.js. I'm new with this framwork, i tried to search somethink on google but I don't found nothink. Thanks in advanced
  22. I've got an odd issue with the deployment of a PIXI project. I'm creating an ES6 JS file - when I view it through localhost, or push it up to my site, it works fine. But, when I deploy through the end client system, the game fails. This is obviously something to do with their bundling, but I just cannot work around it. I get the error 'PIXI is not defined at...' which it appears it should be, as the PIXI.min.js has been added into the bundled JS file above the game code. I think this is caused by PIXI being a global variable, but I've not been able to get it to work. Anyone got any ideas?
  23. Hi, i have a problem with a custom filter. I notice that the result of this simple custom filter change when the sprite are moved from js. Seems to be that vTextureCoord are affected by the position.x value: when i change its value, the filter render a different image. precision mediump float; uniform float frequency; uniform float amplitude; varying vec2 vTextureCoord; uniform sampler2D uSampler; float upDown(float v) { return sin(v) * .5 + .5; } void main (void) { vec2 uv = vTextureCoord; float t1 = frequency * 0.2; float t2 = frequency * 0.35; float v = uv.y; float h = uv.x; float off1 = sin((h + 0.4) * mix(1., 6., upDown(t1))) * amplitude * 0.5; float off2 = sin((h + 0.8) * mix(3., 8., upDown(t2))) * amplitude * 1.5; float off3 = sin((h) * mix(1., 2., upDown(t1))) * amplitude * 0.5; uv = vec2( h + off1 + off2 + off3, v ); gl_FragColor = texture2D(uSampler, uv); } How can I get the same image, even moving or scaling the sprite? Thanks in advance
  24. stealman

    Space Ace

    Hello guys ! I would like to introduce my latest game Space Ace - actually the first one that I have done completely as it supposed to be. It is made in HTML5 using plain PIXI and Apache Tomcat server to provide HTML content and websocket listener. Originally it was meant to be PVP game but once I have realized that there will never really be more than one or two players online simultaneously (it is very common among most of indie games), I decided to make it more soloplay focused with multiplayer just as a nice to have. Game controlls and features are described on login page so I will not duplicate it here Feel free to play and enjoy and I am looking forward for some comments, here is URL - http://darkenlight.net/spaceace
  25. Hi All I'm quite new to Pixi (as in this is day #2), I have a simple circle divided into segments (Wheel of Fortune style). What I want to do is spin it, wait for a few seconds, slow down and stop on a specific segment, with a bit of bounce-back. By the looks of things rotation itself is fairly straightforward, but how would I go about doing this? Many Thanks