Skip to content

Commit bc041d5

Browse files
author
Neil Brown
committed
adding collision and bullet removal, testing particles
1 parent 0aba728 commit bc041d5

File tree

14 files changed

+430
-239
lines changed

14 files changed

+430
-239
lines changed

‎npm-debug.log

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
0 info it worked if it ends with ok
2+
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
3+
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
4+
1 verbose cli 'run',
5+
1 verbose cli 'start' ]
6+
2 info using [email protected]
7+
3 info using [email protected]
8+
4 verbose stack Error: ENOENT: no such file or directory, open 'C:\git\pixi\package.json'
9+
5 verbose cwd C:\git\pixi
10+
6 error Windows_NT 10.0.14393
11+
7 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "start"
12+
8 error node v7.4.0
13+
9 error npm v4.0.5
14+
10 error path C:\git\pixi\package.json
15+
11 error code ENOENT
16+
12 error errno -4058
17+
13 error syscall open
18+
14 error enoent ENOENT: no such file or directory, open 'C:\git\pixi\package.json'
19+
15 error enoent ENOENT: no such file or directory, open 'C:\git\pixi\package.json'
20+
15 error enoent This is most likely not a problem with npm itself
21+
15 error enoent and is related to npm not being able to find a file.
22+
16 verbose exit [ -4058, true ]

‎playground/dist/images/particle.png

629 Bytes
Loading

‎playground/dist/index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
</head>
1919
<body>
2020
<canvas id="canvas"></canvas>
21-
<script src="spriteUtilities.js"></script>
2221
<script src="matter.min.js"></script>
2322
<script src="bundle.js"></script>
2423
</body>

‎playground/images/particle.png

629 Bytes
Loading

‎playground/js/app.js

Lines changed: 117 additions & 170 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
import * as PIXI from 'pixi.js';
2+
import consts from './matterConsts.js';
23
import Player from './player';
34
import PlayerBullet from './playerBullet.js';
45
import BulletPool from './bulletPool.js';
6+
import Enemy from './enemy.js';
57
import Steering from './steering';
8+
const particles = require('pixi-particles');
69

7-
// Matter.js module aliases
8-
var Engine = Matter.Engine,
9-
World = Matter.World,
10-
Body = Matter.Body,
11-
Bodies = Matter.Bodies,
12-
Events = Matter.Events,
13-
Vector = Matter.Vector,
14-
Composite = Matter.Composite;
15-
16-
var canvas = document.getElementById('canvas'),
10+
const canvas = document.getElementById('canvas'),
1711
innerWidth = window.innerWidth,
1812
innerHeight = window.innerHeight;
1913

20-
var engine = Engine.create({
14+
const engine = consts.Engine.create({
2115
render: {
2216
element: document.body,
2317
canvas: canvas,
@@ -28,210 +22,163 @@ var engine = Engine.create({
2822
}
2923
});
3024

31-
var velocity = {x: 0, y: -2};
32-
var desiredVelocity;
33-
var steering;
34-
var bodies = [];
35-
36-
var id = 0,
37-
hit,
38-
prevId = id;
39-
40-
var renderer = PIXI.autoDetectRenderer(innerWidth, innerHeight,{backgroundColor : 0x000000});
41-
var stage = new PIXI.Container();
42-
document.body.appendChild(renderer.view);
43-
44-
var items = [];
45-
var positions = [{x: 100, y: 100}, {x: 100, y: 500}, {x: 500, y: 700}, {x: 700, y: 300}, {x: 900, y: 750}, {x: 900, y: 50}];
46-
var length = positions.length;
47-
48-
function SpriteObject(texture) {
49-
// create a new Sprite using the texture
50-
var sprite = new PIXI.Sprite(texture);
51-
52-
// center the sprite's anchor point
53-
sprite.anchor.x = 0.5;
54-
sprite.anchor.y = 0.5;
55-
56-
stage.addChild(sprite);
57-
return sprite;
58-
};
59-
60-
var redColor = '#C44D58',
61-
greenColor = '#C7F464';
62-
63-
function PhysicsObject(index) {
64-
// create two boxes and a ground
65-
var x = positions[index].x,
66-
y = positions[index].y,
67-
size = 50;
68-
69-
var options = {
70-
isSensor: true,
71-
isStatic: true,
72-
render: {
73-
strokeStyle: '#ff0000',
74-
lineWidth: 5,
75-
fillStyle: 'transparent'
25+
const config = {
26+
"alpha": {
27+
"start": 0.8,
28+
"end": 0.1
29+
},
30+
"scale": {
31+
"start": 1,
32+
"end": 0.3
33+
},
34+
"color": {
35+
"start": "fb1010",
36+
"end": "f5b830"
37+
},
38+
"speed": {
39+
"start": 200,
40+
"end": 100
41+
},
42+
"startRotation": {
43+
"min": 0,
44+
"max": 360
45+
},
46+
"rotationSpeed": {
47+
"min": 0,
48+
"max": 0
49+
},
50+
"lifetime": {
51+
"min": 0.5,
52+
"max": 0.5
53+
},
54+
"frequency": 0.008,
55+
"emitterLifetime": 0.31,
56+
"maxParticles": 1000,
57+
"pos": {
58+
"x": 0,
59+
"y": 0
60+
},
61+
"addAtBack": false,
62+
"spawnType": "circle",
63+
"spawnCircle": {
64+
"x": 0,
65+
"y": 0,
66+
"r": 10
7667
}
7768
}
7869

79-
if(index == length - 1){
80-
options.isSensor = false;
81-
options.isStatic = false;
82-
options.render.strokeStyle = greenColor;
83-
}
84-
85-
var box = Bodies.rectangle(x, y, size, size, options);
86-
87-
bodies.push(box);
88-
return box;
89-
};
90-
91-
// var createItem = function(i) {
92-
// return {
93-
// body: new PhysicsObject(i)
94-
// };
95-
// };
96-
97-
// for(var i=0; i < length; i++) {
98-
// items.push(createItem(i));
99-
// }
100-
101-
// var player = items[length - 1];
102-
103-
// steering behaviours
104-
// var playerSteering = new Steering(player);
105-
106-
var createArrow = function() {
107-
return {
108-
body: Bodies.rectangle(100, 700, 50, 1)
109-
}
110-
}
70+
const bodies = [];
11171

112-
var createEnemy = function(texture) {
113-
return {
114-
body: Bodies.rectangle(256, 0, 256, 256),
115-
sprite: SpriteObject(texture)
116-
}
117-
}
72+
const renderer = PIXI.autoDetectRenderer(innerWidth, innerHeight,{backgroundColor : 0x000000});
73+
const stage = new PIXI.Container();
74+
document.body.appendChild(renderer.view);
11875

119-
// var createShip = function(texture) {
120-
// return {
121-
// body: Bodies.rectangle(800, window.innerHeight - 50, 34, 72, {
122-
// frictionAir : 0.1,
123-
// friction : 1,
124-
// restitution : 0,
125-
// inertia : Infinity,
126-
// mass : 1
127-
// }),
128-
// sprite: SpriteObject(texture)
129-
// }
130-
// }
131-
132-
133-
// var arrow = createArrow();
134-
// Body.setMass(arrow.body, 10);
135-
// Body.setVelocity(arrow.body, {x: 10, y: -19});
136-
// World.addBody(engine.world, arrow.body);
137-
138-
// function setTarget(id) {
139-
// return Vector.mult(Vector.normalise(Vector.sub(items[id].body.position, player.body.position)), 4);
140-
// }
141-
142-
let enemy, ship, bullet, fire, pool;
143-
let colCategory = 0x001;
144-
let colCategory2 = 0x002;
145-
let loader = PIXI.loader;
76+
let enemy, ship, bullet, fire, pool, texture, emitter;
77+
const colCategory = 0x001;
78+
const colCategory2 = 0x002;
79+
const loader = PIXI.loader;
80+
loader.add("images/particle.png");
14681
loader.add("images/data.json").load(setup);
14782

148-
function setup(){
149-
let u = new SpriteUtilities(PIXI);
83+
var elapsed = Date.now();
15084

151-
enemy = createEnemy(loader.resources["images/data.json"].textures["spacestation.png"]);
152-
// Body.scale(enemy.body, 0.25, 0.25);
153-
// enemy.sprite.scale.set(0.25, 0.25);
154-
World.addBody(engine.world, enemy.body);
85+
function setup(){
86+
texture = loader.resources["images/data.json"].textures["spacestation.png"];
87+
enemy = new Enemy('enemy', engine, colCategory);
88+
enemy.init(800, 200, 80, 0, texture, 'circle');
15589

156-
// ship = createShip(loader.resources["images/data.json"].textures["wship-4.png"]);
157-
let texture = loader.resources["images/data.json"].textures["wship-4.png"];
158-
ship = new Player(colCategory);
90+
texture = loader.resources["images/data.json"].textures["wship-4.png"];
91+
// texture = loader.resources["images/particle.png"].texture;
92+
ship = new Player('player', engine, colCategory2);
15993
ship.init(800, window.innerHeight - 100, 34, 72, texture);
16094

161-
let tex = PIXI.loader.resources["images/data.json"].textures["player_bullet.png"];
162-
bullet = new PlayerBullet(colCategory2);
163-
bullet.init(0, 0, 16, 32, tex);
164-
16595
pool = new BulletPool(engine, stage);
166-
pool.init();
96+
pool.init('bullet', colCategory);
16797

168-
World.addBody(engine.world, ship.body);
98+
consts.World.addBody(engine.world, enemy.body);
99+
consts.World.addBody(engine.world, ship.body);
100+
101+
stage.addChild(enemy.sprite);
169102
stage.addChild(ship.sprite);
170103

104+
var emitterContainer;
105+
emitterContainer = new PIXI.ParticleContainer();
106+
emitterContainer.setProperties({
107+
scale: true,
108+
position: true,
109+
rotation: true,
110+
uvs: true,
111+
alpha: true
112+
});
113+
114+
stage.addChild(emitterContainer);
115+
emitter = new PIXI.particles.Emitter(
116+
emitterContainer,
117+
[loader.resources["images/particle.png"].texture],
118+
config
119+
);
120+
121+
emitter.particleConstructor = PIXI.particles.PathParticle;
122+
emitter.updateOwnerPos(window.innerWidth / 2, window.innerHeight / 2);
171123

172-
// start animating
173124
animate();
174125
}
175126

176127

177128
function animate() {
178-
requestAnimationFrame(animate);
129+
consts.Body.setAngularVelocity(enemy.body, 0.02);
179130

180-
// var angle = Math.atan2(arrow.body.velocity.y, arrow.body.velocity.x);
181-
// Body.setAngle(arrow.body, angle);
182-
Body.setAngularVelocity(enemy.body, 0.02);
131+
emitter.emit = true;
183132

133+
var now = Date.now();
134+
if (emitter)
135+
emitter.update((now - elapsed) * 0.001);
136+
137+
elapsed = now;
184138

185139
if (leftKey.isDown) {
186-
Body.applyForce(ship.body, ship.body.position, {x: -0.003, y: 0});
140+
consts.Body.applyForce(ship.body, ship.body.position, {x: -0.003, y: 0});
187141
}
188142

189143
if (rightKey.isDown) {
190-
Body.applyForce(ship.body, ship.body.position, {x: 0.003, y: 0});
144+
consts.Body.applyForce(ship.body, ship.body.position, {x: 0.003, y: 0});
191145
}
192-
// Body.setVelocity(ship.body, {x: 0, y: 0});
193-
194-
// ship.sprite.position = ship.body.position;
195-
enemy.sprite.position = enemy.body.position;
196-
enemy.sprite.rotation = enemy.body.angle;
197146

198147
ship.update();
148+
enemy.update();
199149
pool.update();
200150

201-
// for(var b in items) {
202-
// items[b].sprite.position = items[b].body.position;
203-
// items[b].sprite.rotation = items[b].body.angle;
204-
// }
205-
206-
// render the container
207151
renderer.render(stage);
152+
requestAnimationFrame(animate);
208153
}
209154

210-
Events.on(engine, 'collisionStart', function(event) {
211-
// while((id = getRandomInt(0, length-2)) == prevId);
212-
213-
// prevId = id;
155+
consts.Events.on(engine, 'collisionStart', function(event) {
156+
const pairs = event.pairs;
214157

215-
// hit = true;
216-
// velocity = Vector.clone(Vector.normalise(player.body.velocity));
158+
pairs.forEach((collision) => {
159+
const bodyA = collision.bodyA;
160+
const bodyB = collision.bodyB;
217161

218-
// function getRandomInt (min, max) {
219-
// return Math.floor(Math.random() * (max - min + 1)) + min;
220-
// }
162+
if(bodyA.label == 'enemy' && collision.bodyB.label.indexOf('bullet') != -1) {
163+
pool.remove(bodyB.label);
221164

165+
if(enemy.body === bodyA ) {
166+
enemy.damage();
167+
}
168+
}
169+
})
222170
})
223171

224-
var leftKey = keyboard(37);
225-
var rightKey = keyboard(39);
226-
var spaceKey = keyboard(32);
172+
const leftKey = keyboard(37);
173+
const rightKey = keyboard(39);
174+
const spaceKey = keyboard(32);
227175

228176
spaceKey.release = function() {
229-
console.log('fire: ', ship.body.position);
230177
pool.get(ship.body.position);
231178
}
232179

233180
function keyboard(keyCode) {
234-
var key = {};
181+
const key = {};
235182
key.code = keyCode;
236183
key.isDown = false;
237184
key.isUp = true;
@@ -272,7 +219,7 @@ function keyboard(keyCode) {
272219
engine.world.gravity.y = 0;
273220

274221
// add all of the bodies to the world
275-
World.add(engine.world, bodies);
222+
consts.World.add(engine.world, bodies);
276223

277224
// run the engine
278-
Engine.run(engine);
225+
consts.Engine.run(engine);

0 commit comments

Comments
 (0)