Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Search the Community

Showing results for tags 'pixijs'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





  1. I created an app using PixiJS. I set height and width for the PIXI.Application. I added containers which are having the graphics relevant to my application. When I draw those graphics some of them are go beyond the boundary limit of the application. When I render the application it's totally fine. Only the application area get rendered without the graphics which drew beyond the boundary limit of the app. Though when I get an image from the application using the following code, the graphics which drew beyond the boundary limit of the application are also available in that image. this.pixiApp.renderer.plugins.extract.image(this.pixiApp.stage, 'image/jpge', 1) How can I download an image only containing the graphics which are available within the app boundary limit.
  2. I need to improve the smoothness of the curved lines which are drawn using PixiJS. When I set the antialias=true, the rendered application would be handy with the smooth lines. Though when I download the rendered segment it seems that the curved lines are not smooth as the rendered one in the web page. Is there a way to improve the smoothness of curved lines in downloaded image. I use following method to download image this.renderTexture = PIXI.RenderTexture.create( { width: this.pixiApp.screen.width, height: this.pixiApp.screen.height, resolution: this.pixiApp.renderer.resolution }); this.pixiApp.renderer.render(this.pixiApp.stage, this.renderTexture); return this.pixiApp.renderer.plugins.extract.image(this.renderTexture, 'image/jpge', 1);
  3. Hi, i need help to convert a shadertoy filter (https://www.shadertoy.com/view/7tsfWS) to newest pixijs version filter. Somehow my canvas stays black and i dont know what i do wrong. I prepared sth on pixiplayground: https://www.pixiplayground.com/#/edit/av3kcgJuH2ISiPpSmz4uI Thx already in advance for the help ๐Ÿ™‚
  4. Hello everyone, I am a student from Vietnam. I bump into some issues on my very first step into Pixi JS and it was two days that i cannot find a way to make it work. Therefore, i decide to seek for help and it means a lot to me if you guys can give me some advices about my problem. Thank you all in advance. My idea is very simple. I want to load an image and trigger some events when the image start/finish loading, then display it on the canvas. My image path is an URL. My problem is: - the resources doesn't include the texture property (but when i download the image, save it locally and use a local path instead of URL, the texture property appears) - it works when i use Sprite.from(url) but i cant attach events when start/finish loading like using loader Wish you have a nice day sir and stay safe canvas.html
  5. Hey! I have to make some particles to only "run" for like 2 seconds. The problem is that i dont know how to set the duration of it. Do i have to use tickers? Can i have ticker for every particle? And i found out that i can use containners to place particles in a group. Can i still move them one by one? My goal is to do something like this but for like 2 seconds and i cant find out how to make the particles to be up for that period of time :
  6. Hi! Maybe someone could help with a freeze of an animation while we loading/preloading textures. There are background and several big animations. After scene have started to change and transition animation have started, main container is cleared and new background with different big animations are added. This freeze is connected with scene rendering. Does somebody know the way to deal with this problem? ======================= Version pixijs 6.2.2 ======================= Application virtual_h = 2276; virtual_w = 1280; render = PIXI.autoDetectRenderer(virtual_w, virtual_h, { resolution: window.devicePixelRatio, autoResize: true, antialias: false, }); gameContainer.height = virtual_h; gameContainer.width = virtual_w; document.getElementById("game").appendChild(render.view); ======================= Animation let animationRaw = PIXI.Loader.shared.resources["animationRaw"].spritesheet.animations["animationRaw"]; let animation = new PIXI.AnimatedSprite(animationRaw); animation.autoUpdate = true; animation.loop = false; animation.onComplete = function() { animation.stop(); }; gameContainer.addChild(animation); ======================= Preload render.plugins.prepare.upload(gameContainer); ======================= Ticker ticker.add(function() { render.render(gameContainer); }); ======================= Switch a scene gameContainer.removeChildren(0, gameContainer.children.length); let animationRawNew = PIXI.Loader.shared.resources["animationRawNew"].spritesheet.animations["animationRawNew"]; let animationNew = new PIXI.AnimatedSprite(animationRawNew); animationNew.autoUpdate = true; animationNew.loop = false; animationNew.onComplete = function() { animationNew.stop(); }; gameContainer.addChild(animationNew); =======================
  7. Hello friends. I need a little help in my project. I have array of images with id and url. any part of those images can be rendered in different occasions, based on user filtering. I have custom resource manager which saves all downloaded images (or failed downloads) with id and resource returned by PIXI.Loader, and for each new image checks if texture is already available, if not adds id and url to Loader and loads. Now my problem is that image array itself is also user defined, so url's might be incorrect or duplicate. If there's two images (two different IDs) to be displayed and they have same url, I technically dont have them downloaded because I'm checking with id and they have different id, so I'm adding both to the Loader resource and load. I dont know how loader handles that but it throws this warning: BaseTexture added to the cache with an id [image url] that already had an entry Warning itself is not big of a problem, but I think loader still downloads the image twice and then tries to cache it, and then is this warning thrown. so I dont want download to be performed twice when I know that i already have a texture (or will have with different resource I guess). Can anyone please help me. I dont even know what can be the correct fix in this case, let alone how to do that
  8. Hello, i'm trying to do a color picker with pixijs v6.2.0 It's work almost, but i have a problem when i have a rotating sprite on the ledge of the stage, because that change dinamicaly the width and height stage, but don't change the x and y position of others sprites in the stage. Exemple 1: The mouse down event is set on the stage https://jsfiddle.net/Marodheure/gzytp4hr/94/ If you comment the line 53 (for the sprite rotation) in the javascipt tab, that will work. Exemple 2: The mouse down event is set on a sprite, and the readpixels too, to avoid to have not fixe dimensions, but that does not work too, but i don't know why https://jsfiddle.net/Marodheure/dtLsj0b1/40/ You can click to see in console the resulting: x y, width height, rgba Thank you for reading and helping
  9. Become a part of our unique success story! More than 500 million people have already played our next-gen instant games. Join us and unleash your superpowers to build the future of gaming! SOFTGAMES is looking for a JavaScript Game Developer to help us bring our games to new Instant Game Platforms that will entertain tens of millions of people every month. The JavaScript Game Developer designs, architects, tests and implements features into our live games. Further you'll work on bringing our games to existing and upcoming Instant Game Platforms. You will collaborate with producers, artists and other game developers to share learnings and best practices. The JavaScript Game Developer will ship robust and high-performance code, be passionate, and act as a fount of knowledge when it comes to game development. As part of a small, experienced and dynamic team you will enjoy a creative, challenging and collaborative environment. You can either work REMOTELY or in our central Berlin office surrounded by a great bunch of people! **Qualified applicants will be expected to complete a technical assessment. Your role: Write robust code to be used by millions of users Maintain and optimise features of existing Instant Games Develop and integrate different platform SDKs Independently create complete solutions from scratch Work on schedule, set clear goals Share knowledge and help colleagues Your profile: Great passion for games! 3+ years of professional software engineering experience Strong knowledge and experience with JavaScript (HTML5) Knowledge of TypeScript or another language with static typing Profiling and optimising JavaScript/TypeScript code Node.js CI/CD Experience with build systems (e.g. Webpack or gulp), PixiJS, Phaser Shipped at least 2 mobile/social title, preferably on multiple platforms Ability to quickly get up to speed with existing code Deliver high-quality and well-structured code Open-minded and keen to learn What we offer: We have a flexible working setup - either fully remote or on-site in central Berlin. Your choice! Working and living in Germany has many advantages as e.g. a high job security, great work-life balance and one of the best universal health care systems in the world! Further our Berlin full time employees benefit from: Visa: Our visa assistance service guides you through the whole process and helps with tips and tricks to get the approvals and your visa as fast as possible. Relocation Support: We support your move to Berlin with e.g. flat hunting, paper work like local registration, setting up bank accounts etc. Language classes: We pay your German lessons so you can order food auf deutsch very fast and go right up to perfecting your business vocabulary. Further training: A personal learning budget to spend on learning and development, including books, workshops, etc. Flexible working hours and home office: Productive hours differ individually. Thatโ€™s why you're welcome to show up in the office whenever you're ready for it. Need to watch the kids or wait for a handicraftsman? No problem - we also offer the opportunity for home office. Office: A super modern office with state of the art tech, based in the center of Berlin, quickly to reach from all destinations thanks to the excellent public transport connections. Equipment: Choose between a MacBook Pro or Windows Laptop. Furthermore our office features the latest projectors, cameras, testing devices, monitors - you name it. Fresh fruits, snacks and drinks: Enjoy fresh fruits, free coffee and a fully stocked fridge with cold Water, Juices, Coke, Club Mate, Beer etc. For the sweet-toothed we have snacks, chocolate and chips of course. Epic company parties: Regular company parties to celebrate, including Summer Party, Oktoberfest, Christmas Party. Team events: We have regular Casual Fridays, Board Game Nights, Pub Quizzes, Team lunches, Company breakfasts and much more โ€ฆ Team spirit: Beyond our amazing parties and company events, the team further organizes activities themselves such as playing soccer together, a cooking group, a Japanese learning group, and much more. About SOFTGAMES With offices in Berlin (HQ) and Toronto, SOFTGAMES is an instant gaming company. We develop casual, truly social games that can be played instantly across all devices. We partner closely with Facebook, Samsung and more to craft the next generation of instant games that billions of people can play together. To-date, more than 500 MM people have played our games on Facebook, including Cookie Land, Solitaire Story Tripeaks, Mahjong Story, Space Invaders, Fish Story, Bubble Shooter or Candy Rain. At SOFTGAMES, we believe that different perspectives and background in our teams contribute to the quality of our work. We value diversity and therefore welcome all applications - regardless of gender, nationality, ethnic and social origin, religion / worldview, disability, age as well as sexual orientation and identity. Have we caught your interest? Then we look forward to your detailed application together with your salary expectations and earliest possible start date.
  10. Hello All, I am having an issue with loading spritesheets. I coded up an example that works great in code sandbox but it does not work in my development environment (code is identical). Both are using recent versions of Pixi but the repo version uses Parcel to host. The repo example has a promise error and cannot find the texture. Just not sure where to go from here. Thank you for your time. sandbox https://codesandbox.io/s/pedantic-surf-0kdci repo https://github.com/420visions/spritesheet_issue npm run dev to build example
  11. I am trying to do something very simple with PIXI and Typescript. I decided to switch to using texture packer from loading individual png files and ran into this issue. The issue is when trying to access the texture that is loaded through the spritesheet json file I get a promise error. The code is very simple and I have tried various ways of doing this with no luck. This example is the simplest and uses the example from CodeAndWeb (Texture packer devs site) but in an attempt to translate it to typescript and separated the functionality a bit. Any advice is highly appreciated. Thanks. import { Container, Sprite, Graphics, Texture, Spritesheet } from "pixi.js"; import * as PIXI from "pixi.js"; // This example is based on the following // https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs5 export class Game extends Container { static GAME_WIDTH = 320; static GAME_HEIGHT = 568; private static _instance: Game; public app: PIXI.Application | undefined; constructor() { super(); window.onload = (): void => { this.createRenderer(); this.addAssets(); this.startLoadingAssets(); }; console.log('Game Constructed'); } public static getInstance(): Game { if (!Game._instance) { Game._instance = new Game(); } return Game._instance; } private addAssets(): void { PIXI.Loader.shared.add('game', '../assets/game.json'); console.log('Assets added'); } private startLoadingAssets(): void { PIXI.Loader.shared.onComplete.add(() => { this.onAssetsLoaded(); }); // PIXI.Loader.shared.onComplete.add(this.onAssetsLoaded); PIXI.Loader.shared.load(); console.log('Loading assets'); } private onAssetsLoaded(): void { let sprite = new PIXI.Sprite(PIXI.Texture.from("backBoard.png")); // let sheet = PIXI.Loader.shared.resources["../assets/game.json"]; // let sprite = new PIXI.Sprite(sheet.texture['backBoard,png']); // this.app?.stage.addChild(sprite); console.log('AssetsLoaded'); } private createRenderer(): void { this.app = new PIXI.Application({ backgroundColor: 0x001320, }) document.body.appendChild(this.app.view); console.log('Renderer Created'); } public initialize(): void { console.log('Game initialized'); } } json looks like this {"frames": { "backBoard.png": { "frame": {"x":1,"y":1,"w":318,"h":442}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":318,"h":442}, "sourceSize": {"w":318,"h":442} }, "buttonDisabled.png": { "frame": {"x":321,"y":340,"w":30,"h":30}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30}, "sourceSize": {"w":30,"h":30} }, "buttonDown.png": { "frame": {"x":353,"y":344,"w":30,"h":30}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30}, "sourceSize": {"w":30,"h":30} }, "buttonSmallDisabled.png": { "frame": {"x":395,"y":224,"w":22,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22}, "sourceSize": {"w":22,"h":22} }, "buttonSmallDown.png": { "frame": {"x":395,"y":248,"w":22,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22}, "sourceSize": {"w":22,"h":22} }, "buttonSmallUp.png": { "frame": {"x":395,"y":272,"w":22,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22}, "sourceSize": {"w":22,"h":22} }, "buttonUp.png": { "frame": {"x":321,"y":372,"w":30,"h":30}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30}, "sourceSize": {"w":30,"h":30} }, "coin.png": { "frame": {"x":368,"y":311,"w":31,"h":33}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":31,"h":33}, "sourceSize": {"w":31,"h":33} }, "logo.png": { "frame": {"x":321,"y":213,"w":125,"h":45}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":125,"h":45}, "sourceSize": {"w":125,"h":45} }, "meter_big.png": { "frame": {"x":321,"y":100,"w":92,"h":47}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":92,"h":47}, "sourceSize": {"w":92,"h":47} }, "meter_small.png": { "frame": {"x":368,"y":213,"w":43,"h":25}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":43,"h":25}, "sourceSize": {"w":43,"h":25} }, "meterDisplay.png": { "frame": {"x":321,"y":149,"w":89,"h":49}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":89,"h":49}, "sourceSize": {"w":89,"h":49} }, "meterDisplayBig.png": { "frame": {"x":321,"y":1,"w":97,"h":97}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":97,"h":97}, "sourceSize": {"w":97,"h":97} }, "meterMinus.png": { "frame": {"x":368,"y":258,"w":25,"h":25}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":25,"h":25}, "sourceSize": {"w":25,"h":25} }, "meterPlus.png": { "frame": {"x":368,"y":285,"w":24,"h":24}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":24,"h":24}, "sourceSize": {"w":24,"h":24} }, "peg.png": { "frame": {"x":399,"y":200,"w":11,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":11,"h":22}, "sourceSize": {"w":11,"h":22} }, "target_guide.png": { "frame": {"x":321,"y":200,"w":11,"h":76}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":11,"h":76}, "sourceSize": {"w":11,"h":76} }}, "meta": { "app": "https://www.codeandweb.com/texturepacker", "version": "1.0", "image": "cheenko.png", "format": "RGBA8888", "size": {"w":419,"h":444}, "scale": "1", "smartupdate": "$TexturePacker:SmartUpdate:507f67780e7f85c65d491493063f25f9:181b9d624fffd3a88b16c67d21e19ad7:3dbd62212b1a89304e8d06008f40f33d$" } } Code Sandbox link https://codesandbox.io/s/empty-hooks-9g8j6?file=/src/index.ts
  12. I am not recruiter. I am 100% dev. location is in Bank, London, UK. full time permanent role 1. At least three years of front-end work experience in game industry. 2. Familiar with PixiJS, Typescript, Javascript, Git, Greensock and NPM 3. Good at team communication and coordination skills, pressure-bearing ability and learning ability Pls feel free to send me message.
  13. Hello friends. My first post here. So, I'm working on a small project with around hundred images on big ViewPort. I have basic drag-and-drop functionality of images and I'm using manual requestAnimationFrame to render stage only during image dragging. Now I need to add drop-shadow on all Images. I have tried @Pixi/filters-drop-shadow package by bigtimebuddy but during dragging it significantly drops frame rate. Can anyone please suggest any other way to make drop-shadows with good performance. (P.S. I have thought of using pieces of shadow as a png and scale and skew them and assembly them in a way to look as real drop-shadow on any size of image on any zoom factor. But, that's kind of ridiculously complicated idea and I'm hoping for better suggestions. ) Thank you in advance.
  14. Hi, I'm working on a web game project made with pixi.js and django. Basically Django process/sends data from backend for Pixi.JS to process and render the game on HTML Canvas. I have seen some references for testing pixiJS, however they're all working with react (mentioned in this post) and none mentions how to test with django. Additionally, I have also considered using chrome plugin to monitor pixijs, another plugin called gstatjs to monitor graphic statistics, and screenshot testing. Ultimately I would love to be able to automate testing of pixi objects on the canvas (i.e. test if the health bar decreases when shooting the wrong objects, etc). I'm rather new with this and would love to hear some advice/suggestions from anybody, thank you!
  15. Hi, I Recently discovered Pixi JS and have to say, I am a big fan. For a first project with the framework I thought I would create something fairly simple and go for a breakout type clone. The whole thing works super smooth in Safari and Firefox on my iMac, but for some reason I get intermittent choppy frames when using Chrome. I thought Chrome was supposed to be the boss of web browsers, so it was a surprise to see this! I have started to look at the profiler ( attached recording ), but according to this my frame rate is good! Unless I am mis-reading something? From what I understand, this kind of effect could also be caused by GC, but I am not really sure how to get the info from this data. If anyone can throw me a line here it would be greatly appreciated. I suppose I could try deploying the project somewhere or sharing my git repo if need be? Many Thanks. Profile-20210515T160855.json.zip
  16. Hi Team ... While seeking a webm there is a strange glitch that happens consistently (replication steps can be found in the attached video: webm-glitch-pixiv6-compressed.mp4). This same glitch does not happen if let the video play undisturbed (i.e. without seeking to random points in time) which rules out the possiblity of the video being corrupt. What are the things that I tried: I tried to see if the previous versions of PIXI (namely v5) had the issue, and surely they did. I tried to apply the pixi-patch from the following links, but they didn't work - https://github.com/pixijs/pixi.js/issues/3526 https://github.com/pixijs/pixi.js/issues/408 The problem seems to be there in multiple versions of PIXI: PIXI v6.0.2: https://jsfiddle.net/zodiacleo/spgzy4x3/17/ PIXI v5.3.3: https://jsfiddle.net/zodiacleo/dbhf2xu9/17/ SpectorJS trace has been attached (file: webm-glitch-spector-error.json) Please let me know if I can provide more information on this. webm-glitch-pixiv6-compressed.mp4 webm-glitch-spector-error.json
  17. Pixi is a wonderful library to create html5 games and we love games to create with pixi.js Here is our last game that we create pixi. It took 2 weeks to develop this game with the graphics. We hope you like it. https://www.happykidgames.com/game/scrape-and-guess
  18. Hello, I got allot further in my goal to make a ribbon like menubar. But for some reason i had a error saying Sprite.On do not exist, so i had to edit the tsconfig file and add the line: "allowSyntheticDefaultImports": true, to the compiler options so after adding that i was able to use that methode. But here comes the problem: When i hit the Sprite Button -> it go's to the required function and print's in the console the message i provided, But when i want to acces the container from the UIMananger within the onButtonClick -> this.uiContainer i get error saying it's undifiend Anyone have a clue how to fix this? UI Manager Snippit (See: onButtonClick ) export class UiManager { private demoScene: Boolean = false; private uiContainer: Container = new Container; constructor(demo:Boolean) { this.demoScene = demo; this.uiContainer = this.GenerateMenuBar(); } public getUI(): Container{ return this.uiContainer; //Return the ui Correctly } private onButtonClick() :void { console.log("clickt on button"); let btnTest = this.createMenuButton(); // <<-- Error: this.createMenuButton is not a function console.log(this.uiContainer); // <<-- Error: Undefined this.uiContainer //Launch a event to show a sprite... } private GenerateMenuBar(): Container{ this.uiContainer.addChild( this.createMenuBackground(), this.createMenuButton(), this.createWallsnWindow(), ); return this.uiContainer; } private createMenuButton():Sprite{ console.log("Create MenuButton") var tmpSrite = Sprite.from('./src/Engine/assets/ui/btn_NewScematic.png'); tmpSrite.interactive = true; tmpSrite.buttonMode = true; tmpSrite.name = "menuButton"; tmpSrite.position.x = 10; tmpSrite.y = 59; tmpSrite.hitArea = new Polygon([40,0, 100,0, 100,40,40,40]); //Setup Hitbox tmpSrite.on('pointertap', this.onButtonClick); //Interaction... return tmpSrite; } Engine File -> Everything in here renders ok and uses the UIManager export class Engine { public renderer: Renderer; public loader: Loader; public world: Container; public graphics: Graphics; public fpsMax: number; public canvas: HTMLElement; public uiManager: UiManager; private assetsLoaded:boolean; // // constructor constructor(options: IEngineOptions) { this.loader = Loader.shared; this.renderer = new Renderer(options); this.world = new Container(); this.graphics = new Graphics(); this.fpsMax = options.fpsMax; /// * UI Manager * this.uiManager = new UiManager(true); this.canvas = options.containerId ? document.getElementById(options.containerId) || document.body : document.body; this.canvas.appendChild(this.renderer.view); /// /// Loader Setup /// this.loader.onComplete.add(() => { this.assetsLoaded = true; console.log("Assets Loader State:" + this.assetsLoaded); }) this.loader.load(); this.render(); } get view(): HTMLCanvasElement { return this.renderer.view; } public render(){ while (this.assetsLoaded = false) return; console.log(utils.TextureCache); let tmpWorld = new Container(); this.world.addChild( this.uiManager.getUI(), <<-- Render Fine and returns the Ui Container ); } } // Engine
  19. Hello Everyone, I'm primarly a .Net Developer(c# backend), and not so long ago i started a new project. I choise as rendering engine technology pixijs v6.0 (latest version) I'm quite new to pixijs and typescript and stubled upon a stange error. This error is that a sprite/texture not gets loaded/displayed to the screen.. Why this occuers i have no clue... If i create a simple unstructed project i can load textures fine,but in my structerd program nothing gets displated.. If i add a text object for example i have no issues... nor with drawing rectangles. I Really really hope someone can help me, scavanged the internet for a while now to find a sollution. Regards Me #Index Typescript File -> import * as PIXI from 'pixi.js'; import { Engine } from './Engine/Engine'; //Gobal Variale //declare const window: any; declare global { interface Window { app: any; Display: any; } } export class Game extends Engine { static instance: Game; //private _currentScene?: IScene; public lang: string; //public games: { [key: string]: IScene }; _init: boolean; constructor(parent: HTMLElement) { if (!parent) throw new Error("aprent element must be div!"); const aspect = window.innerWidth / window.innerHeight; //l size = { ...Config.ReferenceSize }; //fallback PIXI.settings.PREFER_ENV = PIXI.ENV.WEBGL; super({ autoStart: true, backgroundColor: 0xFF00FF, width: 1200, height: 1200 //...size }); parent.appendChild(this.view); this.render(); // renders the world //@ts-ignore Game.instance = this; PIXI.utils.sayHello; } } //Hooks.. window.Display = () => { const app = (window.app = new Game(document.querySelector("#gameid"))); }; #Engine TypeScript File -> import * as PIXI from "pixi.js"; import { IEngineOptions } from './Classes/Interfaces/IEngineOptions'; import { IEngine } from './Classes/Interfaces/IEngine'; export class Engine extends PIXI.utils.EventEmitter implements IEngine { public renderer: PIXI.Renderer; public ticker: PIXI.Ticker = new PIXI.Ticker(); public loader: PIXI.Loader = PIXI.Loader.shared public world: PIXI.Container = new PIXI.Container(); public init: Function; constructor(options: IEngineOptions) { super(); this.renderer = new PIXI.Renderer(options); // good this.init = () => { }; } get view(): HTMLCanvasElement { return this.renderer.view; } render() { const testGraphic = new PIXI.Graphics(); testGraphic.beginFill(0xFFFF00); testGraphic.lineStyle(5, 0xFF0000); testGraphic.drawRect(0, 0, 300, 200); let x = new PIXI.Text('This is a PixiJS text', { fontFamily: 'Arial', fontSize: 24, fill: 0xFFFFFF, align: 'center' }); x.position.x = 5; x.position.y = 250; <b>// Not Working and asset exist..</b> let background = PIXI.Sprite.from('./Assets/UIElements/ribbonBackground.JPG') background.position.x = 0; background.position.y = 0; this.world.addChild(testGraphic, x, background); this.renderer.render(this.world); } destory(params = { children: false }) { this.world.destroy(params); this.ticker.destroy(); this.renderer.destroy(true); } } //} // Engine
  20. Hello, I'm new to Javascript and PIXI I've been recently been working on a project using PIXIJS and need some help. I am trying to make a user interface with 8 buttons for the bounding box and 1 rotational button to scale, rotate and move my sprite. At the moment, I made each individual buttons of the bounding box an individual sprite and manually setting their interactive mode and coordinate and added them as a child to my main sprite. The issue with this method is that when I move one button, the other buttons don't move together to align with the transformation. Also, I am trying to make a rotational button that is capable of rotation the sprite by its pivot point in both directions using the mouse movement. Can anyone help me?
  21. Hello, I have a problem with my pixiJS App, i have many sprites that I can move in my scene and my goal and create a plan with collisions between sprites, for that I use the bump plugin and the rectangleCollision fuuntion :https://github.com/kittykatattack/bump/ let collision = b.rectangleCollision(selectCont,c2,true,false,true); It's works (the middle case on the pic)if my sprite have no rotation but if i want to apply a rotation on my sprite the collisions doesen't work (left and right case in the pic). I thnik it's a problem with sprite bounds but i have no idea. Can you help me please ? ๐Ÿ˜€
  22. My question is how can we separate portrait and landscape mode by designing differently in my mobile view? For example Portrait mode ui and landscape ui is I want it to be different from each other. Thanks
  23. Special Effect are a UK charity who put fun and inclusion back into the lives of people with physical disabilities, by helping them to play video games! https://www.specialeffect.org.uk I added some new games today to this free website Eyegazegames.com , they are all primarily designed for use with eye gaze controllers and switch access, but also good with just a mouse! Tweet! For more info visit the Special Effect Website and check out their events to support their amazing work.
  24. Hi all , since I am new here I want to say that it's an honor to be part of your great community. I am using Leaflet.PixiOverlay to visualize some data on a Leaflet map . Since I have zero knowledge on PixiJS I would like to ask you if it is possible to wrap the displayed graphic in all maps left and right . The code I am using is the following Note that that's not the completed code, I think that's the part of the code I need to modify , if you need more info I can provide you the whole code var _pixiGlCore2 = PIXI.glCore PIXI.mesh.MeshRenderer.prototype.onContextChange = function onContextChange () { var gl = this.renderer.gl this.shader = new PIXI.Shader(gl, 'attribute vec2 aVertexPosition;\n' + 'attribute vec3 aVertexColor;\n' + 'uniform mat3 projectionMatrix;\n' + 'uniform mat3 translationMatrix;\n' + 'varying vec3 vColor;\n' + 'void main(void)\n{\n' + ' vColor = aVertexColor;\n' + ' gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n' + '}\n', 'precision mediump float;' + 'varying vec3 vColor;\n' + 'uniform float alpha;\n' + 'void main(void)\n{\n' + ' gl_FragColor.rgb = vec3(vColor[0]*alpha, vColor[1]*alpha, vColor[2]*alpha);\n' + ' gl_FragColor.a = alpha;\n' + '}\n' ) PIXI.mesh.MeshRenderer.prototype.render = function render (mesh) { var renderer = this.renderer var gl = renderer.gl var glData = mesh._glDatas[renderer.CONTEXT_UID] if (!glData) { renderer.bindVao(null) glData = { shader: this.shader, vertexBuffer: _pixiGlCore2.GLBuffer.createVertexBuffer(gl, mesh.vertices, gl.STREAM_DRAW), colorBuffer: _pixiGlCore2.GLBuffer.createVertexBuffer(gl, mesh.colors, gl.STREAM_DRAW), indexBuffer: _pixiGlCore2.GLBuffer.createIndexBuffer(gl, mesh.indices, gl.STATIC_DRAW) } // build the vao object that will render.. glData.vao = new _pixiGlCore2.VertexArrayObject(gl) .addIndex(glData.indexBuffer) .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 4 * 2, 0) .addAttribute(glData.colorBuffer, glData.shader.attributes.aVertexColor, gl.FLOAT, false, 4 * 3, 0) mesh._glDatas[renderer.CONTEXT_UID] = glData } renderer.bindVao(glData.vao) renderer.bindShader(glData.shader) glData.shader.uniforms.alpha = mesh.alpha glData.shader.uniforms.translationMatrix = mesh.worldTransform.toArray(true) glData.vao.draw(gl.TRIANGLES, mesh.indices.length, 0) } } this.pixiContainer = new PIXI.Container() // Create the PIXI overlay let layer = L.pixiOverlay(utils => this.render(utils), this.pixiContainer, { autoPreventDefault: false }) After many experiments with the code I discovered that by modifying gl_Position and to be more specific vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0) I am able to change the position of displayed graphics but I can't think of what I should do to display the graphic in all maps . I hope you could help me . Thank you for your time , I hope I made my question clear Stay safe guys , Evangelos .
  25. HELLO! I'm proud to present the Internet Money game commissioned by Internet Money, Pretty Good digital and developed by myself at TandC games. More info here Play it here Thanks to the pixijs guys for their support! I love their library, its a great level for me as I love developing my own game systems, physics, etc etc. Let me know what you think and stay tuned for more Pixijs developed games shortly.
  • Create New...