{"id":22963142,"url":"https://github.com/samuelasherrivello/pixi-html5-examples","last_synced_at":"2025-08-13T06:34:44.948Z","repository":{"id":248014609,"uuid":"822732262","full_name":"SamuelAsherRivello/pixi-html5-examples","owner":"SamuelAsherRivello","description":"PixiJS Html5 TypeScript examples showcasing several exciting features of the technology.","archived":false,"fork":false,"pushed_at":"2024-08-03T17:22:26.000Z","size":20551,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-08-04T15:37:17.566Z","etag":null,"topics":["game-development","html5","pixijs","typescript"],"latest_commit_sha":null,"homepage":"http://SamuelAsherRivello.com/html5-portfolio","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SamuelAsherRivello.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-01T17:51:08.000Z","updated_at":"2024-08-03T17:22:30.000Z","dependencies_parsed_at":"2024-08-03T15:44:26.795Z","dependency_job_id":null,"html_url":"https://github.com/SamuelAsherRivello/pixi-html5-examples","commit_stats":null,"previous_names":["samuelasherrivello/pixi-html5-examples"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SamuelAsherRivello%2Fpixi-html5-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SamuelAsherRivello%2Fpixi-html5-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SamuelAsherRivello%2Fpixi-html5-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SamuelAsherRivello%2Fpixi-html5-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SamuelAsherRivello","download_url":"https://codeload.github.com/SamuelAsherRivello/pixi-html5-examples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229744990,"owners_count":18117662,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["game-development","html5","pixijs","typescript"],"created_at":"2024-12-14T19:20:55.658Z","updated_at":"2024-12-14T19:20:56.139Z","avatar_url":"https://github.com/SamuelAsherRivello.png","language":"TypeScript","readme":"# PixiJS Html5 Examples\n\nThis repo includes Html5 examples using [PixiJS](https://pixijs.com/) and [TypeScript](https://www.typescriptlang.org/).\n\nIt is based on Samuel Asher Rivello's [GitHub.com/SamuelAsherRivello/pixi-project-template/](https://github.com/SamuelAsherRivello/pixi-project-template/) which is a recommended starting point for new projects.\n\n\u003cfigure\u003e\n    \u003cimg alt=\"screenshot\"\n        src=\"./PixiJS/documentation/Screenshot01.png\"\n        width = \"600\"\n        \u003e\n    \u003cfigcaption\u003eImage 1 - PixiJS Game Engine - Html5 + WebGPU\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n### Table of Contents\n\n1. [Getting Started](#getting-started)\n1. [Project Overview](#project-overview)\n1. [Credits](#credits)\n\n\u003cBR\u003e\n\n\n# Getting Started\n\n\n\n### Play The Examples\n\n1. Open [SamuelAsherRivello.itch.io/pixi-html5-examples](https://samuelasherrivello.itch.io/pixi-html5-examples)\n1. Click `Run game` button (center)\n1. Click `Fullscreen` button (lower-right)\n1. Click `Escape` key to quit\n1. Enjoy !\n\n\n### Build The Examples\n\n1. Download this repo (*.zip or *.git)\n1. Install dependencies. Open the `PixiJS` folder in command line...\n    * Run `npm install` to download and install dependencies\n1. Build the game. Open the `PixiJS` folder in command line...\n    * Run `npm run client-build` builds the game\n    * Run `npm run client-start-watch` launches a server to localhost\n1. Play the game at [localhost:3000](http://localhost:3000)\n1. Open the `PixiJS` folder in [Visual Studio Code](https://code.visualstudio.com/) or your favorite editor \n1. Do your game development\n1. Optional: When you add/update files within the `PixiJS` you may need to repeat step 3. See [Webpack Beginner's Guide](https://medium.com/javascript-training/beginner-s-guide-to-webpack-b1f1a3638460) for more info\n1. Enjoy !\n\n\u003cBR\u003e\n\n### More Commands\n\nYou can run these terminal commands during your workflows.\n\n| Command                      | Description                                    | Builds? | Runs?   | Tests?  | Watches?  |\n|------------------------------|------------------------------------------------|---------|--------|--------|----------|\n| `npm install`                | Required: Download and install dependencies        | ❌      | ❌     | ❌     | ❌       |\n| `npm run client-build`       | Required: Build app                                | ✅      | ❌     | ❌     | ❌       |\n| `npm run client-start-watch` | Required: Run app on localhost                     | ❌      | ✅     | ❌     | ✅       |\n| `npm run tests-start-watch`  | Optional: Run unit tests                           | ❌      | ❌     | ✅     | ✅       |\n\u003cBR\u003e\n\n\n# Project Overview\n\n### Screenshots\n\n| 1. Cards       | 2. Text       | 3. Particles       |\n|---------------|---------------|---------------|\n| \u003cimg width=\"200\" src=\"./PixiJS/documentation/Screenshot02.png\"\u003e | \u003cimg width=\"200\" src=\"./PixiJS/documentation/Screenshot03.png\"\u003e | \u003cimg width=\"200\" src=\"./PixiJS/documentation/Screenshot04.png\"\u003e |\n\n\n### Features\n\n| Feature | Complete | Comment |\n|---------|----------|---------|\n|   Pixi JS      |    ✅      |   Very fun! v8.x     |\n|   TypeScript      |    ✅      |   I'm a noobie. It's way better than vanilla JS!      |\n|   FPS Display      |    ✅      |   With textfield      |\n|   Aesthetics      |      ✅    |    Looks good     |\n|   Performance      |      ✅    |    Works well (~250 FPS)     |\n|   Architecture      |      ✅    |    Consistent but informal. See my [C# Architecture](https://bit.ly/mvc-architecture-for-unity-on-udemy)    |\n|   Project Structure      |      ✅    |    Consistent. Format WIP    |\n|   Readability      |      ✅    |    Has main entry point, and clear separation of examples   |\n|   Errors-Free      |       ✅   |  Nice!      |\n|   Warning-Free      |       ⚠️   |  Has one deprecation warning. Fix is TBD. #TimeConstraint       |\n|   Responsive Design      |      ⚠️    |    Examples do relayout() upon app resize. WIP. Good locally, so-so on itch.io. #TimeConstraint    |\n|   Coding Standards      |      ⚠️    |    My JS standards are WIP. See my [C# Standards](https://www.samuelasherrivello.com/best-practices). #TimeConstraint |\n|   Documentation      |      ⚠️    |    Limited. #TimeConstraint    |\n\n\n### Structure\n\n\n**Documentation**\n* `ReadMe.md` - The primary documentation for this repo\n* `PixiJS/documentation/` - More info specific to the project\n\n**Configuration**\n* `Game Engine` - [PixiJS](https://www.pixijs.com/) is a flexible and fast 2D rendering library for web-based graphics and games\n\n**Structure**\n* `PixiJS` - Contains the main project folder\n* `PixiJS/assets/images/.html` - User-facing image assets\n* `PixiJS/public/index.html` - The main HTML file for structure\n* `PixiJS/src/css/styles.css` - The main CSS file for styling\n* `PixiJS/src/scripts/index.ts` - The main TS file for game logic. Do your work here :)\n\n**Dependencies**\n* `./PixiJS/package.json` - Lists project dependencies and scripts. When you run `npm install` it installs whatever is here\n\n\u003cBR\u003e\n\n\n# Credits\n\n**Created By**\n\n- Samuel Asher Rivello \n- Over 25 years XP with game development (2024)\n- Over 11 years XP with Unity (2024)\n\n**Contact**\n\n- Twitter - \u003ca href=\"https://twitter.com/srivello/\"\u003e@srivello\u003c/a\u003e\n- Git - \u003ca href=\"https://github.com/SamuelAsherRivello/\"\u003eGithub.com/SamuelAsherRivello\u003c/a\u003e\n- Resume \u0026 Portfolio - \u003ca href=\"http://www.SamuelAsherRivello.com\"\u003eSamuelAsherRivello.com\u003c/a\u003e\n- LinkedIn - \u003ca href=\"https://Linkedin.com/in/SamuelAsherRivello\"\u003eLinkedin.com/in/SamuelAsherRivello\u003c/a\u003e \u003c--- Say Hello! :)\n\n**License**\n\nProvided as-is under MIT License | Copyright © 2024 Rivello Multimedia Consulting, LLC\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuelasherrivello%2Fpixi-html5-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamuelasherrivello%2Fpixi-html5-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuelasherrivello%2Fpixi-html5-examples/lists"}