All Activity

This stream auto-updates     

  1. Past hour
  2. Karg
    you can use any frameworks or game engines that can export to various flavours of browser content (js/canvas/webgl, webassembly) to make any game. if you meant complex game-play, the only limit is the sky 😛 if it's complex content (lots of graphics, animations, music, sounds), then yeah, there are limitations on what you can achieve for web. the main limit i see is the size, but here the discussion would diverge into: would you like you game available as web desktop, web mobile over wi-fi, web mobile over mobile data? a common denominator would be to keep the total size of the game below 20MB (code + assets), but with such low size, even you optimize the living hell out of your assets (choose a base resolution way lower than 1920x1080, use dragonbones/spriter for animations, downgrade the quality of music) you won't achieve the quality and quantity of assets of any of the aforementioned games. alternatively, you can use asset bundles and stream music/sounds on demand, but then if the player plays it on mobile data, can he afford the data charges for these dynamic loaded assets? as alternative 2, you can offer your game as a pwa (progressive web app), in which case some of these restrictions can be avoided (although the support for this is not wide-spread and probably only available to newer mobile devices and mobile operating systems). the second restriction is performance for canvas/webgl, where you have to use as fewer textures as possible to keep the draw calls low and maintain a steady fps. in this case, you'll probably want only a couple of 2048x2048 textures active at a time, and as you can guess, you won't reach the same level of quality as the games you've pointed to.
  3. Today
  4. Odk started following Survey on online game backend
  5. Odk
    Hi! Some time ago I made a PoC of a game backend server. It worked surprisingly well but that's it, I never fully finished it. Now I would like to build a full featured product out of it, but I need your opinion. Thanks to this form: https://forms.gle/Q9cD7dwsBLepw1498 I’ll know if it makes sense and what you would expect from a product like this. Thanks for all the comments and opinions!
  6. 8Observer8
    Packtpub broke links like this: https://www.packtpub.com/code_download/15622
  7. b10b
    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".
  8. Jeyjey
    I'm available for new projects! 🙂I prefer work for a fixed price. Please, send me a list of the assets/game design document and I will tell you the price and deadlines.Feel free to contact me by email: jeny.korney@gmail.com Portfolio: https://www.behance.net/jenyk http://jeny-korney.tumblr.com/
  9. titanicpiano14
    Looking for new RPGs to work on!
  10. joony8988 joony8988 joined the community
  11.    ivan.popelyshev reacted to a post in a topic: How does the render work?
  12. Milton
    I've been using Pixi Canvas (with Phaser 1 and 2) for ages, and it is fast enough for most anything 2D. Your game should not need WebGL. These GPU problems are mostly driver related, I've seen them happen even with an empty loop, there's nothing to fix.
  13. demiculus
    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.
  14. spinnerbox
    Will not spam. You are quite right about my post. Babilon, Pixi and Phaser are all JavaScript. You can mix them together. Maybe even organize them with some Angular code. Well depends on your JavaScript coding skills. I probably can google about complex projects made with these three, but If you can name some of them, I would like to see. Probably @coelacanth would also like to see some examples made with these three. I cannot recall the name of that browser game made by Firefox team? It was with multiplayer and it was RPG. You are a knight and you walk on a pixelated map. You gather potions and weapons and as you go, you kill monsters which give you experience points. As you get more experienced you get to kill bosses I think and visit hidden places like dungeons and caves. And this all was built I think with Phaser and some other tools, probably Socket.io or the like. EDIT: Yes got it: BrowserQuest, Article on the game Phaserquest - BroswerQuest made with Phaser
  15. Yo.oren Yo.oren joined the community
  16. demiculus
    I'm using pixi.js-legacy and when I do forceCanvas: true everything slows down. I know the game is simple and shouldn't need webGL but pixi is built for that I guess
  17. Siddi
    Unfortunately both the global setting of WRAP_MODE and the setting of WRAP_MODE on a texture have no effect: <!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 PIXI.settings.WRAP_MODE = PIXI.WRAP_MODES.CLAMP 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 texture1 = resources.photo1.texture const texture2 = resources.photo2.texture texture1.baseTexture.wrapMode = PIXI.WRAP_MODES.CLAMP texture2.baseTexture.wrapMode = PIXI.WRAP_MODES.CLAMP const sprite1 = new PIXI.Sprite(texture1) const sprite2 = new PIXI.Sprite(texture2) 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>
  18.    coelacanth reacted to a post in a topic: complex games with html5
  19. ivan.popelyshev
    yeah, that should do it. Btw, if you want to make shader for graphics or sprite, here's an example: https://www.pixiplayground.com/#/edit/zmDpwnZkvbb1b-aWaO9S8 Its batch shader . If you want to make gradients, I can help with that too.
  20.    ivan.popelyshev reacted to a post in a topic: Compressed textures bleeding edges
  21. ivan.popelyshev
    you guessed right, its related to texture options. Its about REPEAT Switch it off. "baseTexture.wrapMode = PIXI.WRAP_MODES.CLAMP" with LINEAR, edge pixels when scaled are interpolated with pixels from opposite edge.
  22. Oliver Zhou
    My requirement can be achieved by: 1) create a graphic and apply my filter on it 2) call renderer.generateTexture to generate a texture 3) create a sprite to use the generated texture and then apply rotation. There's no need to use "outputMatrix", as you have told, not the right abstraction. Thanks again, Ivan.
  23. Oliver Zhou
    Okay, thanks. I think I use wrong abstraction for my purpose😆
  24. Siddi started following Compressed textures bleeding edges
  25. Siddi
    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
  26. ivan.popelyshev
    Why is "outputMatrix" needed in filters? To position a texture over it, for masking or displacement. Filter area is defined by container bounds, but to define texture coords relative to that area its better to do so through sprite, we can put calculated sprite transform matrix inside filter for it.
  27.    ivan.popelyshev reacted to a post in a topic: How custom filter works with a sprite that has rotation is set ?
  28. ivan.popelyshev
    > 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. How filters work: container is rendered into temporary texture. It doesn't matter what is the shape of container - filter area is rectangular parallel to screen axises. Then the quad drawn on screen: shader has that old temporary texture as an input "uSampler". Your "gl_FragColor = vec4(color, 1.0)" means that alpha is always 1.0. If you do not use input from "uSampler" and you are asking the question - you are using wrong abstraction. You do not need filter. You need mesh shader: https://pixijs.io/examples/#/mesh-and-shaders/triangle-color.js Its the basic abstraction of webgl, If you read https://webgl2fundamentals.org/, you'll understand how webgl is all about those shaders. Why pixi books contain only filters? Because v4 didnt have a good way to define shader for mesh. It had only https://github.com/pixijs/pixi-plugin-example and it didnt exist just after v4 release, I had to make it. Why filters even needed if they are good not solution for your case? Why were they main solution for PixiJS v4 and v3? Because of need to apply shader to SEVERAL sprites at once, without need to think of their rotations, scales, e.t.c. - main case is BlurFilter. Filters can work with several passes and be much more effective than just mesh shaders - blur uses horizontal blur, then vertical, several times, to get desired effect - its very hard to do with just one shader pass. How to fix your example easily? Well, use `uSampler`. Take a "texture2D(vTextureCoord, uSampler);`. Take alpha from it. Here's another example for mesh shader: https://www.pixiplayground.com/#/edit/6ThqOOz-SVJe3AyvkbnaU
  29. ivan.popelyshev
    Here, I'm changing strip texture to WHITE and back on click: https://www.pixiplayground.com/#/edit/yMxrmJL59TO_H9zyKvDsf
  30. ivan.popelyshev
    it should work. Maybe something wrong with your new texture?
  31. abhishek4693
    I have tried to change the texture of SimpleRope mesh by mesh.texture = "new texture" at run time... But it's not changing. Even I have tried by mesh.material.texture as well. Both didn't work for me. Can anyone please help?
  32. abhishek4693 abhishek4693 joined the community
  33. Oliver Zhou started following How custom filter works with a sprite that has rotation is set ?
  34. Oliver Zhou
    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?
  35. Milton
    I think you need to figure that out, because your game seems suited for Canvas. No heavy graphics, no rotation, turn-based. You are using 'new PIXI.Application({forceCanvas: true, ...)' right? The API says: "prevents selection of WebGL renderer, even if such is present, this option only is available when using pixi.js-legacy or @pixi/canvas-renderer modules, otherwise it is ignored."
  36. kaasis
    I just don't understand, what is the point of your comment? It literally does not answer his question that he asked. Do you even read your own post before you post it? Putting that aside, to answer topic's author question. Yes, any of those libraries are fine to build complex games, they even are based on WebGL renderer which allows for bigger limits to render stuff on screen at the same time than regular canvas allows you to and even allows 3D stuff as well if you choose right framework to work with. Talking about limits, it depends on how you make the game but if you optimize well enough you could create as large game as you'd like, there's many ways to do that and goes very in depth with it so i'm not gonna explain that but if you want to find more about it, i'd suggest googling that.
  37. demiculus
    I'm using pixi v5, not sure why but everything works very slow when I just use canvas..
  1. Load more activity