Leaderboard

@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.

I've made a web-demo for Devader, would appreciate if you check it out: http://www.devader.space/html/game.html

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

I tried this example in v5, it seems that it didn't work as expected any more. I have no idea why class CrtWarpFilter extends PIXI.Filter { constructor() { super(null, ` precision mediump float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform highp vec4 inputSize; uniform highp vec4 outputFrame; vec2 mapCoord( vec2 coord ) { coord *= inputSize.xy; coord += outputFrame.xy; return coord; } vec2 unmapCoord( vec2 coord ) { coord -= outputFrame.xy; coord /= inputSize.xy; return coord; } vec2 warpAmount = vec2( 2.0 / 34.0, 1.0 / 16.0 ); vec2 warp(vec2 pos) { pos = pos * 2.0 - 1.0; pos *= vec2( 1.0 + (pos.y * pos.y) * warpAmount.x, 1.0 + (pos.x * pos.x) * warpAmount.y ); return pos * 0.5 + 0.5; } void main() { vec2 coord = vTextureCoord; coord = mapCoord(coord ) / outputFrame.zw; coord = warp( coord ); coord = unmapCoord(coord * outputFrame.zw); gl_FragColor = texture2D( uSampler, coord ); } `); } }

Phaser 3 repo is at https://github.com/photonstorm/phaser Phaser 3 Docs are at https://github.com/photonstorm/phaser3-docs If you clone the repo, the docs are in the 'docs' folder. eslintignore is nothing to do with docs. It's to do with what gets lint checked. However, there is no eslint file in the docs repo. There's also no 'npm build' command either, so you were looking in a different repo. Phaser 2 repo is at https://github.com/photonstorm/phaser-ce Phaser 2 docs are in the docs folder of that repo.

I had that problem in production. What i did - I reset() the loader and added everything again. On any error. But I guess its not for your case: > it happens to different files and in 1 in 20 times game loads successfully. So far I didn't see code that does reloading of individual resources in case of error in public (forum, issues). Please share it if you make something. It shouldn't be that difficult, if you read sources of resource-loader ( https://github.com/englercj/resource-loader/ )

There's nothing wrong with using Containers in Phaser 3. The example given by mazoku (a UI Button) is a perfect use-case for them. As are multi-part sprites, i.e. complex Game Objects. But if a Container has just a single child, that's when it doesn't usually make sense any more.

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

I have 'esnext' pretty much welded to on, so unfortunately not, but I'm sure it will help someone. Many thanks, anyway (Your 'constructor' in the Output class is missing an 's', btw.)

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.

PixiJS is not a framework but it has several plugin systems inside - the modularity is a difficult thing because there are not-obvious links between modules. So far I didn't see that its actually possible to make good 2D renderer with ES6 imports alone, initialization step is needed. Thus, you have to create a bundle: https://pixijs.io/customize/ That's default PixiJS bundle: https://github.com/pixijs/pixi.js/blob/dev/bundles/pixi.js/src/index.js As you see, there are not only "imports" but extra steps that has to be done after them. Don't expect stellar results, the biggest thing is @core and I think it is comparable by weight with all other modules.

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?

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

@Bonomi Got it. Have you read the documentation? https://developers.facebook.com/docs/games/instant-games/guides/play-friends 1- But then, how do we handle the accept request on player B (slave) flow? Once player B enters that context (see the documentation I shared above) it means the challenge is accepted, it is that simple. Then you can handle it on your server side. When player B has played his turn, you could send a custom update: https://developers.facebook.com/docs/games/instant-games/guides/game-update 2- How is player A notified that his friend accepted the challenge and is ready to play? See answer 1. 3- Same questions about when one player is waiting for his opponent to play, I believe I need to use "switchAsync" function but am a bit blurry here as well. Not sure what you mean, but I feel my answer to 1 answers this as well.

hey this is a awesome big work ! congrats and thanks for tuto. the tread is old , but i don't think necroPosting is illegal in the forum rule. your allowed to revive a tread.

You can use the Babylon.js 3D Engine that was written in TypeScript but you can use it from JavaScript and TypeScript. I recommend to use it from TypeScript, I love this language very much. Babylon.js has a huge and friendly community: https://forum.babylonjs.com/ If you love Math and full control you can use pure WebGL and glMatrix for 3D and 2D. You can start with this great book: WebGL Programming Guide I moved all examples from the book to JSFiddle: Chapter 02. Your First Step with WebGL ch02/HelloCanvas: https://jsfiddle.net/8Observer8/2gky294r/ ch02/HelloPoint1: https://jsfiddle.net/8Observer8/cc72u1u5/ ch02/HelloPoint2: https://jsfiddle.net/8Observer8/uxw657ud/ ch02/ClickedPoints: https://jsfiddle.net/8Observer8/xf4fnc0o/ ch02/ColoredPoints: https://jsfiddle.net/8Observer8/gkkmnpga/ Chapter 03. Drawing and Transforming Triangles ch03/MultiPoint: https://jsfiddle.net/8Observer8/cty1120m/ ch03/HelloTriangle: https://jsfiddle.net/8Observer8/wk4sksnw/ ch03/HelloQuad: https://jsfiddle.net/8Observer8/g4ctyk7w/ ch03/HelloQuad_FAN: https://jsfiddle.net/8Observer8/v119e8o6/ ch03/HelloTriangle_LINES: https://jsfiddle.net/8Observer8/wwrkaxcf/ ch03/HelloTriangle_LINE_STRIP: https://jsfiddle.net/8Observer8/3ggjz4rm/ ch03/HelloTriangle_LINE_LOOP: https://jsfiddle.net/8Observer8/7vcyquro/ ch03/TranslatedTriangle: https://jsfiddle.net/8Observer8/0dp4xvyt/ ch03/RotatedTriangle: https://jsfiddle.net/8Observer8/gh9s6szm/ ch03/RotatedTriangle_Matrix: https://jsfiddle.net/8Observer8/7ze7pgpu/ ch03/ScaledTriangle_Matrix: https://jsfiddle.net/8Observer8/6xzoe63s/ Chapter 04. More Transformations and Basic Animation ch04/RotatedTriangle_Matrix4: https://jsfiddle.net/8Observer8/t4y7783v/ ch04/RotatedTranslatedTriangle: https://jsfiddle.net/8Observer8/b5yfxojp/ ch04/TranslatedRotatedTriangle: https://jsfiddle.net/8Observer8/o8voebc9/ ch04/RotatingTriangle: https://jsfiddle.net/8Observer8/x9j5vdk7/ ch04/RotatingTranslatedTriangle: https://jsfiddle.net/8Observer8/rkrv0322/ ch04/RotatingTriangle_withButtons: https://jsfiddle.net/8Observer8/wzoLmdzd/ Chapter 05. Using Colors and Texture Images ch05/MultiAttributeSize: https://jsfiddle.net/8Observer8/dsfgezbj/ ch05/MultiAttributeSize_Interleaved: https://jsfiddle.net/8Observer8/bshwnden/ ch05/MultiAttributeColor: https://jsfiddle.net/8Observer8/bveykLdf/ ch05/ColoredTriangle: https://jsfiddle.net/8Observer8/mrkpms7d/ ch05/HelloTriangle_FragCoord: https://jsfiddle.net/8Observer8/ft33yo9s/ ch05/TexturedQuad: https://jsfiddle.net/8Observer8/o3vakb3h/ ch05/TexturedQuad_Repeat: https://jsfiddle.net/8Observer8/2s7q68cc/ ch05/TexturedQuad_Clamp_Mirror: https://jsfiddle.net/8Observer8/mqu0wwma/ ch05/MultiTexture: https://jsfiddle.net/8Observer8/ztew5u0p/ Chapter 07. Toward the 3D World ch07/LookAtTriangles: https://jsfiddle.net/8Observer8/6ab11xpg/ ch07/LookAtRotatedTriangles: https://jsfiddle.net/8Observer8/944dd57h/ ch07/LookAtRotatedTriangles_modelViewMatrix: https://jsfiddle.net/8Observer8/e5t6gj1w/ ch07/LookAtTrianglesWithKeys: https://jsfiddle.net/8Observer8/38ewegg2/ ch07/OrthoView: https://jsfiddle.net/8Observer8/zebt4u7t/ ch07/LookAtTrianglesWithKey_ViewVolume: https://jsfiddle.net/8Observer8/vLcejtm1/ ch07/OrthoView_halfSize: https://jsfiddle.net/8Observer8/uvcd9h4p/ ch07/OrthoView_halfWidth: https://jsfiddle.net/8Observer8/vepodfb8/ ch07/PerspectiveView: https://jsfiddle.net/8Observer8/640pv8qe/ ch07/PerspectiveView_mvp: https://jsfiddle.net/8Observer8/w8yh4Lmj/ ch07/PerspectiveView_mvpMatrix: https://jsfiddle.net/8Observer8/hhwnx145/ ch07/DepthBuffer: https://jsfiddle.net/8Observer8/hyumw026/ ch07/Zfighting: https://jsfiddle.net/8Observer8/foc0b45t/ ch07/HelloCube: https://jsfiddle.net/8Observer8/rkpn5tyw/ ch07/ColoredCube: https://jsfiddle.net/8Observer8/80x8cyom/ ch07/ColoredCube_singleColor: https://jsfiddle.net/8Observer8/pespackq/ Chapter 08. Lighting Objects ch08/LightedCube: https://jsfiddle.net/8Observer8/4jchxo84/ ch08/LightedCube_animation: https://jsfiddle.net/8Observer8/ekw3osj7/ ch08/LightedCube_ambient: https://jsfiddle.net/8Observer8/y6qwnfe1/ ch08/LightedTranslatedRotatedCube: https://jsfiddle.net/8Observer8/pa88ujjg/ ch08/PointLightedCube: https://jsfiddle.net/8Observer8/vuq118ue/ ch08/PointLightedCube_animation: https://jsfiddle.net/8Observer8/5bj39hb8/ ch08/PointLightedSphere: https://jsfiddle.net/8Observer8/edz9Lz8f/ ch08/PointLightedSphere_perFragment: https://jsfiddle.net/8Observer8/qzwyow4j/ ch08/PointLightedCube_perFragment: https://jsfiddle.net/8Observer8/8t1umamf/ ch08/LightedCube_perFragment: https://jsfiddle.net/8Observer8/471y2t84/ Chapter 09. Hierarchical Objects ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/ ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/ ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/ Chapter 10. Advanced Techniques ch10/RotateObject: https://jsfiddle.net/8Observer8/1f5hLmff/ ch10/PickObject: https://jsfiddle.net/8Observer8/owue624n/ ch10/PickFace: https://jsfiddle.net/8Observer8/edvw6z90/ ch10/HUD: https://jsfiddle.net/8Observer8/fLxxxs35/ ch10/3DoverWeb: https://jsfiddle.net/8Observer8/tbowcc16/ ch10/Fog: https://jsfiddle.net/8Observer8/6yf9L399/ ch10/Fog_w: https://jsfiddle.net/8Observer8/8aLvthc3/ ch10/RoundedPoints: https://jsfiddle.net/8Observer8/sjs5kmn4/ ch10/LookAtBlendedTriangles: https://jsfiddle.net/8Observer8/apoz294n/ ch10/BlendedCube: https://jsfiddle.net/8Observer8/xsrL2fs5/ ch10/ProgramObject: https://jsfiddle.net/8Observer8/jnd0j6w0/ ch10/FramebufferObject: https://jsfiddle.net/8Observer8/vaLq6d66/ ch10/Shadow: https://jsfiddle.net/8Observer8/jsnfwcae/ ch10/Shadow_highp: https://jsfiddle.net/8Observer8/brjzr00n/ ch10/Shadow_highp_sphere: https://jsfiddle.net/8Observer8/4fmyLy5f/ ch10/OBJViewer: https://jsfiddle.net/8Observer8/pws1x7uv/ ch10/RotatingTriangle_contextLost: https://jsfiddle.net/8Observer8/vs01s8Lz/ Gifts gifts/Particle: https://jsfiddle.net/8Observer8/Ltzt31vk/ gifts/Printf: https://jsfiddle.net/8Observer8/qsw7jtec/ gifts/SpecularCube: https://jsfiddle.net/8Observer8/z4xj9rbv/ gifts/TextTexture: https://jsfiddle.net/8Observer8/qt7q2kuf/ gifts/ThreeDUI: https://jsfiddle.net/8Observer8/zdw1f2st/ gifts/Wave: https://jsfiddle.net/8Observer8/eL9odthz/ gifts/WorldCoordinateSystem: https://jsfiddle.net/8Observer8/6utj3hnk/ appendix/CoordinateSystem: https://jsfiddle.net/8Observer8/dzz056jt/ Appendix appendix/CoordinateSystem_viewVolume: https://jsfiddle.net/8Observer8/apxLww1q/ appendix/LoadShaderFromFiles: https://jsfiddle.net/8Observer8/wdn9ubhj/

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?

There were countless threads like this. I've remade many shaders and i can help you after you make at least two tries those are our filters: https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters https://github.com/pixijs/pixi.js/wiki/v4-Creating-filters You need fullscreen mode, compatible with v3, "container.filterArea = renderer.screen". You also need to move uniforms to new format - just values, "type" is not needed. In case you don't actually need a filter content , its better to rewrite it to mesh shader: https://pixijs.io/examples/#/mesh-and-shaders/triangle-color.js The basic distinction - you need extra framebuffer? you don't know what framebuffer is? Don't use filter, use mesh shader, its simpler. Welcome to the forums!

Heroku and OpenShift. I use Heroku. You can connect Heroku and GitHub. Heroku will automatically reload files from GitHub when you push. Read this step-by-step instruction how to deploy on heroku: Getting Started on Heroku with Node.js | Heroku Dev Center Node.js, C++, C#, Java, or even C and Assembler - it does not matter because of network latency. But I like to use TypeScript instead of JavaScript. But Node.js has free hostings and it is more easy to start with socket.io You can use one language on server and client and you can share the same classes with server and client. I use TypeScript on server and on client and share some general code between them. I recommend to start with this article: http://buildnewgames.com/real-time-multiplayer/ You can run and test in two browser windows an example from the article that I upload on heroku: https://battle-world.herokuapp.com/?debug Source Code on GitHub of the example from the article: https://github.com/FuzzYspo0N/realtime-multiplayer-in-html5 This book shows how to write Tic-Tac-Toe and Snake Games with multiplayer using WebSockets and socket.io: Multiplayer Game Development with HTML5 This book is good but it uses WinSock and C++ with SDL2 for graphics but it is useful for general understanding of basic concepts how to compensate of network latency: Multiplayer Game Programming: Architecting Networked Games (Game Design) Or maybe this video is more simple to start: 1- Making Multiplayer HTML5 Game: Setup & Sending Files. NodeJs Tutorial Guide

I have a lengthy post in the showcase forum for those interested - we are in beta for our game GORILLA TOWN which uses PIXI, and pixi-spine. Props to Ivan P from PIXI.js for helping us on this forum multiple times! If you want to learn more about the game, we have a fancy marketing site: http://gorilla.town and, if you want to download and play the beta for windows (runs in electron), you can check it out here: http://gorilla.town/beta.html We love to hear any feedback you have. Thanks! Sean

Play Online: iStyleAvatarMaker.com Watch Trailer: Youtube.com/watch?v=X12VpKWksB0 Get Game + Art on ItchIO: Bellblitzking.itch.io/istyleavatarmaker#download Remix epic avatars online with over 300 new styles in this Avataaars expansion! Save & download your designs, plus get all art assets with the Portable Version. Generator has more gear, clothes, hairstyles, eyes, tones, hats and emotions! Fast design tool for comics, cartoons, personas, portraits, icons and illustrations.

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)

> I assumed that the displacement filter will add transparency to highly displaced areas and create this cool effect as in the first link. But it has a solid color non-transparent color instead. It brings pixels from edges. Three ways to fix: 1. add a transparency edge in your image 2. move image 1 pixel to the right-down and specify filterArea as "new Rectangle(0, 0, image.width+2, image.height+2)" - its absolute coords of area that gets filtered. Thus we'll have 1-pixel transparent edge around image, again 3. modify the shader that way it makes pixels transparent and not brings coords inside the UV. That's in case you familiar with https://github.com/pixijs/pixi.js/blob/dev/packages/filters/filter-displacement/src/DisplacementFilter.js and https://github.com/pixijs/pixi.js/blob/dev/packages/filters/filter-displacement/src/displacement.frag

Thank you for sharing. I think you have to find a good balance between earning money and annoying users. I didn't know we automatically changed level. It seemed to me that all the fields were drom just one level. If I were you I would put some fields by level (say 4 or 5) and after that I'd show the screen with all levels shiwing that yhe next one was unlocked. After user clicked in the unlock level to start playing again then ads would appear. This way users wouldn't think (wrongly as I did) ads were in the middle of the game play. You could monetize also with tips to complete fields. One option: if user watch a video ad until it ends (s)he wins 1 tip. Option 2: for US$ 1 it gets 10 tips. Option 3: implement options 1 and 2. This way users can complete levels they think are hard and you can earn some extra bucks. Of course, you should create many extra (and harder) levels. If you implement it I want 10% of profits by the idea

Also bookmark wiki , here's one of the pages: https://github.com/pixijs/pixi.js/wiki/v5-Hacks And the best document is the source code, if you are proficient with IDEs (vscode, intellij idea/webstorms), just clone this thing and open in separate window to search classes faster: https://github.com/pixijs/pixi.js . There are many places in PixiJS that are very stupid and easy to hack if you see that you need different behaviour.

Oh wow thanks! Looks like exactly what I need. Gonna bookmark that examples page...

> The question is what are the ways to implement it? I can't come up with any. It looks like our "examples" page is not visible enough in the web. 0. ColorMatrixFilter, but its a filter, it uses extra framebuffer and it can be slow for many objects. https://pixijs.io/examples/#/filters-basic/color-matrix.js Cheap solutions: 1. "tint" parameter:https://pixijs.io/examples/#/demos-basic/tinting.js 2. you can use https://github.com/gameofbombs/pixi-heaven1 plugin to tint both black and white : https://pixijs.io/examples/#/plugin-heaven/invert.js Welcome to the forums!

*sign* Like I said ... it was an obvious problem for sure... I had multiple copies of the same project and I was working on one and adding the images to another... Yes shame on me.... This thread can be deleted if you would like (or leave it for my shame ... forever... lol) Thanks for your the availability and willingness to help, @ivan.popelyshev

If you don't have any background about software development, it will be harder for you to achieve. You have to learn some HTML, CSS and JavaScript beyond game development concepts with Three.js. After learning some fundamental web development, threejsfundamentals.org is a decent resource to learn about Three.js & WebGL. There is already an example someone made a portfolio website just like you mentioned: https://bruno-simon.com He also posted a blog post about the whole process: https://medium.com/@bruno_simon/bruno-simon-portfolio-case-study-960402cc259b Another option would be to find someone to hire and make it for you. This is probably the most straightforward way to go.

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.

Merry Christmas!

OK, i edited it a bit and put here: https://github.com/pixijs/pixi.js/wiki/v5-Hacks#shadertoy-buffers

It seems the site is too slow since last month. Is this it or are people losing interest in HTML5?

This month, payment came even earlier, bravo!

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.

You can try https://electronjs.org/ I dont know about the best practices and methods as I haven't used it much, but its widely used

Welcome to the club!

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; }

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

What about you remove that hideous login-prompt at game.php and let us play the game? No offense but I thought this was quite obvious when you post something in the "Game Showcase" forum. I for one don't mind providing some feedback about the game, but to do so, I need to be able to play the game. 😛

Hi, guys! I develop HTML5 games and mobile games, in game engine Construct 2 and Construct 3. If you purchase any of my items - you will have full support! You can write to me at https://codecanyon.net/user/gmsdev#contact and i will answer you as soon as possible If you like my games, please rate them in ★★★★★ stars! :shocked: How To Order A Exclusive Game: You can also order a game, just email me - click on the button below We discuss the possible implementation of your game ideas on the engine Construct 2 / Construct 3 We discuss the terms and cost of work. I show demos on my server You pay for the work - we send the source You are the happy owner of a new exclusive game. About Engine: Construct 2 official manual Construct 3 official manual Games List: Games Bundles: 5 games in 1 bundle - 25% Discount 10 games in 1 bundle - 35% Discount 20 games in 1 bundle - 45% Discount 40 games in 1 bundle - 55% Discount 50 games in 1 bundle - 60% Discount

Maybe something like if(parent && parent.document == undefined) { window.top.location.replace('http://yoursite/game'); }

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

@pingu found the problem... it is related to Phaser texture creating. See method createTextureFromSource() (https://github.com/photonstorm/phaser/blob/master/src/renderer/webgl/WebGLRenderer.js#L1144) It sets wrap mode to CLAMP_TO_EDGE by default, which would be OK and no bleeding would be shown. But... if texture dimensions are power of two (which is your case), then it changes wrap mode to REPEAT. You can encounter imprecisions in GPU calculations, so your texture is drawn and small part is repeated - it is that bleeding. Your current sprite scale is 0.406, if you set it to 0.5, then calculations are little different and bleeding is not shown. If you animated scale, then bleeding would probably blink - sometimes shown, sometimes not. So, solutions are: - add extra padding around your shape as @bossikkk suggested. If you want to preserve texture size 512x512, then draw your shape 510x510 and leave 1px empty on all sides, - simply change dimensions of your texture to not be power of 2 - like add 1 empty line and column to make it 513x513 texture (this is OK for development, but I do not like this solution - not sure, but I have somewhere back in my mind, that some GPUs are adding extra space for non POT textures to force them to nearest POT - in your case it would be 1024x1024 with lot of memory eaten.)