libGDX - 添加分数和显示在屏幕的左上角? [英] libGDX - Add scores & display it at top left corner of the screen?

问题描述

这是 libGDX 中一个简单游戏的示例代码.当雨滴落入桶中时，分数应加一.总分应该显示在左上角.

Here is the sample code of a simple game in libGDX. When a rain drop falls into a bucket,score should be increased by one. And total score should be shown at the top left corner.

如果错过了 3 滴，则显示 GAME OVER.我知道要提高分数，但我不知道要显示它.谢谢.

If 3 drops are missed than display GAME OVER. I know to increase the score but i don't know to display it. Thank you.

public class Drop implements ApplicationListener {
Texture dropImage;
Texture bucketImage;
Sound dropSound;
Music rainMusic;
SpriteBatch batch;
OrthographicCamera camera;
Rectangle bucket;
Array<Rectangle> raindrops;
long lastDropTime;

@Override
public void create() {
  // load the images for the droplet and the bucket, 64x64 pixels each
  dropImage = new Texture(Gdx.files.internal("droplet.png"));
  bucketImage = new Texture(Gdx.files.internal("bucket.png"));

  // load the drop sound effect and the rain background "music"
  dropSound = Gdx.audio.newSound(Gdx.files.internal("drop.wav"));
  rainMusic = Gdx.audio.newMusic(Gdx.files.internal("rain.mp3"));

  // start the playback of the background music immediately
  rainMusic.setLooping(true);
  rainMusic.play();

  // create the camera and the SpriteBatch
  camera = new OrthographicCamera();
  camera.setToOrtho(false, 800, 480);
  batch = new SpriteBatch();

  // create a Rectangle to logically represent the bucket
  bucket = new Rectangle();
  bucket.x = 800 / 2 - 64 / 2; // center the bucket horizontally
  bucket.y = 20; // bottom left corner of the bucket is 20 pixels above the bottom         screen edge
  bucket.width = 64;
  bucket.height = 64;

  // create the raindrops array and spawn the first raindrop
  raindrops = new Array<Rectangle>();
  spawnRaindrop();
}

private void spawnRaindrop() {
  Rectangle raindrop = new Rectangle();
  raindrop.x = MathUtils.random(0, 800-64);
  raindrop.y = 480;
  raindrop.width = 64;
  raindrop.height = 64;
  raindrops.add(raindrop);
  lastDropTime = TimeUtils.nanoTime();
}

@Override
public void render() {
  // clear the screen with a dark blue color. The
  // arguments to glClearColor are the red, green
  // blue and alpha component in the range [0,1]
  // of the color to be used to clear the screen.
  Gdx.gl.glClearColor(0, 0, 0.2f, 1);
  Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

  // tell the camera to update its matrices.
  camera.update();

  // tell the SpriteBatch to render in the
  // coordinate system specified by the camera.
  batch.setProjectionMatrix(camera.combined);

  // begin a new batch and draw the bucket and
  // all drops
  batch.begin();
  batch.draw(bucketImage, bucket.x, bucket.y);
  for(Rectangle raindrop: raindrops) {
     batch.draw(dropImage, raindrop.x, raindrop.y);
  }
  batch.end();

  // process user input
  if(Gdx.input.isTouched()) {
     Vector3 touchPos = new Vector3();
     touchPos.set(Gdx.input.getX(), Gdx.input.getY(), 0);
     camera.unproject(touchPos);
     bucket.x = touchPos.x - 64 / 2;
  }
  if(Gdx.input.isKeyPressed(Keys.LEFT)) bucket.x -= 200 * Gdx.graphics.getDeltaTime();
  if(Gdx.input.isKeyPressed(Keys.RIGHT)) bucket.x += 200 * Gdx.graphics.getDeltaTime();

  // make sure the bucket stays within the screen bounds
  if(bucket.x < 0) bucket.x = 0;
  if(bucket.x > 800 - 64) bucket.x = 800 - 64;

  // check if we need to create a new raindrop
  if(TimeUtils.nanoTime() - lastDropTime > 1000000000) spawnRaindrop();

  // move the raindrops, remove any that are beneath the bottom edge of
  // the screen or that hit the bucket. In the later case we play back
  // a sound effect as well.
  Iterator<Rectangle> iter = raindrops.iterator();
  while(iter.hasNext()) {
     Rectangle raindrop = iter.next();
     raindrop.y -= 200 * Gdx.graphics.getDeltaTime();
     if(raindrop.y + 64 < 0) iter.remove();
     if(raindrop.overlaps(bucket)) {
        dropSound.play();
        iter.remove();
     }
  }
}

@Override
public void dispose() {
  // dispose of all the native resources
  dropImage.dispose();
  bucketImage.dispose();
  dropSound.dispose();
  rainMusic.dispose();
  batch.dispose();
}

@Override
public void resize(int width, int height) {
}

@Override
public void pause() {
}

@Override
public void resume() {
}
}

推荐答案

这里是一个一个 libGDX 用户 wiki 的链接，当我遇到关于 Pong 重制的相同问题时，我发现它很有帮助.

Here is a link to a libGDX users wiki that I found helpful when I had encountered the same question for a Pong remake.

要显示分数，您需要的工具是:一个用于保存分数的 int 变量，一个用于帮助显示分数的 String 或 CharacterSequence 变量(我将使用 String)，以及一个用于显示字体类型.

To display the score, the tools that you need are: an int variable to keep score, a String or CharacterSequence variable to help display the score (I'll use a String), and a BitmapFont which is used to display a font type.

第一步:声明所有这些工具.

First step: declare all of these tools.

private int score;
private String yourScoreName;
BitmapFont yourBitmapFontName;

第二步:在create方法中初始化它们

Second step: initialize them in the create method

public void create()     
    score = 0;
    yourScoreName = "score: 0";
    yourBitmapFontName = new BitmapFont();

第三步:增加 score 变量并在碰撞逻辑方法中更改 yourScoreName String 变量(当雨滴与桶重叠时).

Tertiary step: increment the score variable and change the yourScoreName String variable in your collision logic method (when the raindrop overlaps the bucket).

if(raindrop.overlaps(bucket)) {
     score++;
     yourScoreName = "score: " + score;
     dropSound.play();
     iter.remove();

第四步:在 render() 方法中，设置字体颜色，并在 spriteBatch.begin 和 spriteBatch.end 之间调用 BitmapFont 上的 draw 方法.

Fourth step: In the render() method, set the color of the font and call the draw method on your BitmapFont between spriteBatch.begin and spriteBatch.end.

batch.begin(); 
yourBitmapFontName.setColor(1.0f, 1.0f, 1.0f, 1.0f);
yourBitmapFontName.draw(batch, yourScoreName, 25, 100); 
batch.end();

玩弄:font.setColor() 方法中的参数，以便您可以看到它们与您的背景颜色形成对比， font.draw() 方法中的数字参数以获得在顶部显示的分数相关纹理左角(font.draw()方法中的最后两个数字参数代表分数纹理的x和y坐标).

Play with: the parameters in the font.setColor() method so that you can see them in contrast to your background color, the number parameters in the font.draw() method to get the score related textures displayed in the top left corner (the last two number parameters in the font.draw() method represent the x and y coordinates of the score texture).

第五步:运行它，然后微笑.

Fifth step: run it, then smile.

同样的逻辑也适用于显示GAME OVER".出于启发式目的，我将由您来创建逻辑.

The same logic will apply to displaying, "GAME OVER." For heuristic purposes, I'll leave the creation of the logic up to you.

阅读链接中的文档以更深入地了解魔法.

Read the documentation in the link to gain a deeper understanding of the magic.

这篇关于libGDX - 添加分数和显示在屏幕的左上角?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！