Popular Content

Showing content with the highest reputation since 01/21/20 in all areas

  1. 3 points
    https://valhallaepisodes.com/ This is the first game I've ever made and released to the public. Made in Phaser 3, using React for UI elements. Full list of all technologies are available in game. It's an adventure puzzle game adapted from an old Amiga game of the same name; You must guide the Prince through the castle in order to Reach the Lord of Infinity and take your rightful place on the throne. You must think both logically and laterally to complete your objectives. Hi. This is my very first game created, and I'm happy to take any constructive criticism you guys can throw at me
  2. 2 points

    make jigsaw game with webpack

    tutorial for using pixi.js to make jigsaw game with webpack. try it online : http://testactivity.goooku.com/ishop-demo/jigsaw/index.html source code : https://github.com/proudcat/pixi-jigsaw
  3. 2 points

    Use PIXI.Graphics as button

    Thanks @ivan.popelyshev I almost replied immediately, explaining that was exactly what I had been trying... Then when I reviewed the code, it transpired I need glasses (actually, I do), I'd made a typo in "event", so of course it didn't work...
  4. 2 points

    [Phaser 3] Rookie Bowman

    Game Link: https://www.kongregate.com/games/mapacarta/rookie-bowman Hi, I published my game on Kongregate yesterday. I hardly get feedbacks on there, so any feedback is appreciated. It is a platformer game with boss fights, collectible items, secret rooms etc...
  5. 2 points

    complex games with html5

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

    Tile Rendering Performance

    Regarding your case - yes, 5k sprites is too much, only something like ParticleContainer can handle that, and even then - you'll have like 100k javascript objects in memory total, because each sprite is lightweight but not that lightweight You can put tiles into graphics with beginTextureFill - it'll have like 20k objects and it wont re-upload vertex buffer every frame. pixi-tilemap wont spawn any objects, it can just upload buffer once when after you refill your tiles list, and all next calls are cheap, only asking for GPU to render that particular tilemap. RenderTexture caching can convert your map to 1 or 2 sprites, but eats gpu memory, 4 bytes per pixel. Choose your destiny.
  7. 1 point
    I'm having the strangest issue and I was hoping someone might be able to offer guidance. I have a separate renderer running in the background that is using the trick to do pixel perfect click detection with object colors. If I render that separate scene to the screen, everything is fine. But when I use extract (as below) the mirror is somehow mirrored. I'm guessing this is some kind of bug within Pixi.js because it only occurs after you've called resize on the renderer (or application has done it for you). selectColorLogic(mouse: Point): number { const pixels = this.logicRenderer.extract.canvas(undefined); const rawPixels = pixels.getContext("2d").getImageData(mouse.x, mouse.y, 1, 1); const [r, g, b, a] = rawPixels.data; if(a === 255) { return ColorUtils.rgb2hex({r, g, b}); } return -1; } The red and green objects in the below image so it best, but the other 2 are mirrored as well (should be about half height). Does anyone have any idea what might be going on?
  8. 1 point
  9. 1 point
    Project : Visual ts game engine Version : We can fight - 2020 2d canvas game engine based on Matter.js 2D physics engine for the web. I use my own concept: take lib for great benefits. It means that i import only staff that i can't make in proper way in proper time, all other coming from head. For example Physics was imported in role of npm package for typescript matter.js variant and i keep dependency healthy. In networking aspect i use full-duplex connection under web-rtc protocol. Pretty nice working combination of physics and realtime-multiplayer connetions. PeerToPeer used for game-play and classic websocket(socketio) for session staff. HTMLRequest used only for loading html parts in run time (on request) because i want clear single page application with all PWA features inside. Also video chat is integrated based on signaling server. No video recording for now (next features). Writen in typescript current version 3.7.4. Text editor used and recommended: Last version of Visual Studio Code. Luanch debugger configuration comes with this project (for server part). Physics engine based on Matter.js - Matter.ts (npm project). Multiplatform video chat (for all browsers) implemented. SocketIO used for session staff. MultiRTC2 used for data transfer also for video chat. MultiRTC3 alias 'broadcaster' used for video chat. Client part To make all dependency works in build proccess we need some plugins. npm install Command: npm run dev Output: ├── build/ (This is auto generated) | ├── externals/ | ├── imgs/ | ├── styles/ | ├── templates/ | ├── app.html | ├── manifest.web | ├── offline.html | ├── visualjs2.js | ├── worker.js Navigate in browser /build/app.html to see client app in action New way of building multi entryes. Sufix is -all . This is test for multi instancing webpack capabilities. Thanks for common object definition: let config = { module: {}, }; Point of Multi entries is to make independent healthy builds end point for our application. Current export's for 2 solutions looks like (runs webpack.multicompile.config.js) : Command: npm run dev-all Output: ├── build/ (This is auto generated) | ├── multiplayer/ | ├── singleplaye/ -Client part is browser web application. No reloading or redirecting. This is single page application. I use html request only for loading local/staged html (like register, login etc.). Networking is based on webSocket full-duplex communication only. This is bad for old fasion programmers. You must be conform with classic socket connection methodology. -webRTC can be used for any proporsion. Already implemented : -video chat webRTC (SIP) chat and data communication. -Class 'Connector' (native webSocket) used for user session staff. For main account session staff like login, register etc. Client config If you want web app without any networking then setup: appUseNetwork: boolean = false; You want to use communication for multiplayer but you don't want to use server database account sessions. The setup this on false in main client config class. appUseAccountsSystem: boolean = false; Networking is disabled or enabled depens on current dev status. Find configuration for client part at ./src/lib/client-config.ts import { Addson } from "./libs/types/global"; /** * ClientConfig is config file for whole client part of application. * It is a better to not mix with server config staff. * All data is defined like default private property values. * Use mmethod class to get proper. * Class don't have any args passed. */ class ClientConfig { /** * Addson - Role is : "no dependencies scripts only" * All addson are ansync loaded scripts. * - Cache is based on webWorkers. * - hackerTimer is for better performace also based on webWorkers. * - dragging is script for dragging dom elements. */ private addson: Addson = [ { name: "cache", enabled: true, scriptPath: "externals/cacheInit.ts", }, { name: "hackerTimer", enabled: true, scriptPath: "externals/hack-timer.js", }, { name: "dragging", enabled: true, scriptPath: "externals/drag.ts", }, ]; /** * @description This is main coordinary types of positions * Can be "diametric-fullscreen" or "frame". * - diametric-fullscreen is simple fullscreen canvas element. * - frame keeps aspect ratio in any aspect. * @property drawReference * @type string */ private drawReference: string = "frame"; /** * aspectRatio default value, can be changed in run time. * This is 800x600, 1.78 is also good fit for lot of desktop monitors screens */ private aspectRatio: number = 1.333; /** * domain is simple url address, * recommendent to use for local propose LAN ip * like : 192.168.0.XXX if you wanna run ant test app with server. */ private domain: string = "maximumroulette.com"; /** * @description Important note for this property: if you * disable (false) you cant use Account system or any other * network. Use 'false' if you wanna make single player game. * In other way keep it 'true'. */ private appUseNetwork = true; /** * networkDeepLogs control of dev logs for webRTC context only. */ private networkDeepLogs: boolean = false; /** * masterServerKey is channel access id used to connect * multimedia server channel.Both multiRTC2/3 */ private masterServerKey: string = "maximumroulette.server1"; /** * rtcServerPort Port used to connect multimedia server. * Default value is 12034 */ private rtcServerPort: number = 12034; /** * connectorPort is access port used to connect * session web socket. */ private connectorPort: number = 1234; /** * broadcasterPort Port used to connect multimedia server MultiRTC3. * I will use it for explicit video chat multiplatform support. * Default value is 9001 */ private broadcasterPort: number = 9001; /** * broadcaster socket.io address. * Change it for production regime */ private broadcastSockRoute: string = "http://localhost:9001/"; /** * broadcaster socket.io address. * Change it for production regime */ private broadcastAutoConnect: boolean = true; /** * broadcaster rtc session init values. * Change it for production regime */ private broadcasterSessionDefaults: any = { sessionAudio: false, sessionVideo: false, sessionData: true, enableFileSharing: false }; /** * appUseAccountsSystem If you don't want to use session * in your application just setup this variable to the false. */ private appUseAccountsSystem: boolean = true; /** * appUseBroadcaster Disable or enable broadcaster for * video chats. */ private appUseBroadcaster: boolean = true; private stunList: string[] = [ "stun:stun.l.google.com:19302", "stun:stun1.l.google.com:19302", "stun:stun2.l.google.com:19302", "stun:stun.l.google.com:19302?transport=udp" ]; /** * Possible variant by default : * "register", "login" */ private startUpHtmlForm: string = "register"; private gameList: any[]; /** * Implement default gamePlay variable's */ private defaultGamePlayLevelName: string = "public"; private autoStartGamePlay: boolean = false; /** * constructor will save interest data for game platform */ constructor(gameList: any[]) { // Interconnection Network.Connector vs app.ts this.gameList = gameList; } ... Start dependency system from app.ts Fisrt game template is Platformer. This is high level programming in this software. Class Platformer run with procedural (method) level1. Class Starter is base class for my canvas part (matter.js/ts). It is injected to the Platformer to make full operated work. gamesList args for ioc constructor is for now just simbolic for now. (WIP) In ioc you can make strong class dependency relations. Use it for your own structural changes. If you want to make light version for build than use ioc to remove everything you don't need in build. ioc.ts files located at: src\controllers. In ioc file i import choosen classes and create instance or bind. Ioc also save (singleton) instance's and we never make same class instance again (this is the role). We just call game.ioc.get.NAME_OF_INSTANCE. Object .get is key access object not array. Best practice is to use only one ioc. In that way you will get clear build without big shared in most time unnecessary data. If you application is big project.Than best way is still use one ioc.ts for per web page. In that way i use refresh or redirect moment to load optimised script bundle for current page. Main dependency file Current version: /** * Import global css */ require("./style/animations.css"); require("./style/styles.css"); import AppIcon from "./app-icon"; import GamePlay from "./examples/platformer/scripts/game-play"; import Ioc from "./controllers/ioc"; /** * plarformerGameInfo * This is strong connection. * html-components are on the same level with app.ts * Put any parameters here. */ const plarformerGameInfo = { name: "Platformer", title: "Start Platformer game play", }; const gamesList: any[] = [ plarformerGameInfo, ]; const master = new Ioc(gamesList); const appIcon: AppIcon = new AppIcon(master.get.Browser); master.singlton(GamePlay, master.get.Starter); console.log("Platformer: ", master.get.GamePlay); master.get.GamePlay.attachAppEvents(); /** * Make it global for fast access in console testing. * (window as any).platformer = master.get.GamePlay; */ (window as any).master = master; (window as any).platformer = master.get.GamePlay; About runup gameplay In client-config : Disabled at the moment for single-player solution. javascript private autoStartGamePlay: boolean = false; If you setup 'autoStartGamePlay' to false you need to run gamePlay with : javascript master.get.GamePlay.load() Note : Only singleton object instance from master start with upcase letters. Project structure build/ is autogenerated. Don't edit or add content in this folder. src/ is main client part (Browser web application). Main file : app.ts src/libs/ is common and smart pack of classes, interfaces etc. easy access. server/ folder is fully indipendent server size. I use one git repo but consider '/server' represent standalone application. There's server package.json independently from client part also config is not the common. I just like it like that. ├── package.json ├── package-lock.json ├── webpack.config.js ├── tsconfig.json ├── tslint.json ├── launch.json ├── workplace.code-workspace ├── LICENCE logo.png LICENSE ├── build/ (This is auto generated) | ├── externals/ | ├── templates/ | ├── imgs/ | ├── styles/ | | └── favicon.ico | ├── visualjs2.js | ├── app.html ├── src/ | ├── style/ | | ├── styles.css | ├── controllers/ | | ├── ioc.ts | | ├── ioc-single-player.ts | ├── libs/ | | ├── class/ | | | ├── networking/ | | | | ├── rtc-multi-connection/ | | | | | ├── FileBufferReader.js | | | | | ├── RTCMultiConnection2.js | | | | | ├── RTCMultiConnection3.js | | | | | ├── linkify.js | | | | | ├── getHTMLMediaElement.js | | | | | ├── socket.io.js | | | | ├── broadcaster.ts | | | | ├── connector.ts | | | | ├── network.ts | | | ├── visual-methods/ | | | | ├── sprite-animation.ts | | | | ├── text.ts | | | | ├── texture.ts | | | ├── bot-behavior.ts | | | ├── browser.ts | | | ├── math.ts | | | ├── position.ts | | | ├── resources.ts | | | ├── sound.ts | | | ├── system.ts | | | ├── view-port.ts | | | ├── visual-render.ts | | ├── interface/ | | | ├── drawI.ts | | | ├── global.ts | | | ├── visual-components.ts | | ├── multiplatform/ | | | ├── mobile/ | | | | ├── player-controls.ts | | | ├── global-event.ts | | ├── types/ | | | ├── global.ts | | ├── client-config.ts | | ├── ioc.ts | | ├── starter.ts | ├── icon/ ... | ├── examples/ | | ├── platformer/ | ├── html-components/ | | ├── register.html | | ├── login.html | | ├── games-list.html | | ├── user-profile.html | | ├── store.html | | ├── broadcaster.html | ├── index.html | ├── app-icon.ts | └── app.ts | └── manifest.web └── server/ | ├── package.json | ├── package-lock.json | ├── server-config.js | ├── database/ | | ├── database.js | | ├── common/ | | ├── email/ | | | ├── templates/ | | | | ├── confirmation.html.js | | | ├── nocommit.js (no commited for now) | | └── data/ (ignored - db system folder) | ├── rtc/ | | ├── server.ts | | ├── connector.ts | | ├── self-cert/ Server part Installed database : mongodb@3.1.8 -No typescript here, we need keep state clear no. Node.js is best options.For email staff i choose : npm i gmail-send . -Run services database server (Locally and leave it alive for develop proccess): npm run dataserver Looks like this : mongod --dbpath ./server/database/data Fix : "failed: address already in use" : netstat -ano | findstr :27017 taskkill /PID typeyourPIDhere /F Also important "Run Visual Studio Code as Administrator". -Command for kill all node.js procces for window users : taskkill /im node.exe /F Networking multimedia communication : WebSocketServer running on Node.js Text-based protocol SIP (Session Initiation Protocol) used for signaling and controlling multimedia sessions. General networking config: Config property defined in constructor from ServerConfig class: // enum : 'dev' or 'prod' this.serverMode = "dev"; this.networkDeepLogs = false; this.rtcServerPort = 12034; this.rtc3ServerPort = 9001; this.connectorPort = 1234; this.domain = { dev: "localhost", prod: "maximumroulette.com" }; this.masterServerKey = "maximumroulette.server1"; this.protocol = "http"; this.isSecure = false; // localhost this.certPathSelf = { pKeyPath: "./server/rtc/self-cert/privatekey.pem", pCertPath: "./server/rtc/self-cert/certificate.pem", pCBPath: "./server/rtc/self-cert/certificate.pem", }; // production this.certPathProd = { pKeyPath: "/etc/httpd/conf/ssl/maximumroulette.com.key", pCertPath: "/etc/httpd/conf/ssl/maximumroulette_com.crt", pCBPath: "/etc/httpd/conf/ssl/maximumroulette.ca-bundle" }; this.appUseAccountsSystem = true; this.appUseBroadcaster = true; this.databaseName = "masterdatabase"; this.databaseRoot = { dev: "mongodb://localhost:27017" , prod: "mongodb://userAdmin:********@maximumroulette.com:27017/admin" }; this.specialRoute = { "default": "/var/www/html/applications/visual-typescript-game-engine/build/app.html" }; - Running server is easy : npm run rtc With this cmd : npm run rtc we run server.js and connector.ts websocket. Connector is our account session used for login , register etc. Implemented video chat based on webRTC protocol.Running rtc3 server is integrated. If you wanna disable session-database-rtc2 features and run only broadcaster: Features comes with broadcaster: Multiplatform video chat works with other hybrid frameworks or custom implementation throw the native mobile application web control (Chrome implementation usually). Documentation : Follow link for API: Application documentation Possible to install from (It's good for instancing new clear base project): npm visual-ts If you wanna generate doc you will need manual remove comment from plugin section in webpack.config.js. Restart 'npm run dev' Best way to fully healty build. If you wanna insert some new html page just define it intro webpack.config.js : plugins : [ new HtmlWebpackPlugin({ filename: '/templates/myGameLobby.html', template: 'src/html-components/myGameLobby.html' }), ... See register and login example. Code format : npm run fix npm run tslint or use : tslint -c tslint.json 'src/**/*.ts' --fix tslint -c tslint.json 'src/**/*.ts' Licence Visual Typescript Game engine is under: MIT License generaly except ./src/lib. Folder lib is under: GNU LESSER GENERAL PUBLIC LICENSE Version 3 External licence in this project : - Networking based on : Muaz Khan MIT License www.WebRTC-Experiment.com/licence - Base physics beased on : Matter.js https://github.com/liabru/matter-js Sprites downloaded from (freebies/no licence sites): https://craftpix.net/ https://dumbmanex.com https://opengameart.org/content/animated-flame-texture https://www.gameart2d.com/ https://www.behance.net/JunikStudio Todo list for 2019 I'am still far a away from project objective : Make visual nodes for editor mode in game play. Item's selling for crypto values. Create examples demos in minimum 20 game play variants (table games, actions , platformers , basic demo trow the api doc etc.). Implementing AR and webGL2. Live demo Platformer
  10. 1 point
    @PLAYERKILLERS test build with the fallback fix to Canvas is available, see here https://github.com/melonjs/melonJS/issues/982
  11. 1 point
    Hi, I want to create a mesh with shader, and through uniforms webGL textures to shader, I'm able use pixiapp.renderer.gl.createTexture, it works. But other sprite in pixiapp(PIXI.application) stage also force to mesh's webGL Texture is webGL texture binding index confusion? (gl.TEXTURE0) maybe need to use pixi webgl abstraction? does anyone have idea? best regrads.
  12. 1 point

    on events not working on sprite

    asset.interactive = true; Rather than your setInteractive property
  13. 1 point
    You can move whole container that contains eggs. You can create extra container if you want only part of eggs to be moved. Also the code your supplied has to work, I dont see whats wrong with it. Please post a demo on codepen,jsfiddle,codesandbox or pixi-playground.
  14. 1 point

    Spritesheet problems

    So, I've been struggling to get spritesheets to work in PIXI. I've got everything hosted on a webserver and have followed the instructions on the documentation for the new way with V5. Its not working and I'm not quite sure where I'm going wrong. PIXI.Loader.shared.add("images/floortiles.json").load(gameStart); function gameStart() { let sheet = PIXI.Loader.shared.resources["images/floortiles.json"].spritesheet; stage = new PIXI.Container(); renderer = PIXI.autoDetectRenderer( 800, 600, {view:document.getElementById("game-canvas")} ); } Now, I'm not sure the best way to go about using the Sprites as I'm still learning; however, I've got something that should load the correct frame from the sheet. grasstile = new PIXI.Sprite(sheet.textures['tile_2.png']); That being said, all of this was successful with separate image files. I just haven't been able to make use of the spritesheet functionality. I would GREATLY appreciate any insight you guys can provide. Thanks!
  15. 1 point
    easy, just call "baseTexture.update()" , it will chang all updateID's , and TextureSystem wlll see that texture was changed on bind: https://github.com/pixijs/pixi.js/blob/1d09bfca1ae1a2fcdcca4c8a80ed59f605abcd76/packages/core/src/textures/BaseTexture.ts#L507 https://github.com/pixijs/pixi.js/blob/1d09bfca1ae1a2fcdcca4c8a80ed59f605abcd76/packages/core/src/textures/TextureSystem.ts#L141 When you call "baseTexture.setSize()" it changes ID's too. Actually, if its only the format you've changed, you can just set "baseTexture.format" and use our regular BufferResource. As for bind problem you encountered, I think I need to see your demo to solve that.
  16. 1 point

    Pixi Filter and pixel size

    Hi, I'm trying to learn how to pass and use textures in PIXI.Filter. I have a game that uses a complex filter that takes multiple textures and behaves differently depending on the color of the pixel of each texture. It's too complicated to post here. The main problem I have is: I don't know how to measure the width / height of a pixel of the texture I'm passing inside my shader. Here I have a very simple filter that illustrates my issue: I want to create a filter that I pass the following "u" shape texture the filter uses that shape to generate a red drop shadow like this: The problem is the shader messes up and doesn't calculate properly the length of a pixel resulting on this: I was expecting to have a perfect stair going up, and I was expecting more steps on the stair (see algorithm below). Does anyone know what I'm doing wrong? Here's a link to a codepen illustrating the issue: https://codepen.io/alvaromartinlop/pen/abOvzxb?editors=0010 Here's the vertex shader: attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; uniform mat3 projectionMatrix; varying vec2 vTextureCoord; uniform mat3 shadowMapMatrix; varying vec2 vShadowMapCoord; void main(void) { gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); vTextureCoord = aTextureCoord; vShadowMapCoord = (shadowMapMatrix * vec3(aTextureCoord, 1.0)).xy; } Here's the frag shader: precision highp float; varying vec2 vTextureCoord; uniform vec4 inputPixel; // Problem is here varying vec2 vShadowMapCoord; uniform sampler2D shadowMapTexture; void main() { vec4 shadowColor = vec4(1, 0, 0, 1); vec2 displacementCoord = vShadowMapCoord; vec4 shadowMapColor = texture2D(shadowMapTexture, vShadowMapCoord); vec4 finalColor; vec4 translateColor; vec2 translate = vec2(inputPixel.z,-inputPixel.w); for(int i= 0; i < 10; i++) { displacementCoord -= translate; translateColor = texture2D(shadowMapTexture, displacementCoord); if (translateColor.x > 0.0 && shadowMapColor.x == 0.0) { finalColor = shadowColor; break; } } gl_FragColor = finalColor; } Clearly the issue is with inputPixel, displacementCoord is not decrementing properly on each iteration in the for loop. Here's how I calculate the matrix for the texture public apply( filterManager: systems.FilterSystem, input: RenderTexture, output: RenderTexture, clearMode: boolean ): void { this.uniforms.shadowMapMatrix = filterManager.calculateSpriteMatrix( this._matrix, this._shadowMapSprite ); filterManager.applyFilter(this, input, output, clearMode); } So the question is. How do I properly calculate inputPixel so that I don't have the irregular staircase problem? Thanks.
  17. 1 point
    However, if you do manual binds and other stuff, please call "renderer.reset()" method so pixi knows that someone else worked with that context. Yes, we store current boundTexture and active location top optimize our webgl commands sequence. Its here: https://github.com/pixijs/pixi.js/blob/22c9cc00adaafbfd3a3f51dc74f3c9b4925686dd/packages/core/src/textures/TextureSystem.ts#L127
  18. 1 point
    Thanks, Ivan, No pressure. I am exploring options. Do you think this approach will be better performant than png sequence?
  19. 1 point
    Is there any built in system that would pass on attributes and properties to children for example inside of a container? A bit like how html works if you have an element inside another, and for example make the element w 50, h 50, position: abs, right: 0, top: 0, the properties gets passed on to the children etc etc, i could make this myself but it would save some time if there already was something for it.
  20. 1 point
    Not complaining or pushing! If it gets done at all, it would make my day. I continue to be impressed by the evolution of the PIXI project. In the course of my own project, I have had to deal with a lot of maths of my own. The worst being implementing BOUNDED 2-finger panzoom up to my high standards of precision/quality or smoothly animating panning and zooming into another point in 2d space and back again. (Those small phone screens really stretch the imagination on how to make a largish game board usable) Of course, that is all 2d transformation stuff at which you guys are probably pros. I mention this to show my empathy for all the additional maths you guys have to deal with. I'll check out the resources to which you directed me. Thanks!
  21. 1 point
    Usually, its easier to change transforms on individual graphics. However, I do not know architecture of your code, and how do you prefer to write that kind of algorithms. Resetting graphics means pixi will have to call triangulation. It will also re-upload the vertex buffer in case figure has more than 100 vertices. I don't know how to explain it clearly, if you want you can take https://spector.babylonjs.com/ and capture one frame of your app, and see how many webgl commands that mean. Do what is easier for you to do from the coding perspective. It won't be hard to rewrite it later.
  22. 1 point
    Hi! Welcome to the forums Your question is general and can't be answered in a few sentences. To understand which one is better for your particular case - you have to spend a year or two with webgl libs. Basically, 1. Batcher does care about graphics with small number of vertices. Circles usually have big number. 2. In case if graphics does not fit into batcher, all transforms are cheap anyways - position,scale,rotation - its all just one matrix in webgl uniform, it does not modify geometry buffer inside graphics. 3. in case you have 10k elements that are rarely move - you divide it by 100 graphics and update only those graphics that have moving parts. That way you upload minimal number of buffer. What is Batcher? What is Transform? Cant we just make faster Graphics? Is there a plugin for it? What is buffer, does it have pixels or something else? Is graphics rendered only one time if you dont move it? - Those questions I wont answer. Those things will make sense for you only if you learn 1. webgl fundamentals : https://webgl2fundamentals.org/ 2. all basic pixijs tree examples, how do you work with transforms. 3. how meshes/graphics in pixijs works, read the library sources. 4. maybe read what other people asking here and in https://github.com/pixijs/pixi.js/ 5. experiment with threeJS. Just so you know that we aren't pulling your leg explaining that its all is difficult. PixiJS is not optimallfor your task. Its never optimal. Its just faster than other renderers for 2d and has many general optimizations. You need to tune both your high-level algos and configure pixijs low-level. But first , you need to actually hit the performance problem, there's no point int premature optimization of pixijs app, unless you know that you will hit a particular bottleneck.
  23. 1 point
    nice! it works well. thank you for your help.
  24. 1 point
    @Zygomatic Thank you!!! I have plans to add +50 Levels... With some extras... like stars for score, enemies and more. Don't hesitate to contact me anytime!
  25. 1 point
    Looking for some feedback on best practices for handling large texture data. On desktop, it seems I can easily load large textures exceeding 8k on a side; however, mobile fails to render past 4096 pixels on the longest side. Project I'm working on loads schematic views, of sorts - there's a background image on which components are placed. Zoom / pan is implemented from Pixi-Viewport project. These are available as vector, but prototyping as SVG seems to incur a significant performance loss. Not sure if there's a mipmapping approach, or some kind of level of detail such as TileMap. Roughly following the TileMap project... background image is sliced and loaded via multiple frames. Presume source code for the "webgl: zoomin and zoomout / retina webgl: zoomin and zoomout" examples are just https://github.com/pixijs/pixi-tilemap/blob/master/demo/main.js The canvas version doesn't appear to be working: main.js:104 Uncaught TypeError: Cannot read property 'flush' of undefined at update (main.js:104)
  26. 1 point

    Multi-Style text

    Working great. Thank you.
  27. 1 point


    Ivan, I just want to say thank you for your support. Thank you for guiding me to the right point. Yes, I was in the right direction, but something was missing very stupid from my side. So, if someone might need info, my problem was: The "overlay" texture was not the initial overlay image. It was indeed empty already. I needed to create a auxiliar sprite with the overlay texture, so I could create a RenderTexture object, and then position the auxiliar overlay sprite and then render this sprite on the render texture.
  28. 1 point
    IF you just created container, it does have width and height 0, because it doesnt have children. Width and Height are calculated properties, and yes, our main example gives a bad idea to people. It was the same way in Adobe Flash, and its completely different from you see in web development. If you dont understand how "pivot","width/height" work, try to make everything without them. consider that graphic coords are relative to center of the screen.
  29. 1 point
    Jonny Shaw

    Fastest way to do masking?

    Brilliant thanks Ivan, will take a look in detail first, it maybe something else that's causing the error on mobile and report back. Device currently testing on is a Samsung Note 8 (though will try others)
  30. 1 point

    Fastest way to do masking?

    > Also seems that using graphics for masks on V5 doesn't work on mobile for me? In a project I'm working on at the moment I have a scene with 5 masks that are simple rectangular graphics and the height of the masks is tweened on occasion. It should work. If it doesnt work - make a demo and tell us a device that doesnt work with it. We made several changes in v5 releases regarding masks, and one of them - scissor masks for rects work inside the filters too. Its not easy to debug that stuff because we have not enough reports from people. For 5 objects there cant be benefits, 5 is a very small number. Pixi-heaven sprite masks weren't ported to v5 but i can port them provided you can actually test it and report back.
  31. 1 point
    Jonny Shaw

    Fastest way to do masking?

    Sorry to bump this but just wondered if this had improved significantly with V5, or an alternative approach is recommended? I noticed that masks seem to act slightly differently in V5 someway in their stacking order. A system I had set up in V4 for instance with a Kawase blur filter on a masked container that animated. The filter would also blur the mask (which was the intended idea) but with V5 only the contents of the container were masked. Also seems that using graphics for masks on V5 doesn't work on mobile for me? In a project I'm working on at the moment I have a scene with 5 masks that are simple rectangular graphics and the height of the masks is tweened on occasion. Because the graphics arent working on mobile two approaches I thought of... 1. Rendering all the graphics to a single texture on the fly and having that texture used as a single sprite mask. 2. Just switching the masks up for simple sprites and keeping the rest as is with 5 masks? Is there any benefit on draw calls for instance if I had to mix 1 with 2, ie having one rendered texture but using it as 5 masks as opposed to 5 separate images for the masks? Also was interested to see what @cursedcoder mentioned about pixi-heaven - is this still applicable with V5 as I understand pixi-heaven still needs a bit of work with 5?
  32. 1 point
    Hi, I'm new to PIXI.js and we just have upgraded our project (floor planning) from v4 to v5.2.0 We set the background to white, draw horizontal and vertical lines, two axis lines and the floor design itself and everything was working on v4 before the upgrade process. the problem that not all lines are visible correctly, some lines disappear on zoom in and appear on zoom out. here is the code for drawing the horizontal and vertical lines: draw(keepCurrentGridSpacing?: boolean) { this.clear(); this.removeChildren(); let backgroundLineSize = this.stage.getPixiConstantBasedOnCurrentScale(PixiConstants.backgroundLineSize, PixiConstants.backgroundLineSizeMax, PixiConstants.backgroundLineSizeMin); let mainAxisLineSize = this.stage.getPixiConstantBasedOnCurrentScale(PixiConstants.backgroundAxisLineSize, PixiConstants.backgroundAxisLineSizeMax, PixiConstants.backgroundAxisLineSizeMin); if (!keepCurrentGridSpacing || keepCurrentGridSpacing.valueOf() === false) { this.updateBackgroundSquareSizeBasedOnScale(); } let fromX = ((-1 * this.stage.position.x) / this.stage.scale.x); let toX = fromX + (this.stage.canvas.getCanvasParentWidth() / this.stage.scale.x); let fromY = ((-1 * this.stage.position.y) / this.stage.scale.y); let toY = fromY + (this.stage.canvas.getCanvasParentHeight() / this.stage.scale.y); let startX = (fromX - (2 * this.backgroundSquareSize)) - ((fromX) % this.backgroundSquareSize); let startY = (fromY - (2 * this.backgroundSquareSize)) - ((fromY) % this.backgroundSquareSize); let endX = toX; let endY = toY; let width = endX - startX; let height = endY - startY; this.beginFill(0xFFFFFF); var color: any = PixiConstants.backgroundColor; this.lineStyle(backgroundLineSize, color); this.drawRect(startX, startY, width, height); // Draw Horizontal and Vertical Lines var i: number; for (i = startY; i <= endY; i += this.backgroundSquareSize) { this.moveTo(startX, i); this.lineTo(endX, i); } for (i = startX; i <= endX; i += this.backgroundSquareSize) { this.moveTo(i, startY); this.lineTo(i, endY); } // Draw Axis this.beginFill(0xFFFFFF); this.lineStyle(mainAxisLineSize, PixiConstants.backgroundAxisColor); this.moveTo(startX, 0); this.lineTo(endX, 0); this.moveTo(0, startY); this.lineTo(0, endY); this.stage.animate(); } private updateBackgroundSquareSizeBasedOnScale(){ let canvasWidth = this.stage.canvas.getCanvasParentWidth(); let canvasHeight = this.stage.canvas.getCanvasParentHeight(); let max = Math.max(canvasWidth / this.stage.scale.x, canvasHeight / this.stage.scale.y); let ratio = max / this.backgroundSquareSize; if (ratio < 10) { while (max / this.backgroundSquareSize < 10) { if (this.backgroundSquareSize == 100) { // Smallest grid size allowed is 1 meter break; } this.backgroundSquareSize /= 2; } } else if (ratio > 20) { while (max / this.backgroundSquareSize > 20) { this.backgroundSquareSize *= 2; } } } i'm sure it would be a small issue but i can't find anyone to help me, appreciate your efforts.
  33. 1 point
    Hi, i am curious what is best way to make collision. At this moment I make it this way: i have all elements with collision in an array and i iterate through it and calculate distance this way: let dx = this._enemies[i].cords.x - this._players[y].cords.x; let dy = this._enemies[i].cords.y - this._players[y].cords.y; let distance = Math.sqrt(dx * dx + dy * dy); if(distance < 100) { //collision } This calculations make a sphere. We can do it this way to get a square or rectangle: if(Math.abs(sprite1.x - sprite2.x) < 100 && Math.abs(sprite1.y - sprite2.y) < 10) { //collison } I think this is not the best method, because lets imagine we have 1000 things with collision. We have to calculate their distance 1000x1000 = 1000000 times per frame. My second thought is a 2d array that pretends to be map. If object is on x=200 and y=200 we can assign it like this map[200][200] = 1. And then another object check is that place is free (there will be 0 then). Its good when the object is 1 pixel wide and high. For larger objects it could be harder to implement. How are you doing this?
  34. 1 point
    We are lazy. We use a physics engine (or collision library). Wikipedia is quite enlightening. Optimization is done mostly through pruning and partitioning.
  35. 1 point
    Here for you if(resource.extension === "mp4") { const texture = PIXI.Texture.from(resource.url); const videoSprite = new PIXI.Sprite( texture ); /**@type {HTMLVideoElement}*/ const videoControler = videoSprite.texture.baseTexture.source; videoControler.currentTime = 0; //jump to 0 will also autostart videoControler.onplay = function() { //TRIM VIDEO after loading or onplay videoSprite.texture.trim = new PIXI.Rectangle(0,0,400,400); videoSprite.texture.frame = new PIXI.Rectangle(0,0,400,400); }; app.stage.addChild(videoSprite); } Don't ask me why but you need do the thing async ! or pixi going crazy with gl error. So perform this inside on start. I can't investigate more because you don't join me a `launch.json` for debug in IDE.
  36. 1 point

    Game loop advice

    With a brief look, I don't see anything wrong with the implementation. I would say it all comes down to `ctx.imageSmoothingEnabled = false`, which will cause the pixel positions to be rounded (which is desired for pixel-perfect pixelart game). At 60 FPS you sometimes get a pixel movement, sometimes don't, and not moving is essentially a frame skip, which at 60 FPS is visible. At 144 FPS, not so much (i.e. the timing is much smaller, so it's closer to reality). You can test that by playing around with speed setting, making it work well in 1/60 intervals. Although looking at your code, speed of 20 should work well (1 pixel every 3 frames). Try logging rounded position delta every frame and see if there's jitter or not. Repeating 0-0-1 should look good. Something like 0-0-1-0-1-0-0-2 will not. @Milton No, it's correct. It's simply an implementation of fixed timestep with rendering interpolation. When `dt` comes back smaller than `STEP`, rendering interpolation still makes the movement necessary. Thus allowing for a game with low logic rate (e.g. heavy physics running at 30 Hz) still render nicely on modern desktop with whatever refresh rate the display/gpu manages (~144 Hz, but anything really). Using `dt` directly would make anything with higher differential order non-deterministic and unstable (e.g. applying acceleration).
  37. 1 point
    I just now found the time to give this another try and just wanted to let you know: With the updated CDN file it works perfectly now! Thanks so much for your quick help, you saved my day! Great library and great support here in the forums. Thanks!
  38. 1 point
    its link to a file, "piijs.download" is a link to our CDN . Either <script src=> it, either you can just put that piece of code in your project. You dont have to change anything else. BlurFilterPass is internal thing that was patched in that PR. It will appear in npm as a version 5.2.1 i dont know when.
  39. 1 point
    The fix was made in december and will appear in 5.2.1: https://github.com/pixijs/pixi.js/pull/6270 Two ways how to get it: Use "pixijs.download/master/pixi.js" (map file and typings are in the same folder) Look in the example https://www.pixiplayground.com/#/edit/kuhrhc4jG5QnRRtIfwGwk and copy the bottom part to your app (blurFilterPassApply and the hack) Welcome to the forums!
  40. 1 point
  41. 1 point
    Hi, I am using PixiJS version 5.2.0 with the compressed-textures plugin version 2.0.3: If two dds-images are placed directly next to each other in a container and the container is scaled, a thin strip appears between the two images: If the scale of the parent container is exactly 1, no stroke is visible. With PixiJS 4.8.8 and compressed-textures-plugin 1.1.8 it works correctly and no stroke is visible. When the PixiJS scale mode is set to nearest (PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST) no stroke is visible (but the images becomes a little bit blurry). I suspect this is related to the interpolation constraint of the scale mode LINEAR, but I'm not sure if this is a PixiJS problem or a compressed-textures-plugin problem ... This is the complete code: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>PixiJS v5 Compressed Textures Bleeding</title> <script src="https://cdn.jsdelivr.net/npm/pixi.js@5.2.0/dist/pixi.js"></script> <script src="https://cdn.jsdelivr.net/npm/pixi-compressed-textures@2.0.3/dist/pixi-compressed-textures.min.js"></script> </head> <body> <script> //PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST const app = new PIXI.Application({ width: 1024, height: 512 }) document.body.appendChild(app.view) new PIXI.Loader() .add('photo1', './1.dds') .add('photo2', './2.dds') .load((loaderInstance, resources) => { const sprite1 = new PIXI.Sprite(resources.photo1.texture) const sprite2 = new PIXI.Sprite(resources.photo2.texture) sprite1.width = sprite1.height = sprite2.width = sprite2.height = 512 sprite2.x = 512 app.stage.addChild(sprite1, sprite2) app.stage.scale.set(.8, .8) }) </script> </body> </html> Has anyone a good idea? Siddi
  42. 1 point
    Congratulations, you've found a bug! https://github.com/pixijs/pixi-compressed-textures/blob/6fa56acaa6a98863f3f00bdf2ed2be16f864f42d/src/CompressedImage.ts#L125 - compressed textures didnt handle CLAMP/REPEAT at all
  43. 1 point
    This is the whole application, just one html file plus two dds-files: dds-demo.zip
  44. 1 point
    @dWolf Welcome to the forums! As you see, answer to your question is not safe for newbie it requires knoweldge of both how can you get data from canvas2d and webgl, and webworkers. At least its in production. If you want just a prototype with small texture - using PIXI extract plugin on renderTexture and iterating through pixels should work. Extract is bundled in PixiJS, it wont be a problem to find it. If you want to go into production and cover all the devices - well, you have to learn all those things @eXponeta mentioned.
  45. 1 point

    complex games with html5

    you can use any frameworks or game engines that can export to various flavours of browser content (js/canvas/webgl, webassembly) to make any game. if you meant complex game-play, the only limit is the sky 😛 if it's complex content (lots of graphics, animations, music, sounds), then yeah, there are limitations on what you can achieve for web. the main limit i see is the size, but here the discussion would diverge into: would you like you game available as web desktop, web mobile over wi-fi, web mobile over mobile data? a common denominator would be to keep the total size of the game below 20MB (code + assets), but with such low size, even you optimize the living hell out of your assets (choose a base resolution way lower than 1920x1080, use dragonbones/spriter for animations, downgrade the quality of music) you won't achieve the quality and quantity of assets of any of the aforementioned games. alternatively, you can use asset bundles and stream music/sounds on demand, but then if the player plays it on mobile data, can he afford the data charges for these dynamic loaded assets? as alternative 2, you can offer your game as a pwa (progressive web app), in which case some of these restrictions can be avoided (although the support for this is not wide-spread and probably only available to newer mobile devices and mobile operating systems). the second restriction is performance for canvas/webgl, where you have to use as fewer textures as possible to keep the draw calls low and maintain a steady fps. in this case, you'll probably want only a couple of 2048x2048 textures active at a time, and as you can guess, you won't reach the same level of quality as the games you've pointed to.
  46. 1 point
    Here's my pixi playground. https://www.pixiplayground.com/#/edit/huvn96zZqn-UfdrhsUXv7 The shader I've written is from "The book of shader, chapter five". Basically it draws a line and a nice gradient from black to white. You can see right top one on the above screenshot. And then I rotated the sprite by 45, then as you can see, my expectation is it only draws pixels inside the blue rectangle I marked on the bottom right. But somehow it draws pixels on the whole bounding box. The question is how to achieve my goal when rotation is applied to the sprite?
  47. 1 point

    complex games with html5

    I just don't understand, what is the point of your comment? It literally does not answer his question that he asked. Do you even read your own post before you post it? Putting that aside, to answer topic's author question. Yes, any of those libraries are fine to build complex games, they even are based on WebGL renderer which allows for bigger limits to render stuff on screen at the same time than regular canvas allows you to and even allows 3D stuff as well if you choose right framework to work with. Talking about limits, it depends on how you make the game but if you optimize well enough you could create as large game as you'd like, there's many ways to do that and goes very in depth with it so i'm not gonna explain that but if you want to find more about it, i'd suggest googling that.
  48. 1 point
    Actually, I do not consider html5 as a way to earn money for now. It's a hobby for me and maybe only in the future, I'll be able to do freelancing. Nowadays I just try to use decent financial tools in order to keep my money save. For example, on this review, I found information about one visa credit card. It's quite advantageous because it has no yearly fees.
  49. 1 point
    It's actually simple for matter or impact, you just need to pass world instead of scene. super(scene.matter.world, x, y, sprite, frame, option); // if you are using matter // OR super(scene.impact.world, x, y, sprite, frame); // if you are using impact But if you are using Arcade, that creates a problem. you can't just extend Phaser.Physics.Arcade.Sprite. You have to add this line of code. scene.physics.world.enableBody(this, 0); P.S. To solve this kind of problem I created a development setup to custom create classes. IF you like you can check out my setup at github.
  50. 1 point
    @ivan.popelyshev AWESOME! I knew it was something logical, was going crazy there for a while. Thank you very much! Now a followup question: How would I go about using another image as the "renderTexture", so instead of using WxH pixel values use an image instead and therefor being able to count pixels that are not just 400x400. Here is a fiddle with updated assets. Hope that makes sense, not sure how to explain it..