set position

KokoDoko · May 5, 2022 · 842bbda · 842bbda
1 parent 0952582
commit 842bbda
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -65,8 +65,7 @@ class Fish extends PIXI.Sprite {
         Matter.Composite.add(game.engine.world, this.rigidBody)
     }
     update() {
-        this.x = this.rigidBody.position.x
-        this.y = this.rigidBody.position.y
+        this.position.set(this.rigidBody.position.x, this.rigidBody.position.y)
         this.rotation = this.rigidBody.angle
     }
 }
@@ -166,33 +165,29 @@ If you want certain items (*for example coins in a mario game*) not to collide w
 
 # Hitbox
 
-By making the rigidbody a different size than the sprite, you can create a custom hitbox. When positioning the sprite, make sure to correct for the smaller hitbox.
+By making the rigidbody a different size than the sprite, you can create a custom hitbox. 
 
 ```typescript
-// FISH TEXTURE WIDTH x HEIGHT     = 60 X 60
-// SMALLER HITBOX WIDTH x HEIGHT   = 30 X 30
+// TEXTURE WIDTHxHEIGHT = 60 X 60 HITBOX WIDTHxHEIGHT = 30 X 30
 this.rigidBody = Matter.Bodies.rectangle(15, 15, 30, 30, {label:"Fish"}) 
 // draw the sprite with 15 pixels offset
-this.x = this.rigidBody.position.x - 15
-this.y = this.rigidBody.position.y - 15
+this.position.set(this.rigidBody.position.x - 15, this.rigidBody.position.y - 15)
 ```
 
 ### Drawing the hitbox
 
-Just to be sure what's happening you can [draw your hitbox using Pixi's drawing code](https://pixijs.io/examples/#/graphics/simple.js). This example draws a rectangle hitbox:
+Just to be sure what's happening you can [draw your hitbox using Pixi's drawing code](https://pixijs.io/examples/#/graphics/simple.js). 
 
 ```typescript
 constructor(texture: PIXI.Texture, game:Game) {
-    // ... your game code 
-    // draw a hitbox
     let hitbox = new PIXI.Graphics()
     hitbox.lineStyle(2, 0x33FF33, 1)
     hitbox.drawRect(-30, -30, 60, 60) // x offset, y offset, width, height
     this.addChild(hitbox)
 }
 ```
 
-A hitbox can also be a circle. [Or you can create a *compound hitbox* out of several rigidbodies](https://brm.io/matter-js/docs/classes/Composite.html). [Finally there is the option of creating a hand-drawn hitbox with a physics editor.](https://www.codeandweb.com/physicseditor)
+> ⚠️ A hitbox could also be a circle. [Or you can create a *compound hitbox* out of several rigidbodies](https://brm.io/matter-js/docs/classes/Composite.html). Finally there is the option of creating a [hand-drawn hitbox with a physics editor.](https://www.codeandweb.com/physicseditor)
 
 <br>
 <br>

diff --git a/docs/index.40b5effe.js.map b/docs/index.40b5effe.js.map
diff --git a/docs/index.40b5effe.js → docs/index.521a40ce.js b/docs/index.40b5effe.js → docs/index.521a40ce.js
diff --git a/docs/index.521a40ce.js.map b/docs/index.521a40ce.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<html><head><link rel="stylesheet" href="index.ca2c1a6a.css"><title>PixiJS Physics</title><meta charset="utf-8"></head><body> <div id="container"></div> <div id="status">Physics demo, made with MatterJS, PixiJS and Typescript. <a href="https://github.com/KokoDoko/piximatters" target="_blank">Github</a></div> <script type="module" src="index.40b5effe.js"></script> </body></html>
+<html><head><link rel="stylesheet" href="index.ca2c1a6a.css"><title>PixiJS Physics</title><meta charset="utf-8"></head><body> <div id="container"></div> <div id="status">Physics demo, made with MatterJS, PixiJS and Typescript. <a href="https://github.com/KokoDoko/piximatters" target="_blank">Github</a></div> <script type="module" src="index.521a40ce.js"></script> </body></html>
diff --git a/src/ts/Coin.ts b/src/ts/Coin.ts
@@ -21,8 +21,7 @@ export class Coin extends PIXI.Sprite {
     }
 
     update() {
-        this.x = this.rigidBody.position.x
-        this.y = this.rigidBody.position.y
+        this.position.set(this.rigidBody.position.x, this.rigidBody.position.y)
         this.rotation = this.rigidBody.angle
 
         if (this.rigidBody.position.y > 500) this.game.removeElement(this)

diff --git a/src/ts/Crate.ts b/src/ts/Crate.ts
@@ -1,6 +1,7 @@
 import * as PIXI from "pixi.js"
 import { Game } from "./Game"
 import Matter from 'matter-js'
+import { ObservablePoint } from "pixi.js"
 
 export class Crate extends PIXI.Sprite {
 
@@ -15,19 +16,10 @@ export class Crate extends PIXI.Sprite {
 
         this.rigidBody = Matter.Bodies.rectangle(Math.random() * 900, -30, 60, 60, {label:"Crate"}) //x,y,w,h
         Matter.Composite.add(game.engine.world, this.rigidBody)
-
-        // draw a hitbox - handy for debugging
-        /*
-        let hitbox = new PIXI.Graphics()
-        hitbox.lineStyle(2, 0x33FF33, 1)
-        hitbox.drawRect(-30, -30, 60, 60)
-        this.addChild(hitbox)
-        */
     }
 
-    update() {
-        this.x = this.rigidBody.position.x
-        this.y = this.rigidBody.position.y
+    update() {       
+        this.position.set(this.rigidBody.position.x, this.rigidBody.position.y)
         this.rotation = this.rigidBody.angle
 
         if (this.rigidBody.position.y > 500) this.game.removeElement(this)

diff --git a/src/ts/Game.ts b/src/ts/Game.ts
@@ -23,6 +23,8 @@ export class Game {
     elements: (Crate | Coin | Player)[] = []
 
     constructor() {
+        console.log("yoo")
+
         const container = document.getElementById("container")!
         this.pixi = new PIXI.Application({ width: 900, height: 500, backgroundColor:0x223388 })
         container.appendChild(this.pixi.view)
@@ -45,7 +47,6 @@ export class Game {
     }
 
     doneLoading() {
-
         // static platforms
         let ground = new Ground(this.pixi.loader.resources["ground"].texture!, this)
         this.pixi.stage.addChild(ground)
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<html><head><link rel="stylesheet" href="index.ca2c1a6a.css"><title>PixiJS Physics</title><meta charset="utf-8"></head><body> <div id="container"></div> <div id="status">Physics demo, made with MatterJS, PixiJS and Typescript. <a href="https://github.com/KokoDoko/piximatters" target="_blank">Github</a></div> <script type="module" src="index.40b5effe.js"></script> </body></html>
		<html><head><link rel="stylesheet" href="index.ca2c1a6a.css"><title>PixiJS Physics</title><meta charset="utf-8"></head><body> <div id="container"></div> <div id="status">Physics demo, made with MatterJS, PixiJS and Typescript. <a href="https://github.com/KokoDoko/piximatters" target="_blank">Github</a></div> <script type="module" src="index.521a40ce.js"></script> </body></html>