Leaderboard


Popular Content

Showing content with the highest reputation since 02/15/20 in all areas

  1. 2 points
    yulijun

    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
  2. 1 point
    vornay

    Google GameSnacks

    https://www.gamesnacks.com "Bite-sized HTML5 games, accessible to everyone." https://www.gamasutra.com/view/news/358551/Google_wants_to_bring_HTML5_titles_to_lowend_devices_with_GameSnacks.php "Google has announced a new HTML5 platform called GameSnacks that's designed to help devs bring quick, casual games to any device."
  3. 1 point
    ivan.popelyshev

    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.
  4. 1 point
    Jay Manley

    Tile Rendering Performance

    Hi all, I'm currently working on a new game which uses large tilesets and renders 9 Containers as map layers. Each map contains 24*24 tiles and each tile is 32px*32px. Currently I'm adding each tile from the tileset as a sprite individually (only if the tileIndex for that tile is > 0). So if I were to have a fully loaded map it would contain a total of 5,184 Sprites. I'm guessing that this is inefficient and I feel that I could combine the bottom two layers into a texture, as these are Ground Layers on the map. The player will walk over these anyway and they are unlikely to ever change until the player switches map and thus reducing the Sprite usage by 1,152 (2 layers worth). I've looked at the docs and online examples to see if there's anything that could be helpful here but have been unsuccessful in getting it to work as I'd expect it to. Please help.
  5. 1 point
    ivan.popelyshev

    Tile Rendering Performance

    Welcome to the forums! Another tilemap thread. Please use search for this particular subforum on "tilemap" word. You can also search at https://github.com/pixijs/pixi.js/issues My latest explanation: https://github.com/pixijs/pixi-tilemap/issues/75#issuecomment-589615977 Tilemap is an advanced (not basic) , advanced algorithm that requires developer to write its own code and not just CTRL+C stuff from examples. PixiJS gives only low-level components that can be used with high-level algos people produce. When you write it, you actually feel like engine creator and not just like a person who uses one of existing solutions. I posted the same answer with different details like 30 times already. I hope you can forgive me that I cant give you compilation of all those threads Of course I would like someone to actually go through all that and compile article for PixiJS wiki ( https://github.com/pixijs/pixi.js/wiki ). We are waiting when that hero arrives.
  6. 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?
  7. 1 point
    Thanks for your replies. I opened a GitHub issue with info and demo: https://github.com/pixijs/pixi.js/issues/6424 See the demo at: https://www.pixiplayground.com/#/edit/jogREV4Vj-gqrZTLI_Hoh
  8. 1 point
  9. 1 point
    space.game Welcome to our open Alpha of space.game! We'll be constantly updating the game and will be adding new features such as online multiplayer, new game modes, accounts, friends, leaderboards, store, and more! Game Description Claim as much territory as you can by strategically flying your spaceship around the map. You’re invincible while inside your territory and can kill anyone entering your space. Outside of your territory, other players can hit your trail and destroy your spaceship. If you hit another player’s trail, you’ll destroy their spaceship. A head to head collision results in both spaceships being destroyed.
  10. 1 point
    Like it. Very charming, juicy neon graphics.
  11. 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
  12. 1 point
    @PLAYERKILLERS test build with the fallback fix to Canvas is available, see here https://github.com/melonjs/melonJS/issues/982
  13. 1 point
    themoonrat

    on events not working on sprite

    asset.interactive = true; Rather than your setInteractive property
  14. 1 point
    Thanks for help! First, I try to replace pixi 5.2.1, the problem still happened. Next, re-creating TextureSystem and resetting the renderer state really have no effect.... But, when I only try to binding baseTexture or "baseTexture.update()" or "baseTexture.setSize()" on every upload, It seem work! Anyway, I try to present the bug and process in detail by video and picture. It use Jsmpeg and FFmpeg trans RTMP stream to yuv data, and convert yuv to rgb texture. Refer attach code above, I use PIXI.resources.Resource to call gl.texImage2D and baseTexture format, and try to update Texture of yuv on every upload. Situation1: No bind baseTexture and call gl.texImage2D every custom updateDataMethod(setUint8Array) , only call gl.texImage2D on upload once. Result: Mesh only show one frame texture data. can't follow video stream to update texture. Situation2: Call gl.texImage2D on upload once, bind baseTexture and call gl.texImage2D every custom updateDataMethod(setUint8Array). Result: Other sprite's texture confuse refer with mesh's texture. Situation3: Only Bind baseTexture every custom updateDataMethod(setUint8Array), and call gl.texImage2D on upload once. Result: It's look good, sprite's texture and mesh's texture correct. Actually, I try to change "this.bind(this.baseTexture)" to "baseTexture.update()" or "baseTexture.setSize()", the result is same. Just like you said, It will change all updateID's , and TextureSystem wlll see that texture was changed on bind. It seem ok, thanks for help to solve that question!!
  15. 1 point
    Hello community, I have a Graphics, say a circle, and inside i nest another circle with addChild property. If to both the graphics i add a listener such as "mouseover", how do i prevent the "father" to fire when i'm just hovering the "child" circle? Regards.
  16. 1 point
    jacek

    Platformowka - retro platformer

    Hi all! I made a simple platformer, a hobby project done in free time. It is a HTML5 port of a game I made in Pascal as a teenager over 20 years ago. I improved a lot of things in terms of game mechanics, level design, etc. but the graphics are all original - hand drawn in MSPaint somewhere around 1998 I have a bit of nostalgia for this game and I can find some charm in its style but probably the reality is that it just looks ugly. I would like to get some feedback whether it's playable nevertheless, what can be improved and whether the graphics disqualifies it or not. The game has 4 levels, difficulty gradually increases with later levels. It works on both mobile and desktop - on desktop it's easier to play as you can use the keyboard to control rather than touch. I can beat it on a mobile phone without problems but I played it a lot during playtesting so got used to the controls. It's coded from scratch and uses pixijs for drawing. It's my first complete HTML5 game, I hope someone will enjoy it Here is the link: http://platformowka.pl
  17. 1 point
    http://pixijs.download/release/docs/PIXI.interaction.InteractionEvent.html#stopPropagation
  18. 1 point
    Vlados

    Nested Event Listeners problem

    You can use property .currentElement to check possition of your mouse (above which element it is - whether parent of child) Also take a look at optional third parameter of eventlistener - capturing
  19. 1 point
    I see you've tried many things 1. re-creating TextureSystem second time 2. resetting the renderer state, binding/unbinding resource to baesTexture 3. binding/unbinding resource to baseTexture on every upload Unfortunately, that all should not affect behaviour. I dont know what is wrong with your case, I dont actually have websocket server with a video locally. Even without video, I dont know what is supposed result of that demo and what you see is wrong with it. Can you provide more information? I'm sure I can fix that and make your code much smaller if I at least see the bug with my eyes However, you use pixi 5.2.0 - maybe 5.2.1 or dev version ( pixijs.download/dev/pixi.js ) will work better, I remember we fixed something related to texture bind
  20. 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.
  21. 1 point
    Hi, i'm a beginner at pixi.js so please bear with me! I'm trying to add a sprite of a certain type whenever the user presses a button. However I need all the sprites to be moving towards the right every frame. So for now I have the following code triggered when the user presses a button: egg = new PIXI.Sprite(PIXI.loader.resources["images/newegg-02.png"].texture); pubviewport.addChild(egg); Which works fine, however I'm not sure how to access the X and Y values of all the eggs that currently exist in order to move them. In the gameLoop function, just adding an egg.x += 4 doesn't work, so what do I do? Have also tried a for loop like so: for (var i = 0; i < pubviewport.children.length; i++){ pubviewport.getChildAt(i).x += 4; } Thanks A
  22. 1 point
    Menakatep

    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!
  23. 1 point
    Thank for answer again! Actually, I try to make video yuv to rgb in pixi.texture. After decoded video data bind to three textures(yTexture, uTexture, vTexture), pixi.shader trans to rgb values in pixi.geometry, when video decoded data keep coming, that need to update textures(yTexture, uTexture, vTexture). It's ok that run only one yuv to rgb geometry in canvas, but add other sprite, the textures confuse problem happened. attach demo code. pixi_YUVRGB_demo.zip
  24. 1 point
    which edit do you have for texture packer, is it the one for the free texture packer we also added in 8.0 ? as for the gravity, yes, as part of the 8.0 version (major version increase, so some breaking changes) we revamped a bit the physic implementation to be closer to those physic engine out-there (with the will to be able to use one of them through a plugin) and as a consequence we now have a world global gravity settings that can then be lowered or amplified per physic object (instead of previously where each object gravity were managed separately), see here for the detailed changes : https://github.com/melonjs/melonJS/wiki/Upgrade-Guide#71x-to-800 but if you switch to 8.0, you can just disable the gravity by setting me.game.world.gravity to 0 (it's a vector) and you should be back to the previous 7.x behavior. last but not least as part of the WebGL testing I think we should then try to compile/link the built-in shaders and if failing then display a error message in the console and revert back to the canvas renderer, l'll look into it this week.
  25. 1 point
    I'll try to to reduce the number of lines, I never quite captured the idea of the chrome debugger. but before I do, your suggestion gave me an idea, I might try to examine the stage property.
  26. 1 point
    I expected the visual propety to be deleted, removed from the stage. the cube object exist on the board and when I normally use this command it works fine. later in the code I discard the object and I let the garbage collector "do it's thing": user_cubes[i].pop(); user_cubes[i].pop(); and thanks for the nice greeting into the forums, I am glad to have a place to consult about my PIXI development problems
  27. 1 point
    Jammy

    Offroad Mania — free keys for feedback

    I played the browser version and thought it was so good and pure I checked out the steam and the price I felt was also very fair so i had to buy it for myself to support the project. Would it be possible at all to play it on my iPad? Good luck with the recent launch!
  28. 1 point
    yulijun

    Pixi.js Showcase

    hi I have made a jigsaw game with pixi.js. hope you guys like it. try it online : http://testactivity.goooku.com/ishop-demo/jigsaw/index.html source code : https://github.com/proudcat/pixi-jigsaw
  29. 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.
  30. 1 point
    Thanks, Ivan, No pressure. I am exploring options. Do you think this approach will be better performant than png sequence?
  31. 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.
  32. 1 point
    enpu

    Panda 2 Tips & tricks

    How to display icons in your projects list instead of screenshot? Just place icon.png file in the root of your project. Optimal size is 120x120.
  33. 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.
  34. 1 point
    samme

    Tween inside mouseover event

    var tween = (undefined).add({ targets: heart, alpha: { value: 0, duration: 3000, delay:2000}, });
  35. 1 point
    Ziao

    Where are the Layers?

    For anyone looking for similar functionality - I've created a temporary solution until Containers are added to Phaser 3. Feel free to let me know if this works for you https://www.npmjs.com/package/phaser3-interim-containers
  36. 1 point
    Hi there, We are trying to make a very innovating web game and we are seeking developers or a team to create our game. We are not yet decided on frameworks or any technologies. Although we are very interested in HTML5 & no flash. This game will be very social media integrated. Here would be a sample but just much more creative.... http://www.lunarcafe.com/fun-games/3-card-tarot-reading-free If you believe you can help, Please email me at: Arian.y@pacificmez.com Thank you