HOW TO REPLACE PACMAN ICON WITH AN IMAGE?

[zorromustafa]

No description provided.

[zorromustafa]

every time I try to replace icon with an image game got stuck, kindly help

[MEMESCOEP]

Hello, what are you trying to replace? The pacman player icon, or the page title icon (the icon that shows up on the browser tab)?

[MEMESCOEP]

for the pacman player, you'll need to edit pacman.js, and find the function drawPacman(). This function is responsible for drawing the player character (pacman), and it does this by drawing lines and shapes (which is also how the animation works in this case!). To replace the image, do something lie this:

pacman.js drawPacman():
`

  var ctx = getPacmanCanevasContext();
  
  ctx.fillStyle = "#fff200";
  ctx.beginPath();
  
  var startAngle = 0;
  var endAngle = 2 * Math.PI;
  var lineToX = PACMAN_POSITION_X;
  var lineToY = PACMAN_POSITION_Y;



      var img = document.getElementById("pacmanImage");
  if (PACMAN_DIRECTION === 1) {
	  img = document.getElementById("pacmanImageflipped");    //right
	  ctx.drawImage(img, PACMAN_POSITION_X, PACMAN_POSITION_Y, 16, 16); 
	  //startAngle = (0.35 - (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
	  //endAngle = (1.65 + (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
	  //lineToX -= 8;
  } else if (PACMAN_DIRECTION === 2) { 
	  img = document.getElementById("pacmanImagedown");          //down
	  ctx.drawImage(img, PACMAN_POSITION_X, PACMAN_POSITION_Y, 16, 16); 
	  //startAngle = (0.85 - (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
	  //endAngle = (0.15 + (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
	  //lineToY -= 8;
  } else if (PACMAN_DIRECTION === 3) { 			      //left
	  img = document.getElementById("pacmanImage");
	  ctx.drawImage(img, PACMAN_POSITION_X, PACMAN_POSITION_Y, 16, 16); 
	  //startAngle = (1.35 - (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
	  //endAngle = (0.65 + (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
	  //lineToX += 8;
  } else if (PACMAN_DIRECTION === 4) { 
	  img = document.getElementById("pacmanImage");    //up
	  ctx.drawImage(img, PACMAN_POSITION_X, PACMAN_POSITION_Y, 16, 16); 
	  //startAngle = (1.85 - (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
	  //endAngle = (1.15 + (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
	  //lineToY += 8;
  }
  ctx.drawImage(img, PACMAN_POSITION_X, PACMAN_POSITION_Y, 16, 16); 
  //ctx.arc(PACMAN_POSITION_X, PACMAN_POSITION_Y, PACMAN_SIZE, startAngle, endAngle, false);
  //ctx.lineTo(lineToX, lineToY);
  //ctx.fill();
  ctx.closePath();

`

and index.html:
(add these at the start of the body)
<img id="pacmanImage" width="16" height="16" src="beans.png" alt="pacmanlmao"> <img id="pacmanImageflipped" width="16" height="16" src="beansflipped.png" alt="pacmanlmao1"> <img id="pacmanImagedown" width="16" height="16" src="beansdown.png" alt="pacmanlmao2">

this will replace the images, but you will have to change the img src names to match yours.

[ggalvin1]

@MEMESCOEP I know you posted the solution a while back, but I was just having a bit of issue with the code. I was able to import my own image, but I was having issues making the character larger:

  ctx.drawImage(img, PACMAN_POSITION_X, PACMAN_POSITION_Y, 16, 16); 

Anytime I increase the X, Y above 25-30 for each instance of this code, it would make the character larger, but when I move the character it would leave streaks across the game board. Also it seems the image is centered to the bottom right of where it should be positioned. I appreciate any help as I'm new to programming.

[MEMESCOEP]

Maybe there's a limit to how big the image can be before it stops properly clearing
Can I have your code so I can test it?
@zorromustafa

[ggalvin1]

@MEMESCOEP Sure. Here it is.
modifiedcode.zip

[MEMESCOEP]

Taking a look now, it looks like the image is offset, or the grid isn't big enough

As for the streaking issue, the PACMAN_SIZE and image size variables must be equal

[MEMESCOEP]

@zorromustafa I've think I've found the issue.

Streaking issue

The PACMAN_SIZE and image width / height variables must be equal. This only applies to pacman.js, the width and height properties in the HTML only seem to affect how big the image in the top left corner is.
I would recommend using PACMAN_SIZE to set your image size, but note that the image can only be up to 31 pixels before some bugs relating to dot collection, powerup collection, and ghost collision are revealed.

Image offset

You'll need to add - (PACMAN_SIZE / 2) to both the X and Y position of the ctx.drawImage call. This only works if you're setting your image size using PACMAN_SIZE, otherwise replace that code with - <IMAGE_SIZE_DIVIDED_BY_2>.

Sample code

Here's some example code that gets the job done for both:

var img = document.getElementById("pacmanImage");
if (PACMAN_DIRECTION === 1) {
	img = document.getElementById("pacmanImageflipped");    //right
	ctx.drawImage(img, PACMAN_POSITION_X - (PACMAN_SIZE / 2), PACMAN_POSITION_Y - (PACMAN_SIZE / 2), PACMAN_SIZE, PACMAN_SIZE); 
} else if (PACMAN_DIRECTION === 2) { 
	img = document.getElementById("pacmanImagedown");          //down
	ctx.drawImage(img, PACMAN_POSITION_X - (PACMAN_SIZE / 2), PACMAN_POSITION_Y - (PACMAN_SIZE / 2), PACMAN_SIZE, PACMAN_SIZE); 
} else if (PACMAN_DIRECTION === 3 || PACMAN_DIRECTION === 4) { 			      //left & up
	img = document.getElementById("pacmanImage");
	ctx.drawImage(img, PACMAN_POSITION_X - (PACMAN_SIZE / 2), PACMAN_POSITION_Y - (PACMAN_SIZE / 2), PACMAN_SIZE, PACMAN_SIZE); 
}

[ggalvin1]

@MEMESCOEP Thank you! That works great! One last thing:

else if (PACMAN_DIRECTION === 3 || PACMAN_DIRECTION === 4) { //left & up
img = document.getElementById("pacmanImage");
ctx.drawImage(img, PACMAN_POSITION_X - (PACMAN_SIZE / 2), PACMAN_POSITION_Y - (PACMAN_SIZE / 2), PACMAN_SIZE, PACMAN_SIZE);
}

I imported 3 different images (with the character facing right, down, and left)
I noticed that the line of code for left and up direction of travel are both in this "else if" statement. However, I am only able to get the character to face left when going up.

In this image, the character is moving upwards but is facing left

[MEMESCOEP]

@zorromustafa You can separate the left and up tests, I'll upload some test code in a few minutes

[ggalvin1]

I did try to create a separate else if (PACMAN_DIRECTION === 4 statement but the character wouldn't populate at all when I tested it. I'll try it again.

Also here is my updated code with the added images in case you wanted to look at it. Thanks again for your help.

modifiedcode2.zip

[ggalvin1]

@MEMESCOEP Nevermind about the last reply, I got it working!
Now I'm just working on getting the fruits updated with my own images as well. Thanks again

[MEMESCOEP]

No problem!

I've also just realized I've been pinging the wrong person, sorry about that

[ggalvin1]

@MEMESCOEP

So I was able to successfully replace each ghost with my own image by modifying the drawHelperGhost function (at the bottom of ghosts.js). I wrote code similar to the drawPacman function, including the image offset modification. I made sure the width / height variables are equal as well yet the streaking is still present. Would you happen to know why? I'm stumped again here but I'm really close.

function drawHelperGhost(ctx, x, y, d, b, s, a) {

var img = document.getElementById("enemy");  //right
ctx.drawImage(img, (GHOST_BLINKY_POSITION_X - 15), (GHOST_BLINKY_POSITION_Y - 15), 30, 30); 
ctx.drawImage(img, (GHOST_PINKY_POSITION_X - 15), (GHOST_PINKY_POSITION_Y - 15), 30, 30); 
ctx.drawImage(img, (GHOST_INKY_POSITION_X - 15), (GHOST_INKY_POSITION_Y - 15), 30, 30); 
ctx.drawImage(img, (GHOST_CLYDE_POSITION_X - 15), (GHOST_CLYDE_POSITION_Y - 15), 30, 30); 
ctx.closePath();

Here's the full code
modifiedcode_ghost.zip

[MEMESCOEP]

I'll have to take a look at the enemy code @ggalvin1

[ggalvin1]

@MEMESCOEP Thanks. Keep me posted if you find out what's causing it

[MEMESCOEP]

I haven't found anything yet unfortunately @ggalvin1