Jump to content

Search the Community

Showing results for tags 'pixi.js'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • 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

  1. Hello, I am working on a game with pixi js. to make the game look normalized on every screen, im scaled the stage as follows this.scale=Math.max(this.viewWidth, this.viewWidth) / (2048 * this.ratio); and on orientation change I am rotating the whole stage. now my problem is, if i have any buttons on stage, who are at top or at right side of stage, they do not respond to any touch event. Please help i'm in a very big trouble. I tried to use mappositiontopoint as well. but didn't understand how to correctly use here. Please help
  2. Hi! I'm working on a project where I have a Map scene. I remove and add this scene to the phaser game a lot because I have to populate map depending upon the data I provide to this scene. After updating the map many times, it just vanishes and doesn't render and it happens randomly. I'm creating some images and texts in the map scene that change depending upon the data I pass in Init function of the scene. this.game.scene.remove('map'); let map = new Map(); this.game.scene.add('map',map,isLoaderComplete,mapData); I'm also attaching a screen shot. Any help would be much appreciated, Than
  3. Ninja.io is a fast paced, 2D multiplayer shooter inspired by games like Soldat, Unreal Tournament and N-game. Currently implemented game modes include Capture the Flag and Deathmatch. It uses the Box2D physics engine to enable convincing rigid body simulation. Players can make various moves including backflips, rolls, proning, running, flying and crouching. The game is still under active development and I'm willing to devote a great deal of time to finishing this project. I've made a test server available and you can join it by following these steps: - Go to
  4. Hey! I'm trying to make calculations in a shader, and use all 4 channels, but unfortunately the alpha channel does not work as expected. I was thinking that if I will set gl.blendFunc(gl.ONE, gl.ZERO) then the output should be only just the source, without any blending, but it's not. So I have tried to combine it also with premultipling alpha (and keep gl.blendFunc(gl.ONE, gl.ZERO)), I get sort of closer results to the expected, but still behaviour is strange. In the demo below I'm just filling mesh with one color, and console.log values of the first pixel, was expecting [25, 178
  5. I tried to find answers to these questions online, but was only partially success-full and most of the info I found was for pixi v3 version. Given that we are now on v5 and few things changed, I decided to ask this here to better understand pixi and webgl in general for optimising big amounts of assets. A small intro to my project I am working on a mobile / web game that relies on images for it's ui / characters / items / backgrounds etc. In some places we are talking high detail, fullscreen graphics for characters, something similar to this: https://www.artstation.com/artwork/n616E that ha
  6. Made anything cool with pixi.js? Post it up here and share it with the world! Whether it's a cool game demo, a fully fledged website or some tripped-out crazy experiment, we would all LOVE to see it! To get the ball rolling, here are some pixi.js projects that exist out on the internets: games: http://www.goodboydigital.com/runpixierun/ http://www.theleisuresociety.co.uk/fightforeveryone/ http://flashvhtml.com/ experiments: http://gametest.mobi/pixi/morph/ http://gametest.mobi/pixi/balls/ http://www.goodboydigital.com/pixijs/bunnymark/
  7. Hi, I am new to Pixi.js and I have been searching and looking for the custom blend mode usage with only WebGL in Pixi.js. I looked through the post( ) and the github PR (https://github.com/pixijs/pixi.js/pull/4049) to explore the possible to create my custom BlendMode. Here are my questions: 1. Does pixi v5 support the custom BlendMode like #4049 mentions, and it seems the version that above post uses is v4.5.3 2. I have no idea how to apply the custom BlendMode to the particle effect with reading the repo (https://github.com/pixijs/pixi-particles). I think I should
  8. I import pixi.js like this: import * as PIXI from 'pixi.js-legacy' But somehow when I visit the web-app using a browser having webGl disabled I get an error which tells me to use "pixi.js-legacy". How so? My package.json still contains the normal pixi.js and hence it's still installed, but not imported - could this cause the problem, i don't think right?
  9. Zapper.io is a free massive multiplayer online game. You can play it here: https://zapper.io Android app is now available: https://play.google.com/store/apps/details?id=io.zapper.zapperio It can be played in the browser on desktop and mobile devices. The game is fundamentally different from typical mmo snake-style games in several ways: - Players can always attack other players and bite their tail, although head-on collisions with larger players result in instant defeat. - The world is covered in an electrical grid that provides players with a speed boost. - Zapper worms are pr
  10. I try to make my pixi.js scene to adjust its size to the window on resize. To do so I use the following: window.addEventListener("resize", () => { this.renderer.resize(window.innerWidth, window.innerHeight); }) It resizes the canvas, inspecting the element it shows the correct size, but somehow the scene is cut off. Both the text and image are pixi.js generated - all stored in several PIXI.Container()'s
  11. That's how I currently load an image as a sprite. As for now, some image are distorted due to a different ration than the sprite's: this.sprite = PIXI.Sprite.from(this.image); this.dimensions = { width: window.innerWidth * 1.05, height: window.innerHeight * 1.05, alpha: 0 }; // later in code getPosition = () => { if (!active) { this.sprite.position.set(window.innerWidth / 2, window.innerHeight / 2); this.sprite.width = this.dimensions.width; this.sprite.height = this.dimensions.height; this.sprite.anchor.set(0.5); this.sprite.al
  12. I'm all new to WebGL and Pixi.js - I started digging into this, because of this exact effect I'm trying to achieve: Demo As of now I got a scroll with multiple text object created using PIXI.Text() - this works fine, it's scrollable etc. But unfortunately I'm stuck implementing that kind of old tube tv screen bend effect on the text - don't even know where to start. Can I achieve this using pixi.js? I'm thankful for every hint! Do I need a different approach? That's how I init each text of mine: constructor($el, stage) { this.stage = stage; this.title = $el;
  13. I have a displacement filter using an radial map you can find attached to the post. This filter is bound to a sprite which is following the cursor. In addition to this displacement filter, I'm trying to also include an RGB split at the cursor's position. To do so I installed the type `RGBSplitFilter` and tried to use it the way I use the displacement filter: initDisplacement = () => { this.displace = true; new PIXI.Loader().add("/dis.png").load(((loader, resources) => { this.posX = window.innerWidth / 2; this.posY = window.innerHeight / 2; thi
  14. I have a `PIXI.Container()` I apply a shader/filter to using `container.filters = [filter]`. Documentations says, to remove a filter, just set `container.filters = null`. This works, but it's kind of a hard cut, when the image/sprite inside of the container is still visible, hence my question: Can I remove a filter with a kind of fade/transition?
  15. EDIT: I just realized, that importing the normal font as a .woff2, defining a `@font-face` within css and then use `fontFamily: fontName` kind of works as well. One more problem though, the font is not being used on initialization, but when I f.e. change its color on hover. How so? How can I make it use the font from the very beginning? OLD: I'm currently trying to load a custom font to use is in combination with `PIXI.text()`. I got everything set up, the text is being displayed etc. - the custom font is not working though. To use a font, I read online, that it's
  16. After a couple of days working with Pixi.js, I've built up a simple boiler plate for the TypeScript language I'm glad to share: https://github.com/yahiko00/PixiProject The game loop with a FPS meter is already implemented. This boiler plate supports source maps, incremental builds, unit tests and browser auto-refresh. Maybe this could be helpful. Feel free to comment. There is certainly a room for improvement. Cheers!
  17. Hey!, I have started learning Pixi.js. What I am trying to do is fill the whole screen, but preserve the pixel art style and ratio. I tried using renderer.resize() but it simply changes the viewport. Suppose I have a game at 320x240 resolution, and my screen is 1366x768. So my game should zoom 3x and new resolution should be 960x720. But the new screen should use nearest neighbor scaling
  18. Hi, I have encounted something strange and I don't know how to fix it. I have git cloned the examples page onto a local webserver and the plugin projection, 3D Camera spine layers works fine. But when I try to reproduce it into my electron app, the layers start acting like this. How can I fix this? I've tried everything, why does it work on the examples html page but not on my html page. thanks!
  19. I'm trying to remove sprites and containers from the current app.stage as to add new ones–e.g. change scene. However, both: let i = 0; app.stage.children.forEach(function(child){ app.stage.removeChild(i); i++; }); and app.stage.children.forEach(function(child){ child.destroy(true); }); remove the top level sprites but not the ones in a container?! Very strange. A second trigger of either of the above then removes them but I'd rather not trigger a function twice without working out why it's not working. I'm running pixi.js - v5.2.0
  20. hi masters 😍 im beginner in pixi.js and game develop. i write a program that in some time load some picture or video or music... not problem in pictures but when load a video or a music. it take long time until play . I decided when start my program . download all video and all music. then show a progressbar with title (loading...) i created my progressBar but can't connect it on my media. thanks for your helps. and sorry for my english languge...
  21. I am trying to setup a Pixi particle emitter using the pixi-particle dependency. Does someone have an example scaffolding file I could use? The examples that are listed are unfortunately only for v4 and I have not been able to accurately update them to get them to work. I would want something that I could drop in an particle object from here: https://pixijs.io/pixi-particles-editor/ and then play around with to see how everything is working.
  22. I want to make my fish(fish_) can transform to another form (fishFly_) while jumping, and I wrote a function called "jump" to do so. But when I was trying to change the .visible of them, console gave me: Uncaught ReferenceError: fish_ is not defined at jump (game.js:142) //the line of "fish_.visible = true;" in "else statement" of "jump function" at t.fn (game.js:127) //which is the line of app.ticker at t.emit (TickerListener.ts:107) at e.update (Ticker.ts:479) at _tick (Ticker.ts:187) seems like I used the wrong way to change it. Can someone
  23. Hey yall - my friend and I have been working on GORILLA TOWN for about 4 years off and on as time permits. It started as a way to teach my friend how to code but also make it fun - so we aimed at making a clone of the old Qbasic Gorillas game for MS-DOS. Little by little it warped over time into an action oriented artillery game where you have to battle robots and escape said town. You blow up blimps and use power ups through 22 levels. The art, story, music, and voice overs, and UI was inspired by the jazz age and 1920s-30s Art Deco movement, but with a dash of weird humor. There is also a l
  24. Hi everyone! I want to set the current position to 0 in pixi.js video object. (video file extension is mp4. Loaded and played successfully) And stop the video completely (not pause). How can I do that? If you know about this, please kindly let me know. Thanks.
  25. const font = new PIXI.Text('TJXY'); font.anchor.set(0.5); font.position.set(renderer.screen.width / 2, renderer.screen.height / 2); font.interactive = true; font.buttonMode = true; font.on('pointerdown', function () { font.scale.y *= 1.25; }); stage.addChild(font); that didn't work. but the v5 doc suggested that it's possible, no error show in console.
×
×
  • Create New...