AnDG

Members
  • Content Count

    16
  • Joined

  • Last visited


Reputation Activity

  1. Like
    AnDG reacted to ivan.popelyshev in Is it possible to use a Sprite to load an iframe element?   
    No, it will be basically texture copy, its not the most heavy operation, there are worse things. The problem is how do you get access to the canvas inside iframe.
  2. Like
    AnDG reacted to ivan.popelyshev in Is it possible to use a Sprite to load an iframe element?   
    Suppose you have a invisible canvas with that game somewhere on page.
    create a texture out of it : "Texture.from(outerCanvas)" , use it in a sprite (same as "Sprite.from" actually).
    every frame you should 
    1. call render of that game
    2. call "texture.update()" of that texture you made from canvas
    3. call pixi render.
    If you are lucky, simple "app.ticker.add(() => { texture.update(); } )" should work , if not - study how to make your own application or add a handler before pixi renders: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop, . Maybe "app.ticker.add(() => { outerGame.render(); texture.update();} )" works, maybe you'll have to put it all in "render" method of your application, i dont know, you should debug it.
    This "convert other canvas to texture for our renderer" trick should work and have good performance everywhere except Edge (old edge, not chromium edge). You cant pass iframe there, but if you somehow get access to canvas - yes, it should work because PixiJS has Canvas->Texture convertor in "CanvasResource" thingy, I mentioned resources in first post.
  3. Like
    AnDG reacted to ivan.popelyshev in Is it possible to use a Sprite to load an iframe element?   
    OK, just dont try "load as texture" aka `Sprite.from()` approach , I dont think it actually work. Try whatever minimal stuff you can possibly do: two canvases. You can even use pixi-legacy.js and 2 CanvasRenderer to simplify stuff for now, separate your stage into "before external canvas" and "after external canvas". 
    Actually if you have that game sources you can really inject it into your stage if its webgl or canvas2d, need to look closer.
  4. Thanks
    AnDG reacted to ivan.popelyshev in Is it possible to use a Sprite to load an iframe element?   
    Maybe I and @eXponetacan help if you provide minimal demo in a zip file. We'll host it on server ("http-server -c-1" as default node-js server) and look if its actually something possible. Without minimal demo there are just too many things that can go wrong and we'll get stuck in it.
  5. Like
    AnDG got a reaction from ivan.popelyshev in Is it possible to use a Sprite to load an iframe element?   
    Thanks for your prompt and helpful response Ivan, I've been following you for a long time and still look forward to your assistance. I actually used a canvas element to create my game but due to the fact that I had to download another game on the section from iframe to display on my game, it interacted back and forth. between the 2 canvas elements of the game and the iframe closely. But the iframe is just a DOM element so I don't want to use it. I just want to put this iframe element in the same canvas as my current game so I can manage it best. I used from () to display a video element and it was successful but it was really difficult to load it as an iframe.
  6. Sad
    AnDG reacted to eXponeta in Is it possible to use a Sprite to load an iframe element?   
    Hah.

    U can't direct load iframe as texture, it is unpossible by design. iframe is a DOM container. How me should upload it to GPU mem?
    U can use split renderer: that means, that there are canvas before iframe and after that and u sort ALL graphics object between. But there are problem - pixi can't support multicanvas renderer, u should run 2 separated Renderers and manyally select that rendered in first canvas before iframe and that rendered on secondary canvas.

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

  9. Like
    AnDG got a reaction from ChenXin in How to apply two different textStyle to One Text   
    https://github.com/tleunen/pixi-multistyle-text
    Use this one! 
  10. Like
    AnDG got a reaction from WhiteRabbit in How to apply two different textStyle to One Text   
    https://github.com/tleunen/pixi-multistyle-text
    Use this one! 
  11. Like
    AnDG reacted to xerver in Prepare and Destroy Texture from Video   
    I think you are misunderstanding. This is not a limitation of PixiJS. This is how WebGL works. We have to upload each frame to render it, there is no other option. Either that works for your use case or it doesn't, but either way there isn't anything we can do about it.
    Specifically answering your question: No, PixiJS was not built specifically to work on cordova. We built it to work in the browser, on mobile and desktop. However, we do try to support Ejecta, CocoonJS, Cordova, et al.
  12. Like
    AnDG got a reaction from Jonny Shaw in CacheAsBitmap and reuse   
    In my slot games, I usually use the animatedSprite for images on each reel and use TweenMax to make slot effects. Typically, the use of animatedSprite for slot games is much better with using spines.