LibGDX游戏引擎-6-常用控件(Component)

发表于   |  字数 2,882   |  预计阅读 15分钟   |   分类于   |  

libgdx将每一个可以实现一定动作和效果的东西，全部定义为演员。同时libgdx也提供了一些自带的演员，本篇文章就这些常用的控件，或者说是演员，来做一个粗略的了解！

例如：标签，按钮，勾选框，下拉框，图片，输入框，列表，滑动面板，滑条，分割面板等等，这些都是演员，都是可以加入到舞台类中的，舞台这里先不做详细介绍，因为后面我会单独的给大家讲解下舞台类。演员类可以分为libgdx提供给我们的演员类，还有就是我们自己继承Actor然后自己写的演员类，

下面我就针对这2中分类给大家介绍下libgdx中的演员类。

列举 Label Image ImageButton这三个，分别是文字，图片，图片按钮 , 实例代码如下：

package com.qsuron;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Image;
import com.badlogic.gdx.scenes.scene2d.ui.ImageButton;
import com.badlogic.gdx.scenes.scene2d.ui.Label;
import com.badlogic.gdx.scenes.scene2d.ui.Label.LabelStyle;
import com.badlogic.gdx.scenes.scene2d.utils.TextureRegionDrawable;

public class MyDemo implements ApplicationListener{
private SpriteBatch batch;
private BitmapFont font;
private LabelStyle labelStyle;
private Stage stage;
private Label label;
private Image image;
private ImageButton imageButton;
private TextureRegionDrawable up = null;
private TextureRegionDrawable down = null;
private TextureRegionDrawable press = null;

@Override
public void create() {

int WIDTH = Gdx.graphics.getWidth();
int HEIGHT = Gdx.graphics.getHeight();
batch = new SpriteBatch();
//label
font = new BitmapFont(Gdx.files.internal(“data/test.fnt”),Gdx.files.internal(“data/test.png”),false);
labelStyle = new LabelStyle(font,font.getColor());
stage = new Stage(WIDTH,HEIGHT,true);//宽 高 锁定比率
label = new Label(“小树”,labelStyle);
label.setPosition(10,200);//设置坐标
label.setScale(2f);//设置显示倍数
stage.addActor(label);
//image
image = new Image(new Texture(Gdx.files.internal(“data/pic2.jpg”)));
image.setPosition(200,0);//绘画起点
image.setSize(320,240);//绘画大小
image.setScale(1.0F); //缩放比例
image.setOrigin(0,0); //设置旋转中心
image.setRotation(30); //旋转角度
stage.addActor(image);
//imageButton
TextureRegion tr[][] = TextureRegion.split(
new Texture(Gdx.files.internal(“data/ImageButton.png”)),100,100);
up = new TextureRegionDrawable(tr[0][0]);
down = new TextureRegionDrawable(tr[0][1]);
imageButton = new ImageButton(up,down);
imageButton.setPosition(100, 100);
stage.addActor(imageButton);
Gdx.input.setInputProcessor(stage);//让舞台接收输入
}

@Override
public void dispose() {
batch.dispose();
}

@Override
public void render() {

Gdx.gl.glClearColor(0,0,0, 0);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
stage.act();
stage.draw();
}

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

@Override
public void pause() {
}

@Override
public void resume() {
}

}
下面为大家介绍这三个常用演员的使用方法：

 

一丶标签（Lable）

Label(java.lang.CharSequence text, Label.LabelStyle style)

Label(java.lang.CharSequence text, Skin skin)

使用前：

首先你需要创建一个hiero的.fnt和.png文件（如何创建请看土豆的教程三），

例如土豆就是创建的“Potato.fnt”“Potato.png”，然后传入“Potato.fnt”和“Potato.png”

和“Color”就构成了一个LabelStyle。

 

使用方法：

BitmapFont font = new BitmapFont(fnt,png,是否旋转);
LabelStyle style = new LabelStyle(font,font.getColor());

这样一个LabelStyle就实现了，下面就可使用它new出Label

Stage stage = new Stage(WIDTH,HEIGHT,true);//宽 高 锁定比率
Label label = new Label(“小树”,labelStyle);
label.setPosition(10,200);//设置坐标
label.setScale(2f);//设置显示倍数
stage.addActor(label);

在render方法中

stage.act();
stage.draw();

通过API可以看出，前面的参数是一个字符串，后面是一个lableStyle，然后第二个lable参数设置，
第一个是字符串，第二个是一个skin类型的参数。lable自带了一些方法，
比如设置旋转、拉伸、位置、大小等。由于lable控件是属于actor类，
所以应该加入到舞台中去展示出来，关于舞台我会在后面详细给大家讲解，这里简单用一下舞台。

代码：

package com.qsuron;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Label;
import com.badlogic.gdx.scenes.scene2d.ui.Label.LabelStyle;

public class MyDemo implements ApplicationListener{
private SpriteBatch batch;
private BitmapFont font;
private LabelStyle labelStyle;
private Stage stage;
private Label label;

@Override
public void create() {

int WIDTH = Gdx.graphics.getWidth();
int HEIGHT = Gdx.graphics.getHeight();
batch = new SpriteBatch();
font = new BitmapFont(Gdx.files.internal(“data/test.fnt”),Gdx.files.internal(“data/test.png”),false);
labelStyle = new LabelStyle(font,font.getColor());
stage = new Stage(WIDTH,HEIGHT,true);//宽 高 锁定比率
label = new Label(“小树”,labelStyle);
label.setPosition(10,200);//设置坐标
label.setScale(2f);//设置显示倍数
stage.addActor(label);
}

@Override
public void dispose() {
batch.dispose();
}

@Override
public void render() {

Gdx.gl.glClearColor(0,0,0, 0);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
stage.act();
stage.draw();
}

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

@Override
public void pause() {
}

@Override
public void resume() {
}

}

二、Image控件（图片）————————————————————————————-

Image(Texture texture) 和 Image(TextureRegion region)  比较常用

API定义：在一个小范围内，显示和拉伸一个纹理。首选的的参数是负责尺寸的。

仅当使用一个TextureRegionDrawable的演员时候才使用拉伸，旋转，和设置起点来赋值给所使用的图片。

常用方法:

VictoriaImage.setColor(Color.PINK); //颜色
VictoriaImage.setScale(0.5F); //缩放比例
VictoriaImage.setPosition(230, 40); //绘画起点
VictoriaImage.setOrigin(0, 0); //设置旋转中心
VictoriaImage.setRotation(45); //旋转角度

VictoriaImage.setSize(390, 300); //绘画大小

例子代码：

package com.me.mygdxgame;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.Texture.TextureFilter;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Label;
import com.badlogic.gdx.scenes.scene2d.ui.Label.LabelStyle;
import com.badlogic.gdx.scenes.scene2d.ui.Image;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.Table;

public class MyGdxGame implements ApplicationListener {

Stage stage;
Image VictoriaImage;
TextureRegion region;
Texture tex;

@Override
public void create() {
tex = new Texture(Gdx.files.internal(“data/1.png”));
region = new TextureRegion(tex, 0, 0, 512, 512);
VictoriaImage = new Image(region);
VictoriaImage.setColor(Color.PINK);
VictoriaImage.setScale(0.5F);
VictoriaImage.setPosition(230, 40);
VictoriaImage.setOrigin(0, 0);// 设置旋转中心
VictoriaImage.setRotation(45);
VictoriaImage.setSize(390, 300);
stage = new Stage(480, 320, false);
Gdx.input.setInputProcessor(stage);
stage.addActor(VictoriaImage);
}

@Override
public void dispose() {

}

@Override
public void render() {
Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
stage.act();
stage.draw();

}

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

@Override
public void pause() {
}

@Override
public void resume() {
}
}

三丶按钮（Button）————————————————————————————-
ImageButton(Drawable imageUp, Drawable imageDown, Drawable imageChecked) //弹起 按下 按击

ImageButton(Skin skin)

Drawable类：在已知的一个给定的矩形内，绘制本身。它提供了边框的大小和最小尺寸，
通过它自带的方法，可以确定的大小和位置。其实他就是为了image提供一个矩形区域，
这里大家不要搞混淆，他只是提供区域，但是没有规定一定button必须画成矩形。

我们使用下面这组图片作为button的image，这也是在网上随便找的

使用代码如下：

TextureRegion tr[][] = TextureRegion.split(
ew Texture(Gdx.files.internal(“data/ImageButton.png”)),100,100);
up = new TextureRegionDrawable(tr[0][0]);
down = new TextureRegionDrawable(tr[0][1]);
imageButton = new ImageButton(up,down);
imageButton.setPosition(100, 100);
stage.addActor(imageButton);

Gdx.input.setInputProcessor(stage);//让舞台接收输入

这里的 TextureRegion[][] tmp = TextureRegion.split(tex, 120, 120);

参考 第5篇 - 动画绘制

完整代码：

package com.me.mygdxgame;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.Texture.TextureFilter;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.ImageButton;
import com.badlogic.gdx.scenes.scene2d.ui.Label;
import com.badlogic.gdx.scenes.scene2d.ui.Label.LabelStyle;
import com.badlogic.gdx.scenes.scene2d.ui.Image;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.Table;
import com.badlogic.gdx.scenes.scene2d.utils.TextureRegionDrawable;

public class MyGdxGame implements ApplicationListener {

Stage stage;
TextureRegionDrawable up;
TextureRegionDrawable down;
TextureRegion buttonUp;
TextureRegion buttonDown;
Texture tex;
ImageButton button;

@Override
public void create() {
tex = new Texture(Gdx.files.internal(“data/control.png”));
TextureRegion[][] tmp = TextureRegion.split(tex, 120, 120);

buttonUp = tmp[0][0];

buttonDown = tmp[0][1];

up = new TextureRegionDrawable(buttonUp);
down = new TextureRegionDrawable(buttonDown);

button = new ImageButton(up, down);

button.setPosition(100, 100);

stage = new Stage(480, 320, false);
Gdx.input.setInputProcessor(stage);
stage.addActor(button);

}

@Override
public void dispose() {

}

@Override
public void render() {
Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
stage.act();
stage.draw();

}

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

@Override
public void pause() {
}

@Override
public void resume() {
}
}
 

PS:大家可能看到模拟器上面的按钮看起来好像被拉伸了，这样按钮会不会很失败，
请大家放心，将来在游戏中我们用相机后，这个问题就会自然解决的，所以不必担心。