Leaderboard


Popular Content

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

  1. 3 points
    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."
  2. 2 points
    yulijun

    Pixi.js Showcase

    How to make pixi.js game with webpack step by step. The tutorial is focus on how to build development environment from initizlize the project to publish the project. the tutorial is here https://github.com/proudcat/pixi-webpack-demo , welcome to star.
  3. 1 point
    Hello. I have problem with dynamic change sprites texture. So the flow of the app is: I have two containers which overlap themselves. On the bottom I have container with one quite big image (6283x1024, 1MB) and on the top I have container for same image but tiled. Into the top container I put tiles (1024x1024, 100 - 300 KB) in a better quality. When app starts at the beginning I put only image for the bottom container in one sprite and prepare structure for the top(tiled) container - sprites without texture but with proper width/height/x pos/y pos. While sliding image (left or right) I detect which sprites from the top tiled container are visible on the screen and for those which are, I download images and replace textures. If all textures are loaded for the tiled container then I hide the underneath container and display tiled image in high quality. Tiled container has higher z-index then the second container, to make the image consistent while tiles are being downloaded. I have also slider service which uses ticker for auto-slide (left / right). The problem is that, when I replace textures I have lags and fps drops - from 60 to ~20-30. Is there a way to keep proper fps while replacing textures and keep the slide smooth without lags? Some code which belongs to my custom sprite class which extends Sprite class: // Detect if the sprite is on the screen isOnTheScreen(): boolean { const globalPosition: Point = this.getGlobalPosition(); return globalPosition.x + this.width > 0 && globalPosition.x < window.innerWidth; } // load it load(): void { if (this.isLoaded) { return; } this.isLoaded = true; this.loaderService.load$(this.source).subscribe((resources) => { const texture: Texture = resources[this.source].texture; this.canvasService.app.renderer.plugins.prepare.upload(texture, () => { this.texture = texture; }); }, // ToDo: error handling, perhaps retry downloading tiles once again. () => { this.isLoaded = false; }, () => { this.event$.unsubscribe(); }, ); } // event which says if we slide the image or do any other interaction setEventSubject(event$: Subject<boolean>) { this.event$ = event$.subscribe((detect: boolean) => { if (detect && this.isOnTheScreen()) { this.load(); } }); } // Slider service // ticker code which is in slider service this.ticker.add((delta) => { nextX = this.imageService.position.x - 5 * Math.round(delta); this.imageService.updatePositionX(nextX); this.canvasService.moveSprites(); // the event which goes to each sprite to start detection if they are visible on the screen this.canvasService.interactionEventTrigger$.next(true); }
  4. 1 point
    Yes, there is. Its called createImageBitmap, and its difficult to use, because the footpath is traveled only by a few people. 1. You have to submit special parameter to ImageResource https://github.com/pixijs/pixi.js/blob/67ff50884ba0b8c42a1011598e2319ab3039cd1e/packages/core/src/textures/resources/ImageResource.ts#L33 2. Currently its not possible to do it through loader, we know about that for several month and nobody did anything. It happens in open-source collectives. https://github.com/pixijs/pixi.js/blob/67ff50884ba0b8c42a1011598e2319ab3039cd1e/packages/loaders/src/TextureLoader.ts#L24 - it does not pass any params from resource metadata, so you cant actually affect it. If you want to help with it - please create issue at github, then the rest of the team will pick it up. 2a. actually, you can enable that setting globally - but it can affect other places of your application, prepare for strange effects 2b. you can pass that param if you use "Texture.from(myUrl, options);" instead of loader 3. Even when you solve 1. and 2. there might be other problems regarding asynchronous decoding of image resource, so you have to read up how actually createImageBitmap works - its not pixi function, its browser one. We had only a few users who enabled that mode and used it, so there are not much experience about it. IF you find something wrong - dont hesitate to ask us, of course, if you have a demo Good luck!
  5. 1 point
    Regular pixi text or one of advanced plugins, something was mentioned in one of latest threads... I dont remember which one
  6. 1 point
    Using gsap solved my problem, another little thing how can a display a box(100x100) with text on this slideshow
  7. 1 point
    Hello, and welcome to the forums! Looks like a general JS problem. Someone will help you with code, I'm sure My two bits: 1. you can just add handler to pixiapp.ticker and remove it afterwards , instead of creating new one. IT doesnt matter in your case, but I want to make sure you know about that option 2. store images in array, store current image in a variable. 3. Usually scale is not by width/height, its by "scale" parameter and its exponential. Read up what "element.scale" is. 4. Usually people use tweens for that kind of stuff. Praise GSAP ( https://pixijs.io/examples/#/gsap3-interaction/gsap3-basic.js , google GSAP) . Its totally fine to write on your own first, because you need to understand how such things work.
  8. 1 point
    Oh, its a new scene problem! Then you have a few options 1. Destroy all textures and re-load all the assets 2. Dont destroy textures, dont pass "texture:true" in recursive destroy. - in that case you share assets between two scenes 3. Some textures are shared some are not.. Well.. you have to know how loader and everything else related to assets work to make that work Lets think about 2) Instead of going through those If's , why not just make scene a child of stage? stage.addChild(scene) ... scene.destroy({ children: true }); // destroy only texts textures and containers/children . All referenced textures are alive! // now scene does not exists even in stage. IF you dont want to do that, well, you can destroy() whole stage and recreate it with "app.stage = new PIXI.Container()" - its fine. Or you can use those FOR's but just regular FOR with backwards iterator for (let i=children.length-1;i>=0;i--) { children[i].destroy({children:true}); } and {children:true} is the same as "true" in that case. Now I remembered it > You misunderstood Ivan anwser I think. VVV yeah, I just posted all the data i know instead of thinking about user problem, it happens
  9. 1 point
    Best way is "stage.removeChildren()" but you might need some extra stuff if you want to manage your Texts differently or Textures - destroying texts is a problem because... well.. i dont have time to explain, here's one of those threads, you can search more: https://github.com/pixijs/pixi.js/pull/6427 Read up removeChildren() code anyway. If you use destroy() of all children , do it with backwards iteration, that way you wont trigger the problem you encountered. Or copy the array of children before you iterate through it.
  10. 1 point
    ephraimt

    Sprite from buffer

    I am not asking for it. There are probably more important things for the team to work on!
  11. 1 point
    There's https://github.com/Mwni/PIXI.TextInput
  12. 1 point
    bubamara

    input element z-Index in pixi.js

    You're welcome. If you need to combine those two inside of pixi stage, you'll have to write your own pure pixi input unfortunatelly
  13. 1 point
    ephraimt

    Sprite from buffer

    "pixi.js-legacy": "^5.2.0" Using canvas renderer. My alternate method of creating an image Sprite is to use PIXI.Loader and then to pass the resulting resource.data to PIXI.Texture.from(). That works fine, so it seems the difference is isolated to the creation of the texture.
  14. 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.
  15. 1 point
    xerver

    Tile Rendering Performance

    If you're using the Tiled map editor, then gl-tiled can help render large maps efficiently (WebGL only).
  16. 1 point
    ivan.popelyshev

    Pixi.js Showcase

    Done. https://github.com/pixijs/pixi.js/wiki/v5-Boilerplate
  17. 1 point
    jonforum

    Pixi.js Showcase

    i think it can be good also in boilerplate, it a good starter and the only one without typescript!
  18. 1 point
    b10b

    How do you keep the size below 3MB

    Not so long ago games needed to fit on a floppy disk ...so 3MB is a luxury imo To keep things small consider these easy wins. Javascript minification and dead-code removal. Lower bitrates for audio (combined with shorter duration and more imaginative looping). Pngquanting (8bit) bitmaps whenever possible. Keep every asset pristine, making every byte count. Example: https://b10b.com/grandprixhero/ (2.9MB total) And 3MB is by no means a hard-edged requirement, it's a recommendation based on FB's observations of their audience. If you can achieve it then the game may get more exposure and higher retention, but heavier games can still be viable too. What's most important for FB IG is virality and social connection.
  19. 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.
  20. 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.
  21. 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?
  22. 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
  23. 1 point
  24. 1 point
    Hi greencoder, due too the lack of support from enpu and the diminishing community, I decided to rewrite my current project to Phaser3. don’t worry, I will still respond to questions about panda in this forum that I can answer quickly. 😊
  25. 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.
  26. 1 point
    Like it. Very charming, juicy neon graphics.
  27. 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
  28. 1 point
    @PLAYERKILLERS test build with the fallback fix to Canvas is available, see here https://github.com/melonjs/melonJS/issues/982
  29. 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
  30. 1 point
    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!
  31. 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.
  32. 1 point
    OkijinGames

    Why not just make native games?

    Thanks vornay for mentioning Okijin Games Honestly, my experience tells a different story. I have been making a living exclusively from this business for the past 3 years and I am confident that there's many more opportunities ahead. First, the thinking that you will necessarily make more money on bigger marketplace than smaller one is wrong. In the same vein as elevator's speeches where the business owner tries to convince investors that because the market has 1 billion potential customers, if he gets only 1% of it they would be rolling on the money. In reality, larger marketplace means more competition, higher production values, higher budgets then much harder exposure. I could run a campaign to 40K installs on Windows Phone for $500 in 2013... How many new players would I get for that budget on iTunes or Google Play? The size of the marketplace only matters for the bigger companies. For the rest of us, we should go where user acquisition is the cheapest, that is all that matters. And if we ever reach that point where we need a bigger marketplace then I would say this is a "nice" problem to have for any business! And then this is just the surface, you need a game that can pay you back. What's the expected ARPU (average revenue per user) for a game made in 2 weeks and a "Remove Ads" Button as entire IAP strategy? The reality is that your only chance to cash in is to pray the gods for your game to go viral (so you don't have to spend a dime in user acquisition) - and this is a strategy that could have you waiting for a life time, very similarly to people playing the lottery (and I am not saying don't try). ARPU for a game like flappy birds is at best 0.01 (and yes with 5M daily users it comfortably pays the bill) but if the developer had to pay for user acquisition at that scale he would have probably lost money at the end with that game. True, HTML5 games quality is a step behind but is good enough to compete in several game categories (puzzle, casual...). I am confident that many players cannot really tell the difference between native or not with my latest game Sailor Pop, just released on Google Play. We are catching up Finally, if you have any game idea I would encourage you to just go for it and make it a reality and release it somewhere - anywhere. Don't waste too much time in existential thoughts about which technology and best place to release, go with what can make your project a reality. If you meet success, then again, all problems will be nice to have (porting to another platform, growing user base etc). People have been making much money with only targeting one platform. In Korea where I live, there are game businesses (SundayToz...) making millions mainly targeting the local KakaoTalk platform (the number 1 messenger app there).
  33. 1 point
    FlashyGoblin

    How to destroy scenes

    Is there a way to destroy a scene and all of it's dependancies? I would like to create a 3D scene that would act as a launching pad to load other scenes. Then be able to go back to the launch pad scene to choose another one, but would first like to clean up the current scene to free up memory. It's important that we stay within the same BABYLON.Engine object. I hope that makes sense. Any thoughts about this approach? Thanks in advance!
  34. 1 point
    Deltakosh

    How to destroy scenes

    Hey, this makes complete sense, just call scene.dispose()
  35. 0 points
    bubamara

    input element z-Index in pixi.js

    yes, not possible with HTML elements. You can position HTML element only above or below Pixi canvas.