Converting from java to p5js, not working as intended

#1

Just like the title says, I have absolutely no idea on what I am supposed to change. I fixed all error messages, replaced variable statements, changed the functions that I know I need to change. I am mostly a newbie to programming and so even after watching a 20 minute video I had no idea of what I had to fix.

Sorry for making anyone that would want to help read through all 200 lines of code, but I have no idea how to localize this problem.

The drawStage() and drawPlayer() functions are the only ones that work, but nothing updates and I have no idea how to debug this.

#2

it would help anyone who was to help if you included all depedencies (p5.min.js, images, etc) in your repository.

#4

Sorry for that. Forgot to use them myself…
Added everything now.

#6

if you try and run your code and check the console you will see that you’re script tags are incorrect.

  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="p5js-temp-platformetr7491295074039696125.js"></script>
  <script language="javascript" type="text/javascript" src="p5js-temp-js_test3078609402461503628.js"></script>

you would need to add an libraries folder for the p5.min.js file. as for the other two scripts one of them you don’t need “p5js-temp-platformetr7491295074039696125.js” as it contains no code. the other needs to be renamed “js_test.js” so you would replace the above highlighted code with

  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="js_test.js"></script>

in your input handler functions a few things need to be changed

function setSignal ( setTo) {
  if (keyCode == LEFT) {
    holdLeft = setTo;
  }
  if (keyCode == RIGHT) {
    holdRight = setTo;
  }
}

to

function setSignal ( setTo) {
  if (keyCode == LEFT_ARROW) {
    holdLeft = setTo;
  }
  if (keyCode == RIGHT_ARROW) {
    holdRight = setTo;
  }
}

and

    if (keyCode == UP) {     //when up is pressed then increase flight value
      flight+=15;
      canJump1=false;
    }

to

    if (keyCode == UP_ARROW) {     //when up is pressed then increase flight value
      flight+=15;
      canJump1=false;
    }

further you don’t want to load images every draw but once in either preload or setup so you can move this code in the drawStage function

    spike= loadImage("spike.png"); 
    flag = loadImage("flag.png");
    wallObstacle = loadImage("wallObstacle.png"); 
    wallObstacleFlipped = loadImage("wallObstacleFlipped.png");

into the setup or preload function (probably preload is better) and one last thing change the draw order so your backgrond is drawn before all other objects else you won’t see the player etc.

do all of that and you will have something closer to what you are after but i have to say there are still issues and the way you have done some things are not optimal. it is probably a good idea to go and do some tutorials on creating 2d platformers i recommend this one as it is super simple and written in javascript which would not need alot of change to get working in p5js at least not as much as converting something from processing or java.

i’ll include this link to a sketch of your code which includes the edits i’ve recommeded above and you can look at as an example. i have commented out some code in the playerMove function as you need to address some collision related stuff first. anyways best of luck

1 Like
#7

Thank you for helping me out with this. I am going to remake the game once I have more experience with js, as right now I just need it for a portfolio.

Thanks

Edit:

Do you have any idea on why the gravity variable constantly 0? It worked fine in basic processing. My only guesses on why its not working as intended is that it is a function that does not exist in p5js or that If statements work differently.

If the player coordinates are not in the specified rectangles above platforms, then gravity should gradually increase to 3.5. But something is preventing that and the basic debug from processing does not exist in p5js. I have updated my code repository with whatever I have changed now for it to work in basic processing and for jumping to be included.

#8

So I have now made the game completely functional. The problem lied in the difference between Java variables and p5js.
When creating a java variable that isnt an object, since you specify what type it will be, it has an automatic default value like “true”, “0”, etc. When I converted my code, I did not add false or true to my variables and that caused them to be undefined. That caused the collision detection to stall.

But now the problem is that I will need to embed the script on a local page, but the script can not find the images when just running the html file. It works perfectly fine if running a local server through processing though. Would I need to add the images somewhere on a file host on the web? Or would I need to make a local server to run the .html? I could maybe use processing to run the webpages and then just put the game somewhere, but I dont know how practical that is. I have updated the repository once again.

#9

@dakito What do you mean with:

In addition, what do you mean in your statement: It works perfectly fine if running a local server. How are you running this local server?

Just to make sure we are on the same page, a local server simulates a server in your computer and I am assuming that is what you are referring to. You do not need to have a local server to run p5.js code. To run p5js, at a minimum, you will need your html and js code plus additional resources like images. In the simple case, all files (html,js,jpg,png,etc) could reside in the same folder. Then you can move this folder anywhere in your computer (or share it) and your html should work when loaded in any browser (chrome, firefox, safari, etc).

Kf

#10


[resolved] Bootstrap and p5 invisble canvas in jumbotron
#11

My script uses images. If I run it using the local server p5js app provides, it runs perfectly fine but I can not have my site properly set up. I have tried using codepen and some other apps for it but none have let me use images in my code so far.

Image 1 is me running the script using p5js program
image 2 is me running the html file

#12

Figured it out.

You can use p5.js web editor embed feature to embed it into a html file.
A little jumping back and forth and you can also resize it to be max size.

Thanks to everyone who helped.