We Keep Coding

How to make it so an image disappears upon collision and then re-appears in a random spot on the screen

I'm creating a game similar to Snake in which my Batman character image collides with the Joker character image and "catches" it. Once the first one disappears, another Joker pops up on the screen in a random spot for the Batman to chase after and then so and so forth.
I've made it so the first Joker disappears when my Batman character collides with it but I'm struggling to get a second Joker to pop on the screen. I'm not sure if a for loop would be best - but then how do I make it so only one Joker appears until Batman "catches" it and then the next can appear - or perhaps an if statement. Any help would be greatly appreciated because I'm feeling really stuck right now.
//loads music for background
import processing.sound.*;
SoundFile file;
String audioName = "dark_knight_rises.wav";
String path;
//loads gif library for background
import gifAnimation.*;
Gif myAnimation;
PImage batman; //pixel images
PImage joker; //pixel images
int batmanX = 100; //batman X position on screen
int batmanY = 100; //batman Y position on screen
int jokerX = 500; //joker X position on screen
int jokerY = 500; //joker Y position on screen
int batman1Size = 50; //for batman distance
int joker2Size = 50; //for joker distance
int width = 100; //width for characters
int height = 100; // height for characters
boolean showImage = true; // boolean to help joker disappear and reappear
int score = 0; // declaration for high score
void setup() {
size(1067, 800);
//plays background music
path = sketchPath(audioName);
file = new SoundFile(this, path);
file.play();
//loads background and pixel-style batman/joker
myAnimation = new Gif(this, "background.gif");
myAnimation.play();
batman = loadImage("pixelbatman.png");
joker = loadImage("pixeljoker.png");
}
void draw() {
image(myAnimation, 0, 0); //lays down gif background
//display the score
textSize(20);
text("Jokers caught:", 900, 40);
text(score, 1045, 40);
image(batman, batmanX, batmanY, width, height); //places Batman character on screen
//pixel batman movement
if (keyPressed) {
if (key == CODED) {
if (keyCode == UP) batmanY--;
if (keyCode == RIGHT) batmanX++;
if (keyCode == DOWN) batmanY++;
if (keyCode == LEFT) batmanX--;
}
} //end of pixel batman movement
if (showImage) image(joker, jokerX, jokerY, width, height); //if Boolean is true, place Joker character on screen
if (dist(batmanX, batmanY, jokerX, jokerY) < (batman1Size + joker2Size)/10 ) { //if batman and joker collide - joker disappears
showImage = false;
score += 1; //increase the score by 1 when batman eats a joker
// idea is that the first joker disappears and another pops up in a random position
if (showImage == false) {
image(joker, random(jokerX, 0), random(0, jokerY), width, height);
}
} // end of what happens if batman and joker collide
} // end of void draw

The answer is easier than you think. In fact, you already did most of the job, you just need a rubber duck.
I'll take that job.
In the draw() function, you do a lot of things. When you have free time, I suggest you break these down a little bit. draw() is the main loop in processing, and as such it'll always tend to be clogged with code. When you do this, aim to have an easily understandable loop, something like this:
void draw() {
drawBackground();
manageInput();
collisions();
drawCharacters();
}
Now, to the matter which interests you:
What you're doing good:
you use clear nomenclature (your naming convention makes things easy to read, a mistake beginners do is to shorten variables names because they know what they are speaking about, then it confuses everybody else including themselves later on)
great job overall with being able to add stuff like gif and sounds!
What we're going to do to achieve the joker thing:
Get rid of the showImage variable. I get what you're doing here, and it was a good idea, but we won't need it.
In the If where you check for a collision, right where you wrote showImage = false, instead we'll update the joker's coordinates:
Like this (I randomized it, but now that you get the idea you can custom this):
jokerX = (int)random(width);
jokerY = (int)random(height);
Delete the if (showImage == false).
Aaand... there you go! If you read well, you'll notice that your mistake wat that, in the if (showImage == false) part, you "teleported" the joker without actually changing his coordinated.
I'll stick around in case you have questions. Have fun!

How to make a hitbox?

I'm making a game similar to mario and I've got this map generated by arrays and images. But my problem is that I don't know how to make a hitbox system for all the tiles. I've tried to have a position based collision system based on your position on the map
like this
if(xpos > 10*mapX && xpos < 14 * mapX){
ypos -= 1;
}
But I don't want to that for every wall or hole.
So is there a way to check in front, below and above the character to see if there is a hitbox there and if there is you cant move that direction or fall?
Thank you

If it's a simple 2D game, I'd suggest dividing the map into square tiles. You could store the map in the memory as a two dimensional array and during each frame check tiles adjacent to the player. Of course he can occupy as much as 4 tiles during movement, but it makes you check only up to 12 positions, which can be easily done.
Further collision checking can be done easily using image position and dimension.
Remember that there is no need to check if a static object (environment) is colliding with something, you just need to check objects that have made a move since last frame, i.e. the player and sprites.
EDIT:
Let's say you've got the following section of map (variable map):
...
.pe
ooo
where
. = nothing
p = player
o = floor
e = enemy
you also have the pair (x, y) representing tile indices (not exact position) of the player. In this case you have to do something like this:
if ("o".equals(map[y + 1, x + 1]))
//floor is under
if ("e".equals(map[y, x + 1]))
//enemy is on the right
if ("o".equals(map[y - 1, x]))
//floor is above us
If any of these conditions are met, you have to check image positions and handle collisions.

Note: clicked submit way after the last post was made...
As Mateusz says a 2D array is best for this type of game:
e.g. using chars:
0123456789012
0 ==
1 * ===
2===== =======
So in this case tileMap[8][1] == '*'. You'd probably be best using an enumeration instead of chars though e.g. Tile.SPRING for a Sonic style spring board.
If your map was made up of regular sized tiles you could say:
int xInFrontOfPlayer = playerX + PLAYER_WIDTH;
int xBehindPlayer = playerX - PLAYER_WIDTH;
Tile tileInFrontOfPlayer = getTileAtWorldCoord(xInFrontOfPlayer, playerY);
Tile tileBehindPlayer = getTileAtWorldCoord(xBehindPlayer, playerY);
...
public Tile getTileAtWorldCoord(int worldX, worldY) {
return tileMap[worldX / TILE_WIDTH][worldY / TILE_HEIGHT];
}
Where TILE_WIDTH and TILE_HEIGHT are the dimensions of your tiles in pixels. Then use similar math for yAbovePlayer and yBelowPlayer.
You might then have some logic in your game loop:
if user is pressing the "go right" key:
if the tile to the right is Tile.SPACE:
move player right
else if the tile to the right is Tile.WALL:
don't do anything
if the tile below is Tile.SPACE:
fall

Multiple instances of a Texture in LibGDX?

I have a question about speed and efficiency whilst coding a game. I would like to know what the best way would be to have lots of enemies on screen at once. Do I use a single sprite, move it and draw it for every enemy? Or do I have an instance of a Sprite for each Enemy (of which there could be 50 on screen at once). I am wondering about the speed impact of having lots of instances of Sprite (and in turn, Texture). Which of the above would be best for efficiency and overall good practice?

Id recommend having an instance of a Sprite for every Monster. All sprites have the same reference to a single texture, so it's easier to have lots of sprites without moving a single texture around.
Here is a example of my code;
public ArrayList<Monster> createMonsters(int count, int maxlevel,
int minlevel, MonsterTypes type) {
ArrayList<Monster> monsters = new ArrayList<Monster>();
// just one texture but multiple sprites
// save memory :)
Texture monster = getTextureByType(type);
for (int i = 0; i < count; i++) {
// create random level inside the area
int level = (int) ((Math.random() * maxlevel) + minlevel);
// create a default monster
Monster mon = new Monster(level, new Sprite(monster), screen,
new RandomAI());
monsters.add(mon);
}
return monsters;
}
private Texture getTextureByType(MonsterTypes typ) {
return this.screen.game.manager.get("monster/" + typ.getFileName()
+ ".png");
}
As you can see it gives every monster a new instance of a sprite with the same texture. All of the sprites refer to the same texture to save memory. Hope this helps.

Convert 2d game world coordinates to screen position

I have a system that generates chunks of 2d game map tiles. Chunks are 16x16 tiles, tiles are 25x25.
The chunks are given their own coordinates, like 0,0, 0,1, etc. The tiles determine their coordinates in the world based on which chunk they're in. I've verified that the chunks/tiles are all showing the proper x/y coordinates.
My problem is translating those into screen coordinates. In a previous question someone recommended using:
(worldX * tileWidth) % viewport_width
Each tile's x/y are run through this calculation and a screen x/y coordinate is returned.
This works for tiles that fit within the viewport, but it resets the screen x/y position calculation for anything off-screen.
In my map, I load chunks of tiles within a radius around the player so some of the inner tiles will be off-screen (until they move around, tile positions on the screen are moved).
I tried a test with a tile that would be off screen:
Tile's x coord: 41
41 * 25 = 1025
Game window: 1024
1025 % 1024 = 1
This means that tile x (which, if the screen 0,0 is at map 0,0, should be at x:1025, just off the right-hand side of the screen) is actually at x:1, appearing in the top-left.
I can't think of how to properly handle this - it seems to me like I need take the tileX * tileWidth to determine it's "initial screen position" and then somehow use an offset to determine how to make it appear on screen. But what offset?
Update: I already store an x/y offset value when the player moves, so I know how to move the map. I can use these values as the current offset, and if someone saves the game I can simply store those and re-use them. There's no equation necessary, I would just have to store the cumulative offsets.

The modulo (worldX*tileWidth % screenWidth) is what's causing it to reset. Modulo (%) gives you the remainder of an integer division operation; so, if worldX * tileWidth is greater than screenWidth, it will give you the remainder of (worldX * tileWidth) / screenWidth; if worldX * tileWidth is screenWidth+1, remainder is 1: it starts over at the beginning of the row.
If you eliminate the modulo, it will continue to draw tiles past the edge of the screen. If your drawing buffer is the same size as the screen, you'll need to add a check for tiles at the edge of the screen to make sure you only draw the tile portion that will be visible.
If you're trying to keep the player centered on the screen, you need to offset each tile by the player's offset from tile 0,0 in pixels, minus half the screen width:
offsetX = (playerWorldX * tileWidth) - (screenWidth / 2);
screenX = (worldX * tileWidth) - offsetX;

x = ((worldX*tileWidth) > screenWidth) ? worldX*tileWidth : (worldX*tileWidth)%screenWidth;
That should work. Though I recommend implementing something like an interface and letting each tile decide where they want to be rendered. Something like this
interface Renderable {
void Render(Graphics2D g)
..
}
class Tile implements Renderable{
int x,y
//other stuff
Render(Graphics2D g){
if (!inScreen()){
return;
}
//...
//render
}
boolean inScreen(){
//if the map moves with the player you need to define the boundaries of your current screenblock in terms of the global map coordinates
//What you can do is store this globally in a singleton somewhere or pass it to the constructor of each tile.
//currentBlock.x is then player.x - screenWidth/2
//currentBlock.width is then player.x + screenWidth/2;
//similar for y
if(this.x < currentBlock.x || this.x > currentBlock.Width)
return false;
if (this.y < currentBlock.y || this.y > currentBlock.height)
return false;
return true;
//If the map are in blocks (think zelda on snes where you go from one screenblock to another) you still need to define the boundaries
//currentBlock.x = (player.x / screenWidth) (integer division) *screenWidth;
//currentBlock.width = (player.x /screenWidth) (...) * screenWidth + screenWidth;
//same for y
//Then perform above tests
}

AndEngine particle system

I would like to use AndEngine's particle system to create a splash(as in splashing water).
I have checked out the particle system example, but not really sure on what needs to be done to create a splash affect of water using the particle system.
Any idea's?

I don't know of any water splash simulation algorithms, so I'll do what I think, but you will have to modify to make it look real.
Water splash animation in 2D will create many small water drops from a single location, then send each one in a different direction with an initial velocity, then each water drop slows down and fades out.
Try this out:
public ParticleSystem createParticleSystem(final TextureRegion waterDropTextureRegion) {
//X & Y for the particles to spawn at.
final float particlesXSpawn = 400;
final float particlesYSpawn = 300;
//Max & min rate are the maximum particles per second and the minimum particles per second.
final float maxRate = 10;
final float minRate = 5;
//This variable determines the maximum particles in the particle system.
final int maxParticles = 100;
//Particle emitter which will set all of the particles at a ertain point when they are initialized.
final PointParticleEmitter pointParticleEmtitter = new PointParticleEmitter(particlesXSpawn, particlesYSpawn);
//Creating the particle system.
final ParticleSystem particleSystem = new ParticleSystem(pointParticleEmtitter, maxRate, minRate, maxParticles, waterDropTextureRegion);
//And now, lets create the initiallizers and modifiers.
//Velocity initiallizer - will pick a random velocity from -20 to 20 on the x & y axes. Play around with this value.
particleSystem.addParticleInitializer(new VelocityInitializer(-20, 20, -20, 20));
//Acceleration initializer - gives all the particles the earth gravity (so they accelerate down).
particleSystem.addParticleInitializer(new GravityInitializer());
//And now, adding an alpha modifier, so particles slowly fade out. This makes a particle go from alpha = 1 to alpha = 0 in 3 seconds, starting exactly when the particle is spawned.
particleSystem.addParticleModifier(new AlphaModifier(1, 0, 0, 3));
//Lastly, expire modifier. Make particles die after 3 seconds - their alpha reached 0.
particleSystem.addParticleModifier(new ExpireModifier(3));
return particleSystem;
}
I haven't tested it, but I think it'd work. Try playing with the values to find an animation which looks reallistic.
The method receives an argument which is a ready texture region for each particle, in your case I guess that'd be a water drop.
After you call this method and get a ParticleSystem, just attach it to your scene:
final ParticleSystem particleSystem = createParticleSystem(...);
scene.attachChild(particleSystem);