Cant move player entity

Hello!
I’m developing a game using CraftyJS, and i got it to run in electron. the only issue is, i cant move the player. How do i pass input to the game?

Does it work in Chrome?

Since im running MacOS, im using Safari. it runs just fine in Safari, but not in Electron. im using Beefy+Browserify to webpack(?) it so ic an run it, since it uses a NPM module.

That isn’t what I asked. I asked if it works in Chrome because part of Electron is built in Chrome, so in order to identify whether Electron is the issue or not, you need to test with Chrome.

im using Beefy+Browserify to webpack(?) it so ic an run it, since it uses a NPM module.

Webpack is a specific tool, not a generic term. Browserify and Webpack are both bundlers.

Are you using your bundler pipeline in your Electron application? Because Electron doesn’t need that (Atom packages just have their NPM dependencies sitting in node_modules/ folders, and all you need to manually install an Atom package is npm install).

Ima install Chrome and test then. And no, im not bundling anything before it gets to Electron. Theres a module function .dynamicTextGeneration that Electron apparently cant find, though even when i commented that out it wouldnt work.

Yes, the game runs perfectly fine in Chrome. I dunno if i wasnt supposed to bundle it, but the normal html page wont run it in Safari or Chrome.

That’s weird. You’ll probably have to throw a bunch of console.log()s into whatever module handles your input events to see what’s going on.

thats kinda the issue lol
whatever handles the movement is built-in to the engine
https://craftyjs.com
i dont wanna modify it incase i mess something up

If you modify it and break something, you can change it back.

If you share your code, it’s possible that some of the people on this forum might be able to help diagnose what’s going on.

Relevant Code:

I meant your code. Anyone can look at CraftyJS’ codebase to see how it works, but you have not shared your project. Without a working CraftyJS example, it’s impossible to test changes to see if they work. If you share your code, there’s no guarantee that someone with an answer will see it, but you can’t get an answer unless you give enough of what you’re working on.

oof ok, hol up:

window.onload = function() {
  //var Crafty = require('craftyjs')
  var random = require('./functions/Randomizer')
  var wall = require('./functions/Walls')
  var fin = false

  Crafty.init(500,500);


  Crafty.scene('l1', function() {
    Crafty.background('black');
    Crafty.viewport.clampToEntities = false
    Crafty.viewport.follow(player, -60, 0)
    Crafty.c("BackAndForth", {
      init: function(){ 
          this.requires("2D")
          this.v = 3; // 10 pixels per frame
          this.leftBorder = 120
          this.rightBorder = Crafty.viewport.width - 20
          this.bind("EnterFrame", this.doMotion)
    },

      doMotion: function(frameData){
          this.x = this.x + this.v * frameData.dt / 20 // Move based on dt; 20ms per frame is the typical frame rate
          if (this.x + this.w > this.rightBorder){
              this.x  = this.rightBorder - this.w
              this.v = - this.v
          }
          if (this.x + this.w < this.leftBorder) {
            this.x  = this.leftBorder - this.w
            this.v = - this.v
          }
          if (this.x<0){
              this.x = 0;
              this.v = - this.v;
        }
      }

    
    });
    
    Crafty.c('enemyHP', {
      init: function() {
        this.requires('2D')
        this.bind("EnterFrame", this.hp)
      },
      hp: function(){}
    });

    // WALLS! No going off map hue hue hue
    wall()
    var door = Crafty.e('door, 2D, Canvas, Color')
      .attr({x: 450, y: 0, w: 50, h: 10})
      .color("brown")

    var hBoost = Crafty.e('hBoost, 2D, Canvas, Color')
        .attr({x: 250, y: 240, w: 5, h: 5})
        .color('Green');

    var hIncr = Crafty.e('hIncr, 2D, Canvas, Color')
        .attr({x: 200, y: 200, w: 5, h: 5})
        .color('Yellow');
    
    random(hBoost)

    // Player entity
    var player = Crafty.e('2D, Canvas, Color, Fourway, Collision')
      .attr({
        x: 250, 
        y: 250, 
        w: 10, // 10 by 10 square
        h: 10, 
        curHP: 100, // Current health
        maxHP: 100 // Maximum health
      })
      .color('Blue')
      .fourway(200)
      .bind('KeyDown', function(e){ // Reset
        if (e.key === Crafty.keys.R) {
          Crafty.log('Reset Player!')
          player.attr({x: 250, y: 250})
        }
      })
      .bind('KeyDown', function(e){ // Pause
        if (e.key === Crafty.keys.ENTER) { // Pause button
          Crafty.pause();
        }
      })
      .bind('Move', function(evt) { // after player moved
        var hitDatas, hitData;
        if ((hitDatas = this.hit('Wall'))) { // check for collision with walls
          hitData = hitDatas[0]; // resolving collision for just one collider
          if (hitData.type === 'SAT') { // SAT, advanced collision resolution
            // move player back by amount of overlap
            this.x -= hitData.overlap * hitData.nx;
            this.y -= hitData.overlap * hitData.ny;
          } else { // MBR, simple collision resolution
            // move player to previous position
            this.x = evt._x;
            this.y = evt._y;
          }
        }
        if ((hitDatas = this.hit('door'))) {
          fin = true
        }
      })
    /* .bind('KeyDown', function(e){ // Shooting key
        if (e.key === Crafty.keys.SPACE) {
        var laser = Crafty.e('bullet, laser, 2D, Canvas, Color, Collision, Motion')
          .attr({x: this._x + 4, y: 10, w: 2, h: 490})
          .color('Red')
          .bind('UpdateFrame', function() {
            this.y = this.y - 10
          })
          // Crafty.mousePos.x & Crafty.mousePos.y ?
          /*.onHit('Wall', function(hitDatas) {
            laser.destroy()
          })
          //setTimeout(function(){  laser.destroy();  } , 100)
        //}
      })*/
      .bind('KeyDown', function(e){ // Shooting key
        if (e.key === Crafty.keys.SPACE) {
        var bullet = Crafty.e('bullet, 2D, Canvas, Color, Collision, Motion')
          .attr({x: this._x + 4, y: this.y, w: 2, h: 5})
          .color('Red')
          .bind('UpdateFrame', function() {
            this.y = this.y - 10
          })
          // Crafty.mousePos.x & Crafty.mousePos.y ?
          .onHit('Wall', function(hitDatas) {
            bullet.destroy()
          })
        }
      })
      /*.onHit('door', function(hitDatas) {
        fin = true
      })*/
      .onHit('Enemy', function(hitDatas) {
        player.curHP -= 10
          if (player.curHP <= 0) {
            player.destroy();
            Crafty.e('2D, Canvas, Text')
              .attr({x: 230, y: 250})
              .textColor('White')
              .text('You Died...')
          }
      })
    // Health boost and increase
      .onHit('hBoost', function(hitDatas) {
        for (var i = 0, l = hitDatas.length; i < l; ++i) { // for each health increase run over...
          hitDatas[i].obj.destroy(); // ...destroy the health increase object...
          player.maxHP += 10 // ...Add to max health cap...
          player.curHP = player.maxHP // ...and make the current health of the player equal the max health the player can have
        }
      })
      .onHit('hIncr', function(hitDatas) {
        for (var i = 0, l = hitDatas.length; i < l; ++i) { // for each health increase run over...
          if (player.curHP == player.maxHP) { // ...check to make sure the health wont go over the max health...
            player.curHP == player.maxHP
          }
          else {
            player.curHP += 10 // ...add ten to the current health...
            hitDatas[i].obj.destroy(); // ...and destroy the health boost object
          }
        }
      })
      .onHit('enemyBullet', function(hitDatas) { // on collision with enemy bullets
        for (var i = 0, l = hitDatas.length; i < l; ++i) { // for each bullet hit
          hitDatas[i].obj.destroy(); // destroy the bullet
          player.curHP -= 10
          if (player.curHP <= 0) {
            player.curHP = 0
            if (player.curHP == 0) {
              player.isAlive = false
              player.destroy();
              Crafty.e('2D, Canvas, Text')
                .attr({x: 230, y: 250})
                .textColor('White')
                .text('You Died...')
            }
          }
        }
      });

    // Health
    Crafty.e('2D, Canvas, Text')
      .attr({x: 10, y: 0})
      .textColor('White')
      .text(function() {
        return 'HP: ' + player.curHP + ', Max HP: ' + player.maxHP
      })
      .dynamicTextGeneration(true);

    // END Health

    // Enemy
    var enemy = Crafty.e('2D, Canvas, Color, Collision, Enemy, BackAndForth, Text')
      .attr({
        x: 200, 
        y: 200, 
        w: 10,
        h: 10, 
        curHP: 100
      })
      .color('Red')
      .onHit('bullet', function(hitDatas) { // on collision with player bullets
        for (var i = 0, l = hitDatas.length; i < l; ++i) { // for each bullet hit
          //ihitDatas[i].obj.destroy(); // destroy the bullet...
          enemy.curHP -= 10 //...and subtract 10 from enemy HP
        }
        if (enemy.curHP <= 0) {
            enemy.destroy()
            if (enemy.curHP <= 0) {
              enemy.curHP = 0
            }
        }
    });
    /*var enemyHP = Crafty.e('2D, Canvas, Text')
      .attr({x: enemy.x, y: enemy._y + 5})
      .textColor('White')
      .dynamicTextGeneration(true)
      .text(function() {
        return 'HP: ' + enemy.curHP
  });*/

    if (fin == true) {
      //var l2 = require('./Level2')
      //Crafty.scene('l2')
      console.log('door')
  }
  })// End of l1

    Crafty.scene('l1')
    console.log('loaded')
}

best i can do cause i dont have perms to upload to github

I can help troubleshoot that more than I can help with Crafty.

1 Like

ok, cool. im trying to figure this out, ive been having problems with electron since day 1 xd