Leaderboard

Unity exports to a WebAssembly and WebGL output, no "plugin" needed. But that's not to say it's ideal for web, especially not mobile web (search up Unity "Tiny" instead) Possible yes ... but consider this first ... Motion Twins' "Dead Cells" is authored with Heaps, a Haxe based game framework (which has Javascript WebGL output options). Also Motion Twins' catalog before this title was predominantly web games so they clearly have web capabilities. Therefore ... it's reasonable to conclude there's no all-blocking "technical" reason why there isn't a browser version, but there are likely many commercial or user-experience reasons why such a game isn't being published on web (yet). Same issues would likely apply / hinder any other similarly scoped game intended for web, irrespective of authoring tools? Conclusion, as always, is ** understand the audience ** ... on what platform do they want their game (big, complex, small, tiny) to be on. Or ... make web games that absolutely require, embrace and leverage the "web".

Hello! There's one small isometry demo: https://pixijs.io/examples/#/plugin-projection/iso-basic.js However that's not how I usually do isometry. Usually I just use Y scaled by 0.5. You even don't need those "x+z" "x-z" coordinates, if you want to make tiles - take whole two-dimensional array and remove "odd" cells. Like, use only "black" cells of chess board. Then the only problem is to detect which tile is under mouse, but then it will be the only place where you have a isometry math. Everything else is just "x=x'; y = y' / 2" I have many things to tell about isometry: how to sort elements, how to make walls on tiles and intersect/sort them too, but I want to sleep. Try to do something, then I'll give you more info. and Welcome to the forums!

@Danidre as far as he accepts to iframe your game (and its source code is uglyfied and minified).. but I think you would be better off if you're selling non-exclusive licenses of your game. That would be more profitable to you. If you prefer to earn revenue share from ads, its better to you to distribute your game through the big distribution networks, because they potentially will put your game in many portals. But bear in mind that: 1 - selling non-exclusive licenses is better for you as well as to whole game developers community because it will keep the price of games at a healthy level (I'm considering you wouldn't sell your game for very low price. It would lower median prices of the games). 2 - revenue share is a way of devaluate the game development market. Why will someone pay say $500 for a game if he/she can have thousands of games literally for free? For free? Yes, for free. Ads revenue will be paid only if your game was played and generated enough money to split you may earn something. Otherwise, you loose money. Why should you take the risk? You did what was your role: developed the game. You already invested time and money making it and also took your share of risk. Which risk? The risk no one wanted to buy it so you would have to start from zero to develop a new game on your own expenses. Those who liked your game should invest the money by licensing it and take the risk themselves. If the game were a flop or a success, is the risk portals have to take. 3 - No one can assure you that your game will have millions of game plays. No one. Neither distribution networks nor single site owners. If someone assure it to you, he/she is lying to you. 4 - Even if your game make little money with revenue ads it doesn't mean you will receive it. The revenue share deals always have NET30, NET60, NET90 and a minimum payout. Even though there are cases that late payments happen. Think about it: if someone was sure he/she would make a lot of money from your game, why would they share it with you? Does he / she have a charitable soul? Who makes the money with revenue share? Distribution networks make the most money. In second place, portal owners (portal owners may not earn anything but they also don't loose a cent). Are they wrong? No, they're not. They're making a living. We, game developers, are wrong by accepting practices that devaluate us. I'm seeing HTML5 game developers doing the same mistakes Flash game developers made in the past. In the finals years of Flash it was too hard to make money with games because Flash developers themselves devaluated their market. At the end, it's in your hands to decide what's better for you. Regards.

@ivan.popelyshev Yeah, the answer is not for newbies, I will need to learn this to implement. (im doing this right now) Can I stay this post OPEN to make new questions when I need? TY @eXponeta for the answer! My case its much more simple than your, but I will need to learn what you say to implement. Thank you!

Hi, I am using PixiJS version 5.2.0 with the compressed-textures plugin version 2.0.3: If two dds-images are placed directly next to each other in a container and the container is scaled, a thin strip appears between the two images: If the scale of the parent container is exactly 1, no stroke is visible. With PixiJS 4.8.8 and compressed-textures-plugin 1.1.8 it works correctly and no stroke is visible. When the PixiJS scale mode is set to nearest (PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST) no stroke is visible (but the images becomes a little bit blurry). I suspect this is related to the interpolation constraint of the scale mode LINEAR, but I'm not sure if this is a PixiJS problem or a compressed-textures-plugin problem ... This is the complete code: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>PixiJS v5 Compressed Textures Bleeding</title> <script src="https://cdn.jsdelivr.net/npm/pixi.js@5.2.0/dist/pixi.js"></script> <script src="https://cdn.jsdelivr.net/npm/pixi-compressed-textures@2.0.3/dist/pixi-compressed-textures.min.js"></script> </head> <body> <script> //PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST const app = new PIXI.Application({ width: 1024, height: 512 }) document.body.appendChild(app.view) new PIXI.Loader() .add('photo1', './1.dds') .add('photo2', './2.dds') .load((loaderInstance, resources) => { const sprite1 = new PIXI.Sprite(resources.photo1.texture) const sprite2 = new PIXI.Sprite(resources.photo2.texture) sprite1.width = sprite1.height = sprite2.width = sprite2.height = 512 sprite2.x = 512 app.stage.addChild(sprite1, sprite2) app.stage.scale.set(.8, .8) }) </script> </body> </html> Has anyone a good idea? Siddi

OK, done, npm 2.0.5 , or "dist" folder of the repo.

Result: 1. I've removed the masks changing the code below from import * as PIXI from 'pixi.js-legacy' export class RoundedBgView extends PIXI.Container { private readonly sprite: PIXI.Sprite private readonly roundMask: PIXI.Graphics constructor(w: number, h: number, container: PIXI.Container, texture: PIXI.Texture) { super() container.addChildAt(this, 0) this.sprite = new PIXI.Sprite() this.sprite.width = w this.sprite.height = h this.sprite.texture = texture this.addChild(this.sprite) const round = 5 this.roundMask = new PIXI.Graphics() this.roundMask.beginFill(0x000000) this.roundMask.drawRoundedRect(0, 0, this.width, this.height, round) this.addChildAt(this.roundMask, 1) this.sprite.mask = this.roundMask } isSameBg(texture: PIXI.Texture): boolean { if(texture == this.sprite.texture) return true return false } } to import * as PIXI from 'pixi.js-legacy' export class RoundedBgView extends PIXI.Graphics { private readonly texture: PIXI.Texture constructor(w: number, h: number, container: PIXI.Container, texture: PIXI.Texture) { super() this.texture = texture const matrix = new PIXI.Matrix() matrix.scale(w/texture.width, h/texture.height) this.beginTextureFill(texture, 0xFFFFFF, 1, matrix) this.drawRoundedRect(0,0, w, h,5) this.endFill() container.addChildAt(this, 0) } isSameBg(texture: PIXI.Texture): boolean { return texture == this.texture } } 2. I've made default powerPreference low-power this.app = new PIXI.Application({ antialias: antialias, // default value is window.devicePixelRatio * window.innerWidth <= 2000 resolution: resolution, // default value is window.devicePixelRatio backgroundColor: GameColor.getColorHexValue(GameColor.Color.Sea), powerPreference: powerPref, // default value is 'low-power' }) 3. I've added buttons for antialias, resolution & powerPreference, so players can change it: https://prnt.sc/qqoc4k The game seems to be more optimized. But it still heats up my mac while playing. The problem is most other games also heat it up. I think macs have an internal problem with webGL. Plain HTML games never heat it up. I also checked "two videoadapters" things and my mac only has one. I hope after this update windows users won't have any problems and mac users will be okay with it. 15% of our players are from mac. Lets see how the community reacts to it.

Here's my pixi playground. https://www.pixiplayground.com/#/edit/huvn96zZqn-UfdrhsUXv7 The shader I've written is from "The book of shader, chapter five". Basically it draws a line and a nice gradient from black to white. You can see right top one on the above screenshot. And then I rotated the sprite by 45, then as you can see, my expectation is it only draws pixels inside the blue rectangle I marked on the bottom right. But somehow it draws pixels on the whole bounding box. The question is how to achieve my goal when rotation is applied to the sprite?

Does anybody have any suggestions on how I can get this effect using PixiJS? I'm new to PixiJS and game development in general so any suggestion would be great. How I think it works is that the water sprite is rendered on a higher layer and has its edges transparent. The only thing that doesn't work when I think about it this way is that the cells overlap eachother which doesn't make sense if each cell is in a grid at a fixed size. Hope somebody can help demystify how I can accomplish this in PixiJS. Thanks

Thank for your answer, Ivan. I've got an answer from Engler about OnError being called with the error, the loader, and the resource that failed. http://englercj.github.io/resource-loader/classes/loader.html#onerrorsignal Got too used to error handlers being called with single error objects, so didn't look for docs, sorry my bad. Since I didn't know how to catch what files failed to load, so I just reset the loader and reload all the resources again relying on browser cache to handle repeats and it magically worked well. Thanks for your help.

Hi Ivan, I created a pixi-playground at here for you: https://www.pixiplayground.com/#/edit/Y6TocuLkUOTfl7HrfcZFp

We are happy to finalize this year efforts by another release! The 2.17 update brings many Blender integration improvements including the possibility to create anisotropic materials, a Windows installer, range sliders for post-effects with real-time preview, CSS colors support in Puzzles, various WebXR/VR updates, and the QR code generator for publishing. Besides, a new long-awaited demo has been completed by this date and included in this release. Enjoy! Seeing much interest from jewelers, we decided to create a new application to demonstrate how Verge3D can help this industry. This demo shows off the latest development advancements and has the following features: 11 ring designs loaded at user request, coming with 5 shapes each 5 ring curvatures selection of 3 metals, 7 gems, and 4 pearls switch between single and multiple gems text engraving based on user input with 5 different fonts bloom effect and real-time refraction for the gem material hand-made HTML UI scripted with Puzzles (no JavaScript used) mobile layout 6x-8x compression for all assets for quick loading Many thousands of possible combinations and custom engraving ensure that the client will obtain a unique ring. You can try out this configurator yourself by following this link or clicking on the image below.

it the good way to do, it will depending of your need. In simple context , if you need something very simple you can use without regex PIXI.TextMetrics.measureText() Metric are a pixi tool very powerful and can split for you arrays for you multistyle. Or in complexe a example, on my side i use regex to split string, and build a container and sprites with multiple text styles and motions worked with wordWrap! If this can help you to get a idea, here how i proceed on my side. https://github.com/djmisterjon/ANFT/blob/1bfda5a7a047ee2dcc963c59873f5f0b65b7c24c/js/game/global/texts.js#L239

Good. The weight reducing of PixiJS might be important for playable ads, but usually people use it with pixi-spine and its also big. JS files are usually gzipped before sent , so its not that bad My personal opinion on why should we allow to make custom builds of pixijs is that our library if often used as a component of custom game engines. I want to give people as much control as possible. "i made X because Y was too big and contained things i didnt need" - that's what I'm afraid of.

If you use Pixi with TypeScript maybe my information will be useful for you in the future when you compile to AMD modules. I had a problem with import in TypeScript when I compiled using "module": "AMD". I had the error when I compiled like this: "cannot find pixi.js module". Because "." (dot) int the name does not allow to compile to AMD modules. I solved this problem very easy. I just: renamed the folder "node_modules/pixi.js" to "node_modules/pixijs" replaced in the file "pixi.js.d.ts" this code: declare module "pixi.js" { export = PIXI; } to this: declare module "pixijs" { export = PIXI; } My example with instruction: https://github.com/8Observer8/getting-started-with-pixijs-and-typescript Playground: https://next.plnkr.co/edit/2dkQtKRY30nvoYmF?preview I hope it will help you.

Hi, I'm using Pixi, Spine and https://github.com/pixijs/pixi-spine. I've been reading through the code but can't see a way to attach a Spine sprite to another Spine sprite's bone/slot. Is this possible? I have been able to swap out an attachment for another Texture, but not another sprite. The use case is that we'd like our player sprite (a Spine sprite) to be able to hold weapons which are another Spine sprite, where the weapon can be swapped in and out. This seems like it would be a fairly common use-case, so I feel like I'm just missing how to do it. If it's not possible, are there other ways people have done this in the past with Spine? Thanks for any help anybody can offer.

That was true many years ago, but not any longer. Standart HTML5 output from Unity is effectively a WebAssembly blob that runs in all modern browsers, and it's possible to hook it into other Javascript (in or out) quickly enough. It has it's advantages and drawbacks. The new tooling, aka Tiny, is using ECS approaches to modularise things to an atomic level - and is very smart if you are impressed by such things. But the takeaway is there's really no current reason to think that the output from Unity can't be as efficient (or more so) as something like Phaser given some of the techniques it now employs. It's just that most developers aren't especially efficient in using the tools available As for the other points I think there's big risk in explaining "all the ways to make money" because most will result in high hopes, reality crunch, and loss. Why? Because it's easier than ever to make a game, so it's harder than ever to make a dollar from that game. Instead move creative thinking to value generation: find a problem, fix it, get paid, repeat.

Hi, so currently i'm working on personal game with RPG Maker MV and i'm trying to recreate vision limitation with shader, some thing like this This example is created with PIXI 5.2 and working with mouse position After this i'm went back to RPG Maker MV(Using Pixi 4.5.4) and use the shader code, alter it a bit and got it's kinda working with position (0,0) But when I change to position (0.5,0.5) - hopefully the light will go to center of the screen it got offset like this: This is what I come up with shader code for this effect precision mediump float; const float PI = 3.1415926535; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform vec2 iResolution; uniform float iTime; uniform vec2 pos; vec4 limitVision(vec2 st, vec2 pos, float radius){ float pct = 1. - smoothstep(0., radius ,distance(st,vec2(pos))); return vec4(pct); } vec4 norctunalVision(vec2 st, vec2 pos){ vec4 col = limitVision(st, pos, .2); vec4 tex = texture2D(uSampler,st); vec4 result = mix(col,tex,col.a); vec4 tex2 = texture2D(uSampler,st); //sampler texture again for out of vision effect tex2.rgb /= 5.; // Alter color result = mix(result,tex2,1. - col.a); //Mix them together return result; } void main(){ vec2 uv = vTextureCoord; vec4 col = norctunalVision(uv, pos); gl_FragColor = col; } Are there any difference between filter of PIXI(4.5.4) inside RMMV and standalone PIXI(5.2) or some kind of matrix calculation for them? EDIT: Just downgrade my standalone PIXI 5.2 down to 4.5.4 and have same issue, so this maybe a PIXI issues not by rpg maker mv -------- So what difference between the vTextureCoord or some matrix calculation between PIXI 4.5.4 and 5.2?

Thanks a lot, it helped me get a working grid using a TilingSprite. The result is pretty good, and the `cacheAsBitmap` method probably helped the whole thing run even smoother, however I'm not sure the TilingSprite approach has a lot of benefits performance-wise over the looped `Graphics` elements, but I'm not sure of how to compare memory usage for the 2 of them. It should be fine for the scope of my project for now, I just wished I had a better understanding of shaders are they look like an excellent solution for this kind of use.

You actually need to draw something to canvas plus it's missing new keyword before Sprite. Here's working demo for you: https://pixiplayground.com/#/edit/H7xf1sMhhQpzD2anLy51a

"container.filterArea = renderer.screen" for whatever container has those filters.

Its a general problem of imports. Suppose you have a module A, and you also have a B that modified it. Does it modify A or its a completely new instance that you can use both of them? In our case, pixi.js-legacy is just a collection of hacks on top of pixi.js. If you imported it, you actually use the same PIXI instance as in `pixi.js` , but with some mods: autoDetectRenderer is one of them. Its not different PixiJS instance, its the same, if you import `pixi.js-legacy` it changes things permanently. That's the source of bundle: https://github.com/pixijs/pixi.js/blob/dev/bundles/pixi.js-legacy/src/index.js it swaps this one: https://github.com/pixijs/pixi.js/blob/873b65041bd3a5d173b0e0e10fa93be68bc033d9/packages/core/src/autoDetectRenderer.js to this: https://github.com/pixijs/pixi.js/blob/873b65041bd3a5d173b0e0e10fa93be68bc033d9/packages/canvas/canvas-renderer/src/Renderer.js#L12 SUMMARY: This is the correct one: > Or, my project always uses pixi-legacy whenever my users deal with any devices which support WebGL or do not support WebGL?

You can still render grid tile to canvas, grab the texture from it and update.

Not possible, unless you use the trick from https://github.com/pixijs/pixi-layers/ to render some elements outside of container. That plugin allows to set different rendering parent.

I'm really new to PIXI.js and programming in general, I want my programs to work well on multiple screen sizes, but it gets annoying to type out width/8 or width/3*2 as coordinate values. This is the only way I ever though pf to do something like this but I'm sure there has to be a more efficient way, i tried making a function to simplify things, but it doesn't help much, i didn't want to use straight up numbers for coordinates, so i made a function that would take a number from 0 to 1000 and turn it into a value for the screen size, (0 being 0 and 1000 being the width or height of the screen) but then 1 on the height setting is not 1 on the width, and I just got more confused, is there an easier way to do this sort of thing?

Thank you.

When you pick a distribution network they will provide you their API in order to add ads. You can use as many distribution networks as you wish, but I'd recommend you Gamemonetize and Gamedistribution. Regarding selling non-exclusive licenses, Read all posts in Sponsors and Portals section. It will be very instructive. And after that, if you still have doubts, post them in the forum. Regards.

Hi! I stop working on my game slavsgame.com. I decided to help some people and share my source codes of client, AI server and backend server. https://github.com/furcatomasz/SlavsGame https://github.com/furcatomasz/SlavsServer Have fun!

Answer is the remove method. game.anims.remove('c1animation') game.anims.remove('c2animation') game.anims.remove('c3animation') game.anims.remove('c4animation') game.anims.remove('c5animation') //If you need to wait for the event, then use this: card1.on('animationcomplete', ()=>{game.anims.remove('c1animation')}, this) card2.on('animationcomplete', ()=>{game.anims.remove('c2animation')}, this) card3.on('animationcomplete', ()=>{game.anims.remove('c3animation')}, this) card4.on('animationcomplete', ()=>{game.anims.remove('c4animation')}, this) card5.on('animationcomplete', ()=>{game.anims.remove('c5animation')}, this)

What about you learn to deal with feedback instead of calling everyone who has no positive feedback "prickle-y".. We take the effort of looking at your game entirely for free, we even take the effort to provide you with feedback (for free!) to help you improve your game. And what do we get as reward? Being called "prickle-y" because you sir, don't want to hear negative feedback. Well screw you. Is it too much asked to be grateful? :/

We keep it small. OK, invite should be in your mail. I'm a moder, i see everyone mails

Hi everyone, In order to learn a bit more about PixiJS I have developed a simple Slot Machine. The community has helped me fix problems and understand a bit better how things work, so I thought it would be a good thing to share with the community what I did (maybe more people are interested and would like to learn...) I tried to comment as much as I could (or thought it would make sense) not only for me but for anyone reading the code. I'm also outputting some stuff on the web console for reference. You will need a webserver to run this. I'm using Fenix Webserver (https://preview.fenixwebserver.com/) It's free, very basic and fits the purpose. Hope it's useful and you enjoy it. Regards. PixiJS-Slot-Game-Example-small.zip

Perfect, thank you!

I am looking at this codes: https://codepen.io/davidhartley/pen/zpuwC. I want to have clouds like that in my PixiJS application. But, I need reference on how to get started. For starter, how I can make an extremely simple version of the cloud? I want to make an extremely simple version of this and step-up from there. What is this function used for: var shader = new PIXI.AbstractFilter(fragmentSrc, uniforms); ? And what makes PixiJS able to make 3D render? I though it is only meant for 2D development.

Invest time to understand browser devtools. Typescript must know, everything else is not important. As for folders and app structure, here's one of my sandboxes with basic app: https://codesandbox.io/s/app-architecture-3-j0di5 Its basic physics with PixiJS and p2. p2 is built from their repo, not from npm (npm is backwards a bit and author is gone somewhere). The idea is to separate app to components that are referenced from Application and connect them with Runner's (basically, eventEmitter but for one event). Entities also can have components like Pixi component and physics component. If you need multiplayer for it, structure will be different, I'm working on new sandbox for it

May the sparkle and joy of Christmas fill your heart 🎄✨ Merry Christmas

Do you want an invite to pixijs slack?

By using the render texture as buffer, I created this effect using this shadertoy buffer example

Filters are made to be applied on a temporary texture where container contents are displayed. If you dont have a container with stuff - most probably you dont need a filter. Maybe you need a mesh shader: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js Just use several meshes and juggle with renderTextures: https://pixijs.io/examples/#/textures/render-texture-advanced.js Unfortunately, we do not have a tutorial how to convert shadertoy examples to pixi. People who tried to convert something tried it on small examples and used mesh shaders and filters. For this big example - nobody tried, you'll be the first one. It doesn't mean its impossible or that pixijs is not made for it - we just didnt have a single case like that. You are the first one - make sure to share the experience so others will follow.

I'm sorry, I'm not that good with shadertoy. Can you please elaborate? As for pixi filters, you can pass the texture in any uniform. If you want to use previous frame, here is a big hack that didnt make it into a plugin: https://github.com/pixijs/pixi.js/wiki/v5-Hacks#re-use-previous-frame-of-filtered-object And first thing that you have to do is to set filterArea to "app.screen" or "renderer.screen" because you really dont want to have problems with temporary pow2-sized textures, you need full screen first. You can move to temp textures later when your stuff works.

Mask is also belongs to the stage. You can move it with whatever container did you put it, it doesn't even matter whether mask element belong to one container or another. Like in Adobe Flash.

Container with red hands masked by a sprite with gradient texture. There are many other ways to do that, but you need to understand RenderTexture and filter abstractions for it.

I'm the worst, for sure. Many guys here are very good at making HTML5 games but for me @OkijinGames is the best hands down. Note: I am not affiliated with @OkijinGames at all. I'm just a fan of his work.

Definitely go for electron if you don't want to rewrite everything (or https://nwjs.io/) Perfs are good, but yes memory usage is bigger than if you create the game with unity for example.

@Balamurugan Just notice that applications made with Electronjs consumes a lot of RAM and have a typical size of 120MB. Other than that, it is great.

you need to pass data into the init function. So if you have this.scene.start('game', { level: 1 }) then in your game scene you need init(data){ this.level = data.level; }

Hi M Yawer, We are adding in-game video ads in our (and partnered of course) unity webgl games, and publish to our network. The ads are setup to appear once every couple of minute, and they are coming with skip button. You can check some examples here, how the ads perform and show directly. Slope game Y8 Moto Loco HD racing game Y8 and others of our newest webgls which can be found here New Unity WebGL Game at Y8, order by date And if you are interested in the partnership, send me a message or reply here and we'll get that going for your game(s)

https://orangegames.com/ These guys are super qualificated (and some of them are members on this forum)

HI i too have been looking for a group of game developers to alongside with and build games together i am still learning the nacks of codiing im not in it for the money i just want to start making some games with a group also i do have a telegram account that you can contact me on im an energetic optimistic person and love to work with people and hope to learn more of game developing as well im a pretty easygoing person and i get along with a lot of different people i myself have a passion for animating i also work on pixel art as well here are some of my sprites i made in pixel art here is some main info about me im male 16 turning 17 this year timezone is perth GMT 8

Samuel, I can do it like this. new BABYLON.Color4.FromHexString("#FD6304FF"); Thanks for helping.