Popular Content

Showing content with the highest reputation since 06/18/19 in all areas

  1. 2 points

    Pixi.Mesh gl_FragColor Alpha Channel

    Hi, I've tried to change the Alpha Channel on gl_FragColor on a Mesh, but it doesn't show a result as I expect. For example, on the pixijs.io example ( https://pixijs.io/examples/#/mesh/triangle-color.js ) void main() { gl_FragColor = vec4(vColor, 1.0); } If we changed the line into void main() { gl_FragColor = vec4(vColor, 0.5); } It doesn't show any difference. Is there any workaround/settings I need to adjust to use the alpha channel correctly? Thanks.
  2. 2 points
    void main() { gl_FragColor = vec4(vColor, 1.0) * 0.5; } We use premultiplied alpha everywhere. Instead of (r,g,b,a) we store (r*a, g*a, b*a, a)
  3. 1 point
    Thanks for the welcoming & prompt response Ivan. Been reading lots of your comments regarding Pixi and it helps a lot.
  4. 1 point

    25 HTML5 Games - Bundle №1

    Hello, I present you, my collection of 25 awesome games available in 1 bundle. Made in Construct 2 (capx file included). Enjoy the games! - 60% OFF, Get this bundle now!- Buy today for $150 (Original Price: $375) only and save: $225. Live preview: https://odiusfly.com/portfolio/game_bundle1 If you are interested, don't hesitate to contact me: odiusfly [at] hotmail [dot] com Thanks in advance, Kyriakos https://odiusfly.com
  5. 1 point
    Very good question, congratulations with first post!
  6. 1 point

    bugfix for Panda2 p2 plugin

    Hi @enpu, I just encountered en fixed a small bug in the p2 pulgin. Since it is not open source, I cannot create a pull request so I decided to post it here instead: p2.js line 13876: context.rect( -shape.width / 2 * body.world.ratio, -shape.height / 2 * body.world.ratio, shape.width * body.world.ratio * game.scale, shape.height * body.world.ratio * game.scale ); should be: context.rect( -shape.width / 2 * body.world.ratio * game.scale, -shape.height / 2 * body.world.ratio * game.scale, shape.width * body.world.ratio * game.scale, shape.height * body.world.ratio * game.scale ); Hope this is helpful. Stephan
  7. 1 point

    The future of web games

    There's a point of investment for an HTML5 game where you say screw it and just go to a market front like Steam. For instance https://store.steampowered.com/app/368340/CrossCode/ Has reached Steam's monthly top sellers a couple of times. And there are quite a few other games on Steam that are actually HTML5 but don't bother to tell anyone. ____________ Which kind of leaves web portals with games that have much lower investment levels, attempts at gimicks, and similar. Basically it's hard to stay relevant, when it's hard to get games that are competitive/relevant. Also have you tried to use a portal recently, they're well terrible, slow, ad filled, full of distractions, clogged with login flyovers, and an all around nightmare to use.
  8. 1 point
    Sounds good, I am going to do it this way, thanks @ivan.popelyshev
  9. 1 point

    bugfix for Panda2 p2 plugin

    Haha. 😂 Enpu's still around, and fixes things when problems are found, or add's new stuff. I think the communities just been a bit quiet. I've been pretty swamped to work work on any of my own stuff.
  10. 1 point
    Hamza Wasim

    Box Tower - An Addictive Game

    Hi! I have created a game called Box Tower. I worked a lot to make it run smooth. Here is the link to the game: https://gamedistribution.com/games/box-tower-1 Game Description : Box Tower is an addictive game. Drop the box that is moving on the other box. Touch, Mouse, And Keyboard all are supported.This game is compatible with Admob. This game is created using Construct 2. Game Instructions : While playing on pc or laptop use “Space” key to drop the box or press left click to drop the box. While playing on a smartphone or tablet, tap anywhere on the screen to drop the box. Game Features : Made with Construct 2 Full HD 1080×1920 pixels Touch, mouse, and keyboard support Sound effect Highscore I would like to have your feedback about the game. Thanks!
  11. 1 point

    Box Tower - An Addictive Game

    Cool concept but the graphics could be better, more attractive... The speed could be also faster. Have a good day.
  12. 1 point
    Good idea! I recommend to patch that part of texture, like `Object.defineProperties(PIXI.Texture, { frame: { set: { function ... " so it doesnt produce error but adds a warning somewhere, with texture name from cache or whatever. I have many hacks like that when i give my games to designers
  13. 1 point

    The future of web games

    There is Unity Tiny - It is in the early stages, but it should do exactly that: https://unity.com/solutions/instant-games
  14. 1 point
    Hi! I'm looking for creative ways to change/animate shapes of masks and displacementmaps in pixi.js. Any good suggestions out there apart from the more obvious techniques?
  15. 1 point
    Working on porting code from an old angular app to vue and am very new to PIXI. Upgraded PIXI to latest version. Issue I am facing is, the page renders fine the first time but when I go away from the page and come back I see this error in console: I am using the loader as so: const PIXIloader = new PIXI.Loader() I tried using PIXIloader.reset() before calling the PIXIloader.add() but doesnt seem to work and when I console.log the PIXIloader I still see the resources in the loader. If I manually reload the page it works fine.
  16. 1 point
    > I am indeed rather new to open source and had some skittishness about digging into libraries. I'll abolish that effect - for the future, when overriding a Pixi class, do you modify the js file directly or some other method? PixiJS is focused on source-code , we have very good selection process for PR's and dont allow strange things that most people cant understand into it. you can extend class (override), you can patch it like "PIXI.AnimatedSprite.prototype.xxx = function() ... " or you can build your own pixi fork. I know big project with modified pixijs file, it happens.
  17. 1 point
    @linhcophu I believe that every API has a sample code in the documentation I shared with you (shareAsync does, at least)
  18. 1 point
    Thank you very much for the reply! I went to make the breakpoint and it turns out I was using a script tag in the client towards an old version of pixi on Cloudflare before the addition of onLoop. I am updating the script tag to a static route towards the correct file in node_modules (per https://stackoverflow.com/questions/27464168/how-to-include-scripts-located-inside-the-node-modules-folder). I am indeed rather new to open source and had some skittishness about digging into libraries. I'll abolish that effect - for the future, when overriding a Pixi class, do you modify the js file directly or some other method? Thank you again.
  19. 1 point
    @linhcophu The only API you can use are the one from the Instant Games SDK: https://developers.facebook.com/docs/games/instant-games/sdk/fbinstant6.3
  20. 1 point

    Custom Font

    First time posting, so be gentle 😜 @andrei.nicolae I think the easiest way to explain would be to show you how I have done it. I've included a stripped down version of the Boot.js file I am using in my current project. class Boot extends Phaser.Scene { constructor() { super({ key: 'Boot', active: true, pack: { files: [ //INSERT SOME FANCY FILES ], }, }); this.progress = 0; this.loaded = false; } preload() { // IMPORTANT: below I load google's webfont loader this.load .script('https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont') .setPath('assets/img/') .image({ key: 'foo', url: 'foo.png', }) this.load.on('progress', this.onLoadProgress, this); this.load.on('complete', this.onLoadComplete, this); } onLoadProgress(progress) { console.debug(`${Math.round(progress * 100)}%`); } onLoadComplete(loader, totalComplete, totalFailed) { // IMPORTANT: Here we utilize the webfonts loader script we loaded above. // NOTE: I played around with calling this in different places and settled // on this one currently. Feel free to play around with where it is called. // just make sure that you do not call it before it is done loading and also // make sure not to proceed to a scene that needs the font before it renders. WebFont.load({ active: () => this.loaded = true, custom: { families: ['Montserrat'], urls: ['assets/fonts/Montserrat.css'], //I included what this should look like below }, }); console.debug('completed: ', totalComplete); console.debug('failed: ', totalFailed); } update() { if (this.loaded) { this.scene.launch('Clouds'); this.scene.start('Title'); } } } export default Boot; Like I mentioned in the above comments, here is the accompanying css file. @font-face { font-family: 'Montserrat-Regular'; src: url('Montserrat-Regular.eot'); src: url('Montserrat-Regular.woff2') format('woff2'), url('Montserrat-Regular.woff') format('woff'), url('Montserrat-Regular.ttf') format('truetype'), url('Montserrat-Regular.svg#Montserrat-Regular') format('svg'), url('Montserrat-Regular.eot?#iefix') format('embedded-opentype'); font-weight: normal; font-style: normal; } Hopefully, the comments alone are sufficient. If not then the file I stripped down is here in it's ever-changing (work in progress) form: https://github.com/fielding/trouser-snake/blob/master/src/scenes/Boot.js. The game has a long way to go, so no judging haha 😜 If code/examples aren't your way of learning and you have any questions let me know.
  21. 0 points

    The future of web games

    Oh yeah, I remember reading that discussion. Well, to give my two cents. I think that discussion was pointless to begin with. I understand the question since there are not many popular hmtl5 games, but I would not call it dead, far from it. Web is a platform like PC, console and mobile. Most game devs use an engine like Unity3D or Unreal and export their game to platforms they can support. But games get exported more often to platforms where their game can run native because most games are too big to run smoothly in the browser. I mean, just look around and see how many devs actually created a 3D game in html5. Barely. And if someone did, is it probably low-poly. But that being said, that would be the only con I can think of. The biggest pro, and the reason I decided to go for HTML5 game dev, and not Unity or Unreal or any other engine, is because it is soooo damn easy compared to writing your game in C# or C++. I mean, all you need is a good IDE for web dev and your browser. And players don't even have to download your game. Heck, if you want to, you can put your game in a cordova container and export it to Android or iOS as if it is nothing. And just look at all the available resources. There are engines like Game Maker or Construct that allow you to export your game easily, as well as lots and lots of frameworks like Phaser, Pixi, MelonJS and so on. And also, since your game is actually a webpage, it can be integrated easily in many front-end technologies like Angular, ASP.Net, PHP and even NodeJS with Electron. That is also a very powerful benefit. Not to mention webhosting. I mean, a basic webhosting service is enough to host your game on since html5 games do not tend to be gigabytes big. Give it time. I admit I cannot think of a popular html5 game, but I am sure other forum members can fill me in on that one. I do see some gems once in a while. But those are often not only for web, but native too. They just have a web variant. You wont find yourself a whole RPG, but smaller games. But I like those, I am often very tired after work and to be able to play some small games while being half braindead is awesome, and very relaxing.