Jump to content

Melomancheto

Members
  • Content Count

    10
  • Joined

  • Last visited

  1. Good to know, thanks const drawTile = function (x, y, color = 0xf5FFFF) { const tileWidth = 32; const tileHeight = 16; const rectangle = new Graphics() rectangle.lineStyle(1, 0xf5ffff, 1); rectangle.position.x = x * tileWidth / 2; rectangle.position.y = (y + x) * tileHeight / 2; rectangle.moveTo(0, 0) rectangle.lineTo(tileWidth / 2, tileHeight / 2); rectangle.lineTo(0, tileHeight); rectangle.lineTo(-tileWidth / 2, tileHeight / 2); rectangle.lineTo(0, 0); rectangle.closePath(); return rectangle; } This is the end result if someone needs it
  2. The problem was that the last point was supose to be the origin e.g X=0, Y=0, since we start from them.
  3. Yes, but why is it now closing in. It's not like a specify any width or height of the line. I tried everything, just don't see the reason. It's 100% something small
  4. I'm learning how to make grids and understand the principe of the tiles. I will leave this video to the future me (this guy explains it perfect). There is one thing that I can't get right and I don't know where I'm getting it wrong. const drawTile = function (x, y, color = 0xf5FFFF) { const tileWidth = 32; const tileHeight = 16; const rectangle = new Graphics() rectangle.lineStyle(1, 0xf5ffff, 1); rectangle.position.x = x * tileWidth / 2; rectangle.position.y = (y + x) * tileHeight / 2; rectangle.moveTo(0, 0) rectangle.lineTo(tileWidth / 2, tileHeight / 2); rectangle.line
  5. I found the problem in the OOP code. The problem is me extending Application and them a class inherits it and another class inherits the class that inherits application (damn that sounds weird). Javascript does not support this natively. so I guess I will need to pass the application in the constructor of every class that I need. Here is some code for example: This is my entry file. // App with width and height of the page const app = new Application(document, { width: 500, height: 500, resolution: 1, backgroundColor: 0xAAAAA, }); Texture.fromURL('assets/dirt.png').then(result =
  6. This is just what I was thinking about. Cuz I imagine this as a loading bar showing while the images are being loaded to the game. After they load you remove the banner for example and navigate them to the game. Everything else that you need to load will be loaded on the go. I have something like that in my head.
  7. Since I'm kinda new and still reading around and watching repos how people do it. What is the best way to approach this if I use the Loader? Should I add a listener for loaded images and when they load I continue to the logic of my game or this is going to slow down everything? I Saw that the loader has a build in cache aswell that I may use. I have my sprite extended from a class that I have and the constructor only accepts Textures, so this is one more thing I need to think of I gues? What would be the bes t way to approach this? Right now I'm trying to build a map builder with blocks
  8. I'm trying to get the texture of already loaded image and pass it to the PIXI.Sprite. import { Loader } from 'pixi.js' export default class SpriteLoader { constructor(sprites) { this.loader = new Loader(); this.loader.baseUrl = 'assets'; this.loader.onProgress.add(this.showProgress); this.loader.onComplete.add(this.doneLoading); this.loader.onError.add(this.onError); } add = (name, file) => { this.loader.add(name, file) }; load = () => { this.loader.load(); } texture = (name) => {
  9. I will try that. I managed to get it working with const builder = new Builder(app, { autoPreventDefault: true, }); but I will try this for sure. thanks Worked like a charm, thanks
  10. I'm trying to se my interaction mode to true so I can set my sprite to follow my cursor. I've managed to do this before i Added ES6 and webpack. Here is a code example: import * as PIXI from 'pixi.js'; // App with width and height of the page const app = new PIXI.Application({ width: 500, height: 500, resolution: 1, backgroundColor: 0xAAAAAA, }); document.body.appendChild(app.view); let player = new PIXI.Sprite.from('assets/dirt.png'); player.anchor.set(0.5); player.x = app.view.width / 2; player.y = app.view.height / 2; app.stage.addChild(player); const movePlayer = function (e
×
×
  • Create New...