https://github.com/miltoncandelero/hellopixidragonbones

The examples of pixi dragonbones running in a webpack build
https://github.com/miltoncandelero/hellopixidragonbones

demo dragonbones game-development html5 pixijs pixijs-v5 typescript webpack

Last synced: about 1 month ago
JSON representation

The examples of pixi dragonbones running in a webpack build

• Host: GitHub
• URL: https://github.com/miltoncandelero/hellopixidragonbones
• Owner: miltoncandelero
• Created: 2020-04-29T21:10:28.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T17:39:55.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T07:19:27.594Z (9 months ago)
• Topics: demo, dragonbones, game-development, html5, pixijs, pixijs-v5, typescript, webpack
• Language: JavaScript
• Homepage:
• Size: 17.8 MB
• Stars: 8
• Watchers: 1
• Forks: 4
• Open Issues: 18
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Hello Pixi Dragonbones

*(Also known as: How to use Dragonbones with Pixi5 and Webpack without going insane)*

[![For added shock](blackmagic.gif)]

*(Internet explorer for dramatic purposes)*

## This is meant to be used with Yarn 🐱 

*(however you should be able to use npm)*

### This boilerplate includes:

- PixiJS v5 *(the thing you came for)*

- DragonBones *(the other thing you came for)*

- Typescript *(making javascript a better place)*

- stats.js *(to know how fast are you going)*

- dat.gui *(to make the cool demo selector)*

- Webpack *(will make all your code into an ugly ball)*

  - Webpack Dev Server *(will host said ugly ball to debug locally)*

  - HTML Webpack Plugin *(will help your code have an index.html)* 

  - Copy Webpack Plugin *(will copy your assets to your build)*

- ESLint *(will force your code to be pretty)*

  - ESLint Typescript *(will make ESLint actually work for typescript)*

  - ESLint Prettier *(will force your code to be prettier!)*

- .gitIgnore and .gitAttributes *(my paranoid approach to configuring git)*

## How to use:

**Step 0:** Get Yarn (classic). https://classic.yarnpkg.com/lang/en/  

Honestly I don't know exactly why it is better than npm but it has a cute kitty, I am sold

**Step 1:** Clone the repo (or download as ZIP)

**Step *1.5:*** If you cloned the repo, detach yourself (delete the .git folder).

**Step 2:** Run `yarn install` (or if you are a rebel, `npm install`)

**You are done**  

Now you can run `yarn run test` to build, start watching your source code (rebuilds when you save) open a `localhost:3000` server so you can test in your own browser!

Try `yarn run build` to make a build in a folder called `build`. You can cut this folder since your assets were copied from your assets folder. No more keeping your assets in the dist folder like a caveman!

Finally, try `yarn run lint` to make your code look prettier.

---

## Major things I learnt:

* Force Webpack to create a `PIXI` global object with this simple trick: `new webpack.ProvidePlugin({ PIXI: 'pixi.js' }),`.

* Original examples used a manually created (and deprecated) `WebGLRenderer`. This uses the integrated renderer in Pixi's `App`.

* Some animations names are reused. `dragonBones.PixiFactory.factory.clear()` will reset the factory allowing for clean loading of the samples.

* For some strange reason, even if you have all the assets preloaded, if you try to render a mesh deforming animation immediately after creation you will crash. Wait a bit and then `addChild` it.

* Somehow, someway, this works in Internet Explorer. I don't know what kind of black magic is this.

---

## Demo Files

The demo files are the one provided by the dragonbones repo.  

Copyright (c) 2012-2018 The DragonBones team and other contributors.