Initial commit

This commit is contained in:
MiltonCandelero
2020-09-03 22:58:43 -03:00
commit 28901ad7c3
8 changed files with 7408 additions and 0 deletions

4
.gitignore vendored Normal file
View File

@@ -0,0 +1,4 @@
.vscode
.cache
dist
node_modules

16
README.md Normal file
View File

@@ -0,0 +1,16 @@
# PixiJS Typescript Parcel Example
PixiJS app using TypeScript & Parcel Bundler
## Getting started
Clone and install deps
```
git clone git@github.com:lucas-jones/pixi-ts-parcel-example.git
cd pixi-ts-parcel-example
yarn
yarn start
```
Then open `http://localhost:1234` and edit `index.js` and press save. Parcel
will automagically hot reload you files whenever you make changes.

7277
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

15
package.json Normal file
View File

@@ -0,0 +1,15 @@
{
"license": "",
"scripts": {
"start": "parcel serve src/index.html --open",
"build": "parcel build src/index.html"
},
"dependencies": {
"pixi.js": "^5.3.3"
},
"devDependencies": {
"parcel-bundler": "1.12.4",
"parcel-plugin-static-files-copy": "^2.5.0",
"typescript": "^4.0.2"
}
}

33
src/index.html Normal file
View File

@@ -0,0 +1,33 @@
<html>
<head>
<title>Pixi Hotwire</title>
<meta id="viewport" name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#pixi-content {
background: #000000;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<noscript>Please enable JavaScript in your web browser to view this page.</noscript>
<div id="pixi-content"><canvas id="pixi-canvas" /></div>
</body>
<script defer src="./index.ts"></script>
</html>

18
src/index.ts Normal file
View File

@@ -0,0 +1,18 @@
import { Application, Sprite } from 'pixi.js'
const app = new Application({
view: document.getElementById("pixi-canvas") as HTMLCanvasElement,
resolution: window.devicePixelRatio || 1,
backgroundColor: 0x6495ed,
width: 640,
height: 480
});
const clampy: Sprite = Sprite.from("clampy.png");
clampy.anchor.set(0.5);
clampy.x = app.screen.width / 2;
clampy.y = app.screen.height / 2;
app.stage.addChild(clampy);

BIN
static/clampy.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

45
static/clampy.svg Normal file
View File

@@ -0,0 +1,45 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 512 512" xml:space="preserve">
<g id="Layer_2">
</g>
<g id="Layer_1">
</g>
<g id="Layer_3">
<g>
<g>
<polygon fill="#E91E63" points="256,86 227,86 227,98 100,81 73,94 67,116 78,141 111,153 226,170 229,186 256,186 "/>
<path fill="#E91E63" d="M80,264l78-16c0,0,65-13,66-15s4-15,4-15l28,1v99h-27l-3-16c0,0-122,26-124,26s-20-12-22-10s-13-12-13-12
l-3-18c0,0-1-8,3-12S80,264,80,264z"/>
<path fill="#FFFFFF" d="M269,111l202,26l8,13v36h-15l-22-12l-20,9c0,0-13-5-16-4s-18-9-18-9s-10,10-14,9s-38-6-38-6l3,52l28-7
l17,7l24-11l19,1l14,6c0,0,22-13,24-11s14,3,14,3v35l-20,14l-190,25h-13v-64.5l13,0.5v-51h-10l-3-63.6L269,111z"/>
<g>
<path d="M263.7,87c0-4.2-3.4-7.7-7.7-7.7h-30.7c-4.2,0-7.7,3.4-7.7,7.7v6.5l-114-21.4c-12.7-1.9-25.4,2.6-34.1,12
c-13.4,13.4-16,34.2-6.3,50.5l1.3,2.2c6.3,10.6,17,17.7,29.1,19.6l123.9,21.9v8.5c0,4.2,3.4,7.7,7.7,7.7H256
c4.2,0,7.7-3.4,7.7-7.7v30.6l0,0c-0.1-4.2-3.5-7.5-7.7-7.5h-30.7c-4.2,0-7.7,3.4-7.7,7.7v9.3L94,248.7c-12.2,1.8-23,9-29.3,19.6
l-1.3,2.2c-3.9,6.4-5.9,13.8-5.9,21.3c0,1.1,0.2,2.1,0.3,3.2c-20.9,3.5-35,23.2-31.6,44.1c3.1,18.5,19.1,32.1,37.9,32.1h364.8
c14.8,0,26.9,12,26.9,26.9s-12,26.9-26.9,26.9H33.3c-4.2,0-7.7,3.4-7.7,7.7c0,4.2,3.4,7.7,7.7,7.7h395.5
c23.3,0,42.2-18.9,42.2-42.2s-18.9-42.2-42.2-42.2H64c-12.7,0.1-23-10.2-23.1-22.9c-0.1-11.9,9-21.9,20.8-23
c1.9,4.1,4.6,7.8,7.7,11.1c8.7,9.5,21.6,14,34.3,12l113.8-21.3v5.7c0,4.2,3.4,7.7,7.7,7.7H256c4.2,0,7.7-3.4,7.7-7.7v-23.6
l202.8-28c11.4-1.6,19.9-11.3,19.9-22.8v-32.7c0-4.2-3.4-7.7-7.7-7.7c-0.2,0-0.4,0-0.5,0l-23,1.6c-2.3,0.2-4.4,1.3-5.7,3.2
l-1,1.4c-3.5,4.9-10.4,6-15.3,2.5c-0.8-0.6-1.6-1.3-2.2-2.1c-1.6-2-4-3.1-6.5-2.9l-23,1.6c-2,0.1-3.9,1.1-5.3,2.6L394,213
c-4,4.6-10.9,5.1-15.5,1.1c-0.2-0.2-0.4-0.4-0.6-0.6l-1.2-1.2c-1.8-1.9-4.5-2.7-7-2.1l-29.2,6v-35.4l29.6,4.4
c2.4,0.4,4.9-0.5,6.6-2.2l1.2-1.2c4.2-4.3,11.2-4.4,15.5-0.1c0.2,0.2,0.4,0.4,0.6,0.6l2.1,2.5c1.3,1.5,3.2,2.5,5.3,2.6l23,1.6
c2.5,0.2,5-0.9,6.5-2.9c3.8-4.7,10.6-5.5,15.4-1.8c0.8,0.6,1.5,1.4,2.1,2.2l1,1.4c1.3,1.9,3.4,3,5.7,3.2l23,1.6
c4.2,0.3,7.9-2.9,8.2-7.1c0-0.2,0-0.4,0-0.5v-32.7c0-11.5-8.5-21.2-19.9-22.8l-202.8-28V87z M248.3,94.7v84.5H233V94.7H248.3z
M96.2,141.3c-7.7-1.1-14.4-5.7-18.4-12.3l-1.3-2.2c-6.2-10.2-4.5-23.3,3.9-31.8c5.1-5.9,12.9-8.8,20.6-7.7l116.6,21.9v53.6
L96.2,141.3z M101.2,317.9c-7.8,1.2-15.7-1.7-20.9-7.7c-8.5-8.4-10.1-21.5-3.9-31.8l1.3-2.2c4-6.7,10.9-11.3,18.6-12.4
l121.2-21.4v53.6L101.2,317.9z M233,309.7v-84.5h15.4v84.5H233z M471,243c0,3.8-2.8,7.1-6.6,7.6l-200.7,27.7v-45.5l8.2-0.6
c3.7-0.3,6.7-3.2,7-6.9c13.6,10.6,32.6,10.7,46.2,0.1v0.2c0,4.2,3.4,7.7,7.7,7.7c0.5,0,1-0.1,1.5-0.2l34.5-7.1
c11,9.2,27.4,7.9,36.8-3l16.3-1.2c10.8,9.8,27.4,8.9,37.2-1.8c0.2-0.3,0.5-0.5,0.7-0.8l11.3-0.8V243z M464.4,144.7
c3.8,0.5,6.6,3.8,6.6,7.6v24.5l-11.3-0.8c-9.3-11.1-25.9-12.6-37.1-3.3c-0.3,0.2-0.5,0.4-0.8,0.7l-16.2-1.1l-0.1-0.1
c-9.5-10.9-26-12.2-37-2.8l-34.7-5.1c-4.2-0.6-8.1,2.3-8.7,6.5c-0.1,0.4-0.1,0.7-0.1,1.1v23c0,12.7-10.3,23-23,23
s-23-10.3-23-23v-24.2c0-4-3.1-7.4-7.2-7.7l-8.2-0.6V117L464.4,144.7z"/>
<circle cx="302.1" cy="194.5" r="15.4"/>
</g>
</g>
<circle fill="#FFFFFF" cx="296.5" cy="188.5" r="2.5"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB