Leaderboard

Play MP4 videos in your games. Download: https://www.panda2.io/plugins/video

Concept Artist for Hire Specialising in Environments and Keyframes I am an experienced concept artist in the Game and Film/TV industry. I specialise in environments, keyframes, architecture, creature design and characters. I am currently looking for long-term freelance projects but happy to do short ones too. Alternatively, I am happy to just do some black and white sketches or some colour grading/storyboarding/etc - just get in touch!I have included my work below and my website, please feel free to email me, message me on ArtStation or on Discord to discuss the project and rates.Website: http://www.elliejcooper.co.uk/ArtStation: https://www.artstation.com/elliejcooperEmail: enquiries@elliejcooper.co.ukDiscord: Ellie#8157Portfolio: (Please look at either my website or ArtStation for more, or for better quality).

Hello all, I started this project while ago and, like some many others, never got it finished. Since i think it's pretty playable and shows the capabilities of Panda 2, i would share it with you. Hope you like it! Play here! Tested with latest Chrome on desktop. Made with Panda 2 game development platform.

Ivan, I want to share with you how much I appreciate your work, Pixi is an incredible library, I never wrote anything on the forum but I used it extensively these last months and your suggestions / answers have been a huge help. Thank you for the kind words, I really appreciate, if you ever actually refer it do it with a bit of salt, I'm pretty sure my usage of Pixi can be improved, when I started writing the library I had no prior experience with it and I learned on the road. Nevertheless I'm quite honoured have a lovely day

Two of my games were made with Pixi.JS. Zapper.io This is a snake style MMO that I released about 2 days ago. It features procedurally generated creatures and uses various filters to visually enhance the creatures. You can find it at http://zapper.io Ninja.io This is a multiplayer shooter with 3 game modes(currently), lots of weapons and many different worlds. This project has been online for a while but I still consider it to be an alpha version. Play at https://ninja.io Ninja.io world editor The world editor for Ninja.io is also made with Pixi.JS. It has lots of features and I've used it to create all the ninja.io worlds. I plan to release a more user friendly version to the ninja.io community at some point. The most challenging thing was to get acceptable performance for Ninja.io. I eventually found a way to efficiently combine mesh triangles in the world editor. Due to limitations of the editor, earlier versions of Ninja.io rendered every mesh triangle as a separate mesh, but this incurred an unacceptable performance hit. There is probably still plenty of room for optimization here but I just haven't really delved into the depths of the Pixi renderer code yet. Thanks a lot for making it publicly available, and I hope to be able to contribute at some point!

Check this example:

Use this when you obtain temp webgl context. Unfortunately pixi webgl test context is hidden in js scope, so you have to create your own. gl.getParameter(gl.MAX_TEXTURE_SIZE)

Hello everyone, a few important comments here: 1. Bestgames is gamemonetize, I will not address their accusations as they add nothing to this thread and is just trying to defamate our image. 2. The report dashboard shown is probably a bug, you should contact us directly and we will fix whatever is needed. 3. Revenue drop: It is natural to see less revenues than nov-dec. I will explain why: this industry monetizes games with advertising. Advertising depends on demand (advertisers) and seasonality (periods people spend money). The beginning of the year you will always see less: impressions, ecpms, hence revenue. This is not our fault, but how the advertising industry works for decades now. If you are working with other partners, you will also see the same behavior. 4. Again on the transparence of our company: We recently aquired Spil games, top 1 player on web games for decades now, you can see the news here and in dozens of other sources: https://www.gamesindustry.biz/articles/2020-02-12-azerion-acquires-remainder-of-spil-games Working with Game Distribution has become even better now that we have the power of Spil games portals to provide your games more visibility. Please bear in mind that not all games will make money and work out, this is the same on every platform, not just the web. Quality over quantity is very important. We respect your decisions to discuss, expose and decide whether to work with us or not as long as we are having a healthy conversation around the gaming industry. We work with literally hundreds of game developers who are quite happy with us and I am proud to say our service has improved a lot since last year, and will still keep improving. Any questions or topics, you know where to find me. Iuri

Hi, I am trying to project a rotating 3d cube to a 2d space. I understand that pixi-projection should help me achieve this. Despite my efforts to try and find documentation, YouTube videos, go through the source code, search this forum, search the Pixi wiki on GitHub.com and reverse-engineer this demo https://gameofbombs.github.io/pixi-bin/index.html?s=flip&f=cube.js&title=Cube, I didn't get very far. Perhaps my struggle stems from the fact that I don't understand the terminology at play. Terms such as "affine", "euler", "focus distance" and "near plane" are foreign to me. I expect the pixi-projection API to allow me to define the position and orientation of my camera and the position and orientation of my subjects. I don't comprehend how the current implementation comes together to allow me to do this. For example what does the "setPlanes" method on the camera dictate and what are the expected parameters? Are there any resources which can ease me into the terms and the concepts at play so I can make better sense of the source code in the examples provided? @ivan.popelyshev Your guidance would be tremendously appreciated.

try it in dev. pixijs.download/dev/pixi.js or pixijs.download/dev/pixi-legacy.js If it doesnt work, please post the demo, because there are so many bugs with masks and there were so many fixed, I really dont have idea what can be wrong in your case. Yes, there can be a problem with bounds and moving stuff for extract. If switching to dev doesnt work - I recommend to render it in texture and then use extract, like i mentioned here: https://github.com/pixijs/pixi.js/issues/6498#issuecomment-604397290 (referenced in pixijs wiki, so its a valid doc) Nice picture btw!

Hello all, i'm making something like an image editor, and i would like to have a bi-cubic interpolation when scaling stage down, and nearest when stage scale is > 2, So instead of using PIXI.settings.SCALE_MODE, which doesn't support bi-cubic and i think it can't be changed after initialization, i decided to create my own glsl interpolation filters for the sprites i use to display the images. I disabled mipmaps, and created and applied a fragment shader like this: PIXI.settings.MIPMAP_TEXTURES = PIXI.MIPMAP_MODES.OFF const shader = new PIXI.Filter("", fragmentGLSL, uniforms); sprite.filters = [shader]; and i made a glsl nearest neighbor implementation (which i'm not sure if its correct) precision mediump float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform vec2 textureSize; //todo uniform float scale; vec4 nearest(sampler2D tex, vec2 texcoord) { float x = floor(texcoord.x) / textureSize.x; float y = floor(texcoord.y) / textureSize.y; return texture2D(tex, vec2(x, y)); } void main(){ gl_FragColor = nearest(uSampler, vTextureCoord * textureSize); } When i run this, i see some differences compared to default interpolation, but especially when zoomed in (stage scale), the interpolation is not nearest but almost exactly as the default (linear), but with a slow misplacement of pixels. It seems to me that whatever i do in glsl, the interpolation is still affected by PIXI.settings.SCALE_MODE. I can't understand it. Am i missing something here? thank you

Thank you so much, you know i've spend 5 days on this uvs problem. Now i will spend some hours to understand your fix and comments I've started with displacement filter, start read tutorials about shaders and glsl, spend 4 hours in the chrome debugger for try to understand how works uniforms and how are compute these damn uvs. And i've open all filters for found another one working with a external file, and yes i've found SpriteMaskFilter and read into it. And today i've dig in PIXI.Texture. But Matrix are still blurry for me. It's was a good reason for me to learn a bit shaders, this is a wonderful world. Finally all filters use webgl, no ? I prefer start at the root. i love see how thing works in the deep. Thank you for your kindness, i'll read all your stuff !

It's a very good game. I liked it. I got to about level 12 in one session.

YEAH, now I can refere to that repo all people who asked about python+pixi combo. Maybe I'll move one python console game to pixi thanks to you

Here's the plugin for it: https://github.com/pixijs/pixi-layers You can see "z-index" word in examples and use it with CTRL+C but I advice you to go through the README. Layers are better than z-index. 1. You might even not need to set numbers for z-index 2. Its clear how masks and filters work in those elements.

> I've had a look through the interaction manager docs https://github.com/pixijs/pixi.js/blob/dev/packages/interaction/src/InteractionManager.js First time I hear about that. No workarounds

I just want to THANK YOU, Exca. This post will help me a lot ! 😊

Hello I use PIXI.Shader and PIXI.Filter and pixi v4.8.6 (i know it's old i can't update for now) Thus, i try to make a color transparent, my shader works with PIXI.Filter, but not with PIXI.Shader. I think i've miss something in PIXI.Shader but i don't know what. I hope make this purple transparent with PIXI.Shader instead PIXI.Filter, because shader have better performance, and i use shader already with other thing, so i avoid to create conflict. Shader: sandbox code (don't works) Filter: sandbox code (works) For curious i use it for GDevelop5, we use PixiJS, and we have also bounty $115 on an issue with pixi (font text). I let you take a look on gdevelop repo. Thank you for reading me.

I guys it should be "sheet.spritesheet.animations" Its javascript, there are no types, only IDE intellisense. My recommendation - learn how to use debugger. Look for places where "undefined" was found. Without DevTools debugging, breakpoints, watches, profiling you wouldn't be able to make any production app. Easy fixes like that should be obvious. You dont have to remember all the pixi documentation and examples, and those docs also wil lie to you about some things - so you really should learn how to debug.

Thx oh...Turned out to be used... "1 / 60 * delta" or "ticker.deltaMs" This can do what I want! Now I use the following code instead. He should be fine. const seconds = 0; app.ticker.add(delta => { seconds += (1 / 60) * delta; if(seconds >= 0.5 ){ console.log('alert!'); } }); but...pixi-timer I don’t understand how to use? Because I will update the screen through time judgment during recycling. Finally thank you @ivan.popelyshev

OK, here's basically what you have to do: 1. Prepare a sprite for every textures of your favorite size. 2. make grid of those sprites. 3. render them on RenderTexture (calculate size needed) 4. make partial textures out of it. "new PIXI.Texture(renderTexture.baseTexture, new PIXI.Rectangle(x,y,w,h));" 5. Use those 100 textures for your giant amount of sprites.

I think I pointer you to my example: https://codesandbox.io/s/app-architecture-3-j0di5 Basic idea is to separate app "facets" and link them all through app, using runners to send global events between them. Facets can access each other functions - so it really isn't some kind of reactive programming, its just basic separation.

Welcome to the forums! "1 / 60 * delta" or "ticker.deltaMs" https://github.com/pixijs/pixi.js/blob/3ffe52d29aedd79a5a281b4a6032e7c95f5ea98c/packages/ticker/src/Ticker.ts#L493 PixiJs does not have a scheduler, only a basic ticker for RAF. Here's scheduler in a plugin https://github.com/Nazariglez/pixi-timer/ As far as I remember, its detached from PixiJS enough to work with anything >3.0.8 , even with v5. In case you use modern es6 modules, you PIXI in global scope for it to work (like for other pixi vanilla modules, https://github.com/pixijs/pixi-layers#webpack-browserify-angular ) As usual, explanation why dont we have those functions in main package: we really care about size of our packages and dont want to force users on using our API's for trivial things. We provide renderer expertise.

Ah okay, then I will try to work with SimplePlane and if I can come up with a short example I will make a PR. Just wanted to check with somebody who is more experienced with PixieJS. Thank you for the heaven mesh example. Looking forward when it becomes available in v5. I have not much experience in porting stuff but if I can assist you in any way, let me know

Suppose you have a invisible canvas with that game somewhere on page. create a texture out of it : "Texture.from(outerCanvas)" , use it in a sprite (same as "Sprite.from" actually). every frame you should 1. call render of that game 2. call "texture.update()" of that texture you made from canvas 3. call pixi render. If you are lucky, simple "app.ticker.add(() => { texture.update(); } )" should work , if not - study how to make your own application or add a handler before pixi renders: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop, . Maybe "app.ticker.add(() => { outerGame.render(); texture.update();} )" works, maybe you'll have to put it all in "render" method of your application, i dont know, you should debug it. This "convert other canvas to texture for our renderer" trick should work and have good performance everywhere except Edge (old edge, not chromium edge). You cant pass iframe there, but if you somehow get access to canvas - yes, it should work because PixiJS has Canvas->Texture convertor in "CanvasResource" thingy, I mentioned resources in first post.

I have explained my technique in some detail at https://www.gamedev.net/blogs/entry/2268999-a-simple-way-to-generate-limitless-terrain-in-real-time-in-plain-html5javascript/

Hi Ivan, thanks a lot for your quick answers. I'll check your batchrenderer exemple it looks very interesting for my problem.

Maybe I and @eXponetacan help if you provide minimal demo in a zip file. We'll host it on server ("http-server -c-1" as default node-js server) and look if its actually something possible. Without minimal demo there are just too many things that can go wrong and we'll get stuck in it.

Welcome to the forums! You are lucky, because right now in v5 we have exact solution for the problem. Yes, pixi gives you ability to make your geometries and even re-use them (like you did), but still, count of drawcalls can be a problem! If you capture one frame with SpectorJS you'll see a problem ( I didnt do it but probably there are too many drawcalls). So, PixiJS actually exposes its batchrenderer! It fills up one geometry for many objects every frame. Demo is here: https://www.pixiplayground.com/#/edit/CMKvgOt-bvlCG4QHdswIP . We didnt add it to examples yet, but we really should do it because of people like you who need it. The idea is to specify "pluginName" for Sprite, Graphics or mesh material. Sprites are always batchable, but in case of Graphics and Meshes you have to make sure isBatchable gets set to "true" so instead of shader pixi pushes data to batcher in `renderBatched` function. Something like that. In your particular case, Sprites are enough, so you dont have to think about what I said in previous line The downside - you have to to tint and other stuff in attributes instead of uniforms. Tint is already handled in demo, so in your case you need extra attribute field for "ratio".

Thanks for your prompt and helpful response Ivan, I've been following you for a long time and still look forward to your assistance. I actually used a canvas element to create my game but due to the fact that I had to download another game on the section from iframe to display on my game, it interacted back and forth. between the 2 canvas elements of the game and the iframe closely. But the iframe is just a DOM element so I don't want to use it. I just want to put this iframe element in the same canvas as my current game so I can manage it best. I used from () to display a video element and it was successful but it was really difficult to load it as an iframe.

from() accepts anything. PDF, SWF, html, anything! The only problem is that you need to make a Resource for that element and code logic how to handle it. This one is for HTML VideoElement: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/VideoResource.ts , and here it is being added: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/index.ts#L29 . You just have to make your own magic implementation of test() and other things! You can even write your own webgl code to upload stuff! However, I actually doubt that you can do it with iframe at all. I would choose other method - position iframe element with specific affine transform that can be taken from sprite element after its updateTransform()-ed. AccessabilityPlugin does something like that to position edits on top. In case you dont understand what i'm saying , I recommend to learn PixiJS examples, read wiki https://github.com/pixijs/pixi.js/wiki/v5-Hacks , clone PixiJS repo and open it in searate IDE window, experiment with different things and forget about IFrames before you actually learn what PixiJS can. > it will not be able to edit that it will display in order, currently it is always on top of the game. Oh.. and now I have a feeling you dont understand what canvas is and how it actually works. Its array of pixels. It cant show DOM elements "inside". It cant process DOM at all. Maybe you should look in other renderers which use DOM tree and not canvas.

Hello everyone,, I think that HTML5 games could go somehow viral as Flash games do, but it would require developers to provide the whole game file (not just iframe). Will you be willing to provide the game files for free distribution? It works really well in Flash market - hundreads of portals publish your game and you recieve from tens of thousand to millions of impressions. Every publisher who wants mobdrolucky patcherkodi your game have two options - publish your game for free (including your/sponsors branding and ads) or buy sitelock for you. It's a bit harder for publishers to get your game files, but you can fix that by simply adding "download this game" button leading to your website (generating additional revenue). I will try it with my first game (once its done) and share the results.

Hi everyone I took a project which is game development. I have not done game development before. It is not complex game, I was planning to use react with pixi.js to achieve my goals. Since I don't have any experience with pixi.js I would to hear your opinions about whether it is wise choice to make this game using pixi.js with react. Let me explain the game a bit. It will be a dart game. First we have configuration screen where user will select game type, target, player information. After setting up these things user can start the game. This is hard the hard part. Each game type can have different designs. There will be animations which shows which player's turn is. After player throws we will have to decrease player's point and show where it landed on dart. These are example videos and images similar to what I need to achieve. Is this something doable with pixi.js or should I take a look at some game frameworks out there? dart3.mp4

Add transparency between sprites. Pack it with texturePacker or any free tool available. Coding solutions are too big to be included in open-source lib by default, you have to do it yourself. Use custom fragment shader that clamps texture coords like https://github.com/pixijs/pixi-tilemap/ does it. If your case is actually tilemap - just use the plugin itself! If you need intro to pixi shaders, here it is: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js https://www.pixiplayground.com/#/edit/--OBWFscGUsLwgex5VugD - not included in official examples yet. How to make custom batch shader for Graphics and Sprites. Put extra info in vertices, your texture frame, clamp it later. SpriteMaskFilter should help you understand how to get that info: https://github.com/pixijs/pixi.js/tree/dev/packages/core/src/filters/spriteMask , and here's where pixi-tilemap uploads texture info: https://github.com/pixijs/pixi-tilemap/blob/master/src/RectTileLayer.ts#L257 If you are overwhelmed by info about shaders - just add the transparent line between sprites in your atlas In case you use mipmapping - you need bigger padding, depends on the scale you use. Dpwn to 8x - then it should be 8 pixels.

Yeah, it's just hard for me to know what is possible with my stage in development. I'm always worried about spending hours on something which is an obvious dead end to someone with more experience. I am reading through the source code more and it is helpful and I have gotten used to reading the API docs which is awesome, but there is still a lot of experience I need in order for the source code to be as helpful as I know it can be. That will come in time. I'm learning a ton through this project and this community!

If you dont sort through several containers - you dont need pixi-layers, basic v5 sorting should work (look sources of PIXI.Container). If you want to observe coord changes - learn how "Container.updateTransform" and "Transform.updateTransform" work. There are no true observables in pixi but we have updateID's which are faster but cant be explained without going through all the code." Really, after that question you have to clone pixi and open it in separate IDE window to watch sources of classes (learn the shortcut of how to find class!) every time you have questions. That will provide you answer faster or give you enough material to make your question more specific.

@ivan.popelyshev Thx a lot! It worked.

Since I always loved playing bomberman as a kid, I decided to make an online multiplayer clone of the game using Phaser. I've called it "Bomb Boy Online" but it pretty much plays like the classic bomberman games. You walk around, place bombs, and try to blow up the other players. You can get various powerups that can increase the blast radius of your bombs, the number of bombs you can hold, and your speed. The game contains a lobby where you can host/join games. Up to 8 games can be in session at the same time. Here's a link to the game: https://limitless-brook-9339.herokuapp.com/ Source code: https://github.com/ahung89 Here are some screenshots of the game:

I will give my best I can always ask girlfriend to help with.... 😄 More and more people get involved in this project. Hope I can share with you guys how that will look at the end. It is not game, just website, but I wanted to approach it differently and challenge myself, since it is portfolio. Thanks again 😊

@callidus using velocityFromRotation looks right but what is the line below it for? // this looks right game.physics.arcade.velocityFromRotation(player.rotation, 400, bullet.body.velocity); // what is this for? bullet.body.velocity.y = -400; I don't think you need that second line. I have an isolated demonstration of the concept here if that might help: https://blog.ourcade.co/posts/2020/fire-bullets-from-facing-direction-phaser-3/

Welcome to the forums

I am testing out my game on iOS, and I have a 8-directional virtual joystick overlayed on screen (a circle divided into 8 slices), and am using pixi's interaction manager for pointerdown/pointerup/pointermove events to handle touch events for detecting which direction is currently being touched... So as I am playing in full screen (iphone rotated in landscape mode), I am sliding my thumb around this "wheel", and Safari thinks "oh! GESTURE!!!".. and then all of a sudden, a scroll bar appears and the url bar comes into view-- totally ruining the experience of my game.. And then as I continue to try to play, iOS is like "OH GESTURE!!!" and then a notifications panel comes down and covers half of the screen.. and then I throw my hands up in the air and ask myself, did I make a terrible mistake trying to make a browser based game, because this behavior is literally ruining everything... Is there any way to "prevent default" on these events to stop this horrible and obnoxious behavior?

I also have bad experiences with GameDistribution. Firstly pays miserable or never, with outages several months and cheats publishers with redirecting traffic to their own site kizi.com (60% traffic to kizi.com comes from their API). As wrote @arcadeset Very low earnings (70% almost 90% drop) in last months, and they are also banning websites without any warning and then redirecting all traffic to Kizi.com. When you look at similarweb there you can clearly see that 60% traffic to kizi comes from html5.gamedistribution redirects, this means that they redirect all traffic from publishers which don't use their code, ban your website and redirect to website kizi.com = free money for them. Why such scams? I think traffic belongs to the owner/publisher not to your website kizi.com. It is illegal enrichment. "We recently aquired Spil games" - I don't understand how anyone believes you, because if you dont pay developers many months or sometimes send earnings after 90 days, then you have a kind of overdraft respectively bank loan from other publishers / developers and advertisers. So you buy companies for money from publishers and developers as overdrafts or from business loans, truly this is most disturbing. I think everyone understands that if you hold money for 90 days, you have enough time to keep the money in your pocket and use it as an overdraft. In addition, if the publisher doesn't place your ads.txt code, your developers without any warning redirecting all traffic to Kizi.com or trying to show banner ads throught your gamedistribution API to cheat the publisher, this is intentional stealing traffic from publishers and cheating in revenue. I think that right now is Gamedistribution worse choice for the publishers. Once you don't obey them, all traffic and profits will go to them. This is a striking and very disturbing situation. eg: This mean what? Cheating with display ads instead AFG video ads for games or your scam Improve Digital advertising agency? Where are a video ads or game ads? You just display normal banner ads in your own ad player. Additionally you go against Google policy and your partners. You violate Google's rules the same goes for your company Improve Digital, which lies in all directions - what is transparency, what is clear revenue? Without the publisher's permission or any warning, gamedistribution will start displaying banner ads in their fake ad player to maintain their revenue. So a new kind of cheating? I hope everyone who's not stupid understands what they're doing. I think Gamedistribution is from now worst choice for publishers. Gamedistribution just want your money, nothing more. I'd rather use other game distributors. Gamedistribution never again.

Overflow:hidden is also a frequent guest there: https://github.com/ivanpopelyshev/pixi-starfighter/blob/master/css/index.css

Hello and welcome to the forums! Its not a pixi problem, its a CSS-canvas . just set padding and margin of body to 0

He hasn't responded with a result. I'll add this update. Thanks again for the update.

That's a problem for everyone, and every game developer must face it for their maturity, that's why PixiJS doesnt have built-in solution for it. If you learn how resize works, and how stage transforms (scale) work, if you know how CSS works - you can find a solution for your case. A few options: 1. fixed canvas size (that you pass into application), only css resize, browser handles how canvas is displayed. you dont need any scales on pixi side, but quality can suffer a bit. 2. resized canvas to fit/enlarge/whatever, set stage scale too. you dont need to change pixi elements coords, but you have to correctly handle mouse events, you cant just take global mouse coords and use them in world, toLocal(stage) will help you. 3. canvas always same size as screen, and you change layout of your game accordingly. Old pixel games should do it. Pain for UI and game design, but in many cases its better than 1 or 2. In cases 1 and 2 its your choice whether to stretch, fit or enlarge it. Summary: its easy to do if you decide what you want, and its great exercise for people. There's no best solutions on that, and we dont want people to just assume everything is easy in html5 gamedev. You have to go through it.

Correct. Animations and such should always be based on time rather than frames to ensure things occur at a consistent speed regardless of fps. You'll often see 'delta' used in rendering engines. Some have delta as 'the amount of time passed since the last time an update occurred' and some have it as a number which has '1' running at normal speed, and '2' meaning the engine is running at half the fps. Then you can multiply the delta by your movement amount and voila.

Here it is, a small System Text plugin with 3 features: 1) typewriter effect 2) strokeColor (border) 3) example how to use gradient colors with systemText in Panda. Please note that I included a custom font in the project to achieve the second and third example. See the demo project for files ans details at: https://github.com/stephanvermeire/systemtextplugin Quick example (typewrite effect not working here because it is a static image): systemtextplugin.js game.module( 'plugin.systemtextplugin' ) .require( 'engine.renderer.text' ) .body(function() { game.SystemText.inject({ /** Enable typewriter-effect @default false **/ typing_effect: false, i: 1, /** StrokeColor of the text. @property {String} color @default #000 **/ strokeColor: '#000', /** Width of the text stroke. @property {Number} color @default 0 **/ lineWidth: 0, _renderCanvas: function(context) { var wt = this._worldTransform; context.globalAlpha = this._worldAlpha; context.setTransform(wt.a, wt.b, wt.c, wt.d, wt.tx * game.scale, (wt.ty + this.size) * game.scale); context.fillStyle = this.color; context.font = this.size * game.scale + 'px ' + this.font; context.textAlign = this.align; context.strokeStyle = this.strokeColor; context.lineWidth = this.lineWidth; if(this.text === undefined) return; var lines; if(this.typing_effect){ lines = String(this.text.substr(0, this.i)).split('\n'); if(this.i <= this.text.length){ this.i++; } }else{ lines = this.text.split('\n'); } for (var i = 0; i<lines.length; i++){ context.fillText(lines[i], 0, (i*this.size) ); if(this.lineWidth){ context.strokeText(lines[i], 0, (i*this.size)); } } } }); }); main.js game.module( 'game.main' ) .require( 'plugin.systemtextplugin' ) .body(function () { game.createScene('Main', { init: function () { //typewriter demo new game.SystemText('Lorem ipsum dolor sit amet,\nconsectetuer adipiscing elit.\nSed posuere interdum sem.', { size: 50, x: 0, y: 0, typing_effect: true, }).addTo(this.stage); //custom font with strokeColor new game.SystemText('Lorem ipsum dolor sit amet,', { font: 'SoSweetHoney', // align: 'left', color: '#2d963b', strokeColor: '#a2e65e', lineWidth: 2, size: 50, x: 0, y: 300, }).addTo(this.stage); //gradient font color const color = game.renderer.context.createLinearGradient(0, 0, game.width, 0); color.addColorStop(0, "#f47c35"); color.addColorStop(1, "#e6e650"); const strokeColor = game.renderer.context.createLinearGradient(0, 0, game.width, 0); strokeColor.addColorStop(0, "#a2e65e"); strokeColor.addColorStop(1, "#3577ca"); let test = new game.SystemText('Lorem ipsum dolor sit amet!', { font: 'SoSweetHoney', lineWidth: 2, size: 50, x: 0, y: 500, }).addTo(this.stage); test.color = color; test.strokeColor = strokeColor; } }); }); index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Panda 2 - SystemText</title> <link rel="stylesheet" href="style.css" media="all" /> <script type="text/javascript" src="src/engine/core.js"></script> <script type="text/javascript" src="src/game/config.js"></script> <script type="text/javascript" src="src/game/main.js"></script> </head> <body> </body> </html> Note that you have to include the fonts directory as well as the style.css file in your project to make the custom font work!

Found it here: http://labs.phaser.io/view.html?src=src\physics\matterjs\offset body.js Case closed.