2014年10月22日
2014/10/22 LibGDX アプリ作成2 画面遷移、タイトル文字表示、ボタン、イベント処理追加
「前回」は、スプラッシュWindowを表示して終了してました。
今回は、メニュー画面を作成してボタンを配置して、スタイルを指定てボタンポチっとすると、何かするところまで行きます。
GameクラスとScreenクラスの関係は、「こちら」から、マルパクですｗｗｗ
１．画面遷移
スプラッシュ画面がフェードアウトしたら、新しい画面を呼び出します。
①でMainMenuを起動します。
２．遷移先画面を作成します。
おーーーコメントをみておくんなまし！
「Screen」をインプリしています。「ScreenのLifeCycle」はこんな感じです。
マルパクですｗｗｗ
まずはshow()メソッド、①でJSONを指定しSkinを生成します
TextButtonやLabel等いわゆるUI部品をActorと呼んでいます。「20141002 LibGDX 1.3.1 不完全辞書」
②でTableを作成します。このTableにActorを張り付けていきます。
③、④では、Actorを生成しています。その時に①で生成したSkinを使います。第3パラメータに何も指定しなければJSONファイル内のdefaultが使用されます。指定された場合は、その設定が使われるということですね。
⑤でボタンにイベントリスナを指定します。ここでは匿名クラスを生成していますが、リバーシーのようにボタンをクリックした場合の処理が同じ場合は、イベント処理クラスをインナークラスでもいいので別途作成した方がよいでしょう。8×8→64のイベントリスナを作成することになりますよ。こんな受講者がいましたがｗｗｗ
⑥テーブルに生成したActorを追加します。このTableクラスは使い勝手がHTMLに似ています。ColSpanとかあったような気がします。
⑦最後にScreenにTableを張り付けてOK！って感じになります。
resize()、render()に関しては、お約束の書き方です。dispose()だけは書き忘れないようにしましょうね。
３．JSONでスタイル指定
●JSONファイルを指定することで、それぞれのActorに関して、個別にスタイルを指定することができます。
注意：JSON内にコメントはかけないのですが、「//」でコメント扱いします。
①では、ボタンに対していくつかのスタイルを指定しています。big、default、small等
●①に関しての指定方法です。
"com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle": {
「TextButton」のフルパッケージを指定し「$TextButtonStyle」を指定しています。これは、「TextButtonStyle」はインナークラスなので、
お約束として、$以降はインナークラスを指定しているのかもしれません。
●②に関しての指定方法です。
"big": { "up": "button.up", "down": "button.down", "font": black64, "pressedOffsetX": 1, "pressedOffsetY": -1 },
注意すべきは、「/** Optional. */」このコメントです。つまりOptional以前は必須項目と判断し、fontのみを記載すれば動作するはずです。
さらに注意すべきは、「extends ButtonStyle」ひょっすると。。。必須項目はなさそうですが、表示に大きく関係しそうな部分がありますね。
「up」、「down」を追加します。
と、こんな感じでJSONファイルを作成していきますが、項目名を間違えていたり、カンマ忘れたりするとExceptionが発生しますので、
気を付けてくださいね。
ちなみに、「””」で囲っている箇所とそうでない箇所とありますが、なくても大丈夫なようですが「,」の表示が必要な場合などは、「””」でくくった方がよいでしょうねｗ
●継承したクラス
こんなところで、今回は終了です。ボタンポチポチできあると、プログラムできた気がするでしょｗｗｗ？
●倒れるだけで腹筋ワンダーコアでおなじみの商品です。
今回は、メニュー画面を作成してボタンを配置して、スタイルを指定てボタンポチっとすると、何かするところまで行きます。
GameクラスとScreenクラスの関係は、「こちら」から、マルパクですｗｗｗ
１．画面遷移
スプラッシュ画面がフェードアウトしたら、新しい画面を呼び出します。
①でMainMenuを起動します。
~前略~
public class Splash implements Screen{
~中略~
@Override
public void show() {
//Mainで設定したいけど、
Gdx.graphics.setVSync(Settings.vSync());
batch = new SpriteBatch();
tweenManager = new TweenManager();
Tween.registerAccessor(Sprite.class, new SpriteAccessor());
Texture splashTexture = new Texture(Gdx.files.internal("img/sprash.png"));
splash = new Sprite(splashTexture);
splash.setSize(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
Tween.set(splash, SpriteAccessor.ALPHA).target(0).start(tweenManager);
//フェードイン、フェードアウトした後のコールバックを書くよ！
Tween.to(splash, SpriteAccessor.ALPHA, 2).target(1).repeatYoyo(1, 0.5f).setCallback(new TweenCallback(){
@Override
public void onEvent(int type, BaseTween source) {
((Game) Gdx.app.getApplicationListener()).setScreen(new MainMenu()); // ①
}
}).start(tweenManager);
// tweenManager.update(Gdx.graphics.getDeltaTime());
tweenManager.update(Float.MIN_VALUE);
}
~後略~
}
２．遷移先画面を作成します。
おーーーコメントをみておくんなまし！
「Screen」をインプリしています。「ScreenのLifeCycle」はこんな感じです。
マルパクですｗｗｗ
まずはshow()メソッド、①でJSONを指定しSkinを生成します
TextButtonやLabel等いわゆるUI部品をActorと呼んでいます。「20141002 LibGDX 1.3.1 不完全辞書」
②でTableを作成します。このTableにActorを張り付けていきます。
③、④では、Actorを生成しています。その時に①で生成したSkinを使います。第3パラメータに何も指定しなければJSONファイル内のdefaultが使用されます。指定された場合は、その設定が使われるということですね。
⑤でボタンにイベントリスナを指定します。ここでは匿名クラスを生成していますが、リバーシーのようにボタンをクリックした場合の処理が同じ場合は、イベント処理クラスをインナークラスでもいいので別途作成した方がよいでしょう。8×8→64のイベントリスナを作成することになりますよ。こんな受講者がいましたがｗｗｗ
⑥テーブルに生成したActorを追加します。このTableクラスは使い勝手がHTMLに似ています。ColSpanとかあったような気がします。
⑦最後にScreenにTableを張り付けてOK！って感じになります。
resize()、render()に関しては、お約束の書き方です。dispose()だけは書き忘れないようにしましょうね。
package com.mygdx.game.sceens;
import aurelienribon.tweenengine.Timeline;
import aurelienribon.tweenengine.Tween;
import aurelienribon.tweenengine.TweenManager;
import com.badlogic.gdx.Game;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.Camera;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.g2d.TextureAtlas;
import com.badlogic.gdx.scenes.scene2d.Actor;
import com.badlogic.gdx.scenes.scene2d.InputEvent;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Label;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.Table;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton;
import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;
import com.badlogic.gdx.utils.viewport.FitViewport;
import com.badlogic.gdx.utils.viewport.Viewport;
import com.mygdx.game.MyGdxGameButton;
import com.mygdx.game.sceens.tween.ActorAccessor;
public class MainMenu implements Screen {
private Stage stage;
private TextureAtlas atlas;
private Skin skin;
private Table table;
// private TextButton buttonPlay;
// private TextButton buttonSettings;
// private TextButton buttonExit;
private Viewport viewport;
private Camera camera;
private TweenManager tweenManager;
@Override
public void render(float delta) {
//おまじないすぎてわからんが、クリアして絵書いてを行う。
Gdx.gl20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
Gdx.gl20.glClear(GL20.GL_COLOR_BUFFER_BIT);
//ボタンの赤い枠線を消したかったがあえなく撃沈
// Table.drowDebug(stage);
table.debug();
tweenManager.update(delta);
stage.act(delta);
stage.draw();
}
@Override
public void resize(int width, int height) {
viewport.update(width, height);
//小さくしたときに左端による。
// table.setClip(true);
// table.setSize(width, height);
//小さくしたとき中央に表示されるが、階層構造を無効化する
//アクターとテーブルの？？？と謎が残る
table.invalidateHierarchy();
}
@Override
public void show() {
//縦横比は変わらないで伸縮する仕組み
camera = new OrthographicCamera(1136, 640);
viewport = new FitViewport(1136, 640, camera);
stage = new Stage(viewport);
//Adpterで実装済みだからボタンがペコペコ凹む！
Gdx.input.setInputProcessor(stage);
//9Patchを指定すればいい
atlas = new TextureAtlas("ui/atlas.pack");
skin = new Skin(Gdx.files.internal("ui/menuSkin.json"), atlas);//←①ここでatlasを指定しないと、jsonファイルの内容とあってないって怒られる
//②テーブル作成
table = new Table(skin);
table.setFillParent(true);
//Font Button Lebelの書式をStyleではなく、JSONで記述する
//Playボタンスタイルを指定して、書き出す
//③タイトル設定
Label heading = new Label(MyGdxGameButton.TITLE, skin, "big");
//④Playボタン設定
TextButton buttonPlay = new TextButton("PLAY", skin, "big");
//⑤イベント処理追加
buttonPlay.addListener(new ClickListener(){
@Override
public void clicked(InputEvent event, float x, float y){
((Game)Gdx.app.getApplicationListener()).setScreen(new LevelMenu());
}
});
//テキストと外枠の間を設定
buttonPlay.pad(10);
TextButton buttonSettings = new TextButton("Settings", skin);
buttonSettings.addListener(new ClickListener(){
@Override
public void clicked(InputEvent event, float x, float y){
((Game)Gdx.app.getApplicationListener()).setScreen(new Settings());
}
});
//テキストと外枠の間を設定
buttonSettings.pad(10);
//Exitボタンスタイルを指定して、書き出す
TextButton buttonExit = new TextButton("EXIT", skin, "big");
buttonExit.addListener(new ClickListener(){
@Override
public void clicked(InputEvent event, float x, float y){
Gdx.app.exit();
}
});
//テキストと外枠の間を設定
buttonExit.pad(10);
//⑥テーブルにボタン等を張り付ける。
table.add(heading);
//テーブルの下を開ける
table.getCell(heading).spaceBottom(100);
table.row();
table.add(buttonPlay);
table.getCell(buttonPlay).spaceBottom(15);
table.row();
table.add(buttonSettings).spaceBottom(15);
table.row();
table.add(buttonExit);
// table.debug();
//⑦ステージにテーブルを張り付ける
stage.addActor(table);
//アニメーションの作成
tweenManager = new TweenManager();
Tween.registerAccessor(Actor.class, new ActorAccessor());
//Heading color animation
Timeline.createSequence().beginSequence()
.push(Tween.to(heading, ActorAccessor.RGB, 0.5f).target(0, 0, 1))
.push(Tween.to(heading, ActorAccessor.RGB, 0.5f).target(0, 1, 0))
.push(Tween.to(heading, ActorAccessor.RGB, 0.5f).target(1, 0, 0))
.push(Tween.to(heading, ActorAccessor.RGB, 0.5f).target(1, 1, 0))
.push(Tween.to(heading, ActorAccessor.RGB, 0.5f).target(1, 0, 1))
.push(Tween.to(heading, ActorAccessor.RGB, 0.5f).target(1, 1, 1))
.end().repeat(Tween.INFINITY, 0)
.start(tweenManager);
//Heading and Buttons fade-in
Timeline.createSequence().beginSequence()
.push(Tween.set(buttonPlay, ActorAccessor.ALPHA).target(0))
.push(Tween.set(buttonSettings, ActorAccessor.ALPHA).target(0))
.push(Tween.set(buttonExit, ActorAccessor.ALPHA).target(0))
.push(Tween.from(heading, ActorAccessor.ALPHA, 0.5f).target(0))
.push(Tween.to(buttonPlay, ActorAccessor.ALPHA, 0.5f).target(1))
.push(Tween.to(buttonSettings, ActorAccessor.ALPHA, 0.5f).target(1))
.push(Tween.to(buttonExit, ActorAccessor.ALPHA, 0.5f).target(1))
.end().start(tweenManager);
//table fade-in
Tween.from(table, ActorAccessor.ALPHA, 0.75f).target(0);
Tween.from(table, ActorAccessor.Y, 0.75f).target(Gdx.graphics.getHeight() / 8).start(tweenManager);
tweenManager.update(Gdx.graphics.getDeltaTime());
}
@Override
public void hide() {
dispose();
}
@Override
public void pause() {
Gdx.app.getPreferences(MyGdxGameButton.TITLE).putBoolean("fullscreen", true);
Gdx.app.getPreferences(MyGdxGameButton.TITLE).getBoolean("fullscreen");
//強制的にセーブする
Gdx.app.getPreferences(MyGdxGameButton.TITLE).flush();
}
@Override
public void resume() {
// TODO 自動生成されたメソッド・スタブ
}
@Override
public void dispose() {
stage.dispose();
atlas.dispose();
skin.dispose();
}
}
３．JSONでスタイル指定
●JSONファイルを指定することで、それぞれのActorに関して、個別にスタイルを指定することができます。
注意：JSON内にコメントはかけないのですが、「//」でコメント扱いします。
①では、ボタンに対していくつかのスタイルを指定しています。big、default、small等
{
"com.badlogic.gdx.graphics.Color": {
"white": { "r": 1, "g": 1, "b": 1, "a": 1 },
"black": { "r": 0, "g": 0, "b": 0, "a": 1 },
"gray": { "r": 0.3, "g": 0.3, "b": 0.3, "a": 1 },
"red": { "r": 0, "g": 1, "b": 0, "a": 1 },
"green": { "r": 1, "g": 0, "b": 0, "a": 1 },
"blue": { "r": 0, "g": 0, "b": 1, "a": 1 }
},
"com.badlogic.gdx.graphics.g2d.BitmapFont": {
"white64": { "file": "font/white64.fnt" },
"black64": { "file": "font/black64.fnt" },
"white32": { "file": "font/white32.fnt" },
"black32": { "file": "font/black32.fnt" },
"white16": { "file": "font/white16.fnt" },
"black16": { "file": "font/black16.fnt" }
},
"com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle": {
"big": { "font": white64, "fontColor": white },
"default": { "font": white32, "fontColor": white },
"small": { "font": white16, "fontColor": white }
},
//①ボタンのスタイル
"com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle": {
"big": { "up": "button.up", "down": "button.down", "font": black64, "pressedOffsetX": 1, "pressedOffsetY": -1 }, //②
"default": { "up": "button.up", "down": "button.down", "font": black32, "pressedOffsetX": 1, "pressedOffsetY": -1 },
"small": { "up": "button.up", "down": "button.down", "font": black16, "pressedOffsetX": 1, "pressedOffsetY": -1 },
"defaultRadio": { "checked": "radio.checked", "checkedOver": "radio.checkedOver", "up": "radio.uncheked", "over": "radio.unchekedOver", "font": black32, "pressedOffsetX": 1, "pressedOffsetY": -1 },
},
"com.badlogic.gdx.scenes.scene2d.ui.List$ListStyle": {
"default": { "font": white32, "fontColorUnselected": white, "fontColorSelected": black, "selection": "default.selection"}
},
"com.badlogic.gdx.scenes.scene2d.ui.ScrollPane$ScrollPaneStyle": {
"default": { "hScrollKnob": "scroll.h", "vScrollKnob": "scroll.v" }
},
"com.badlogic.gdx.scenes.scene2d.ui.CheckBox$CheckBoxStyle": {
"default": { "font": white32, "checkboxOn": "checkbox.on", "checkboxOff": "checkbox.off", "checkboxOver": "checkbox.over" },
},
"com.badlogic.gdx.scenes.scene2d.ui.TextField$TextFieldStyle": {
"default": { "font": white32, "fontColor": black, "messageFontColor": gray, "background": "default.background", "cursor": "default.cursor" },
},
"com.badlogic.gdx.scenes.scene2d.ui.SelectBox$SelectBoxStyle": {
"default": {
"font": white32, "fontColor": white, "background": "select.up", backgroundOpen: "select.down", scrollStyle: default,
listStyle: { "font": white32, "selection": "default.selection", "background": "select.background" },
},
},
}
●①に関しての指定方法です。
"com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle": {
「TextButton」のフルパッケージを指定し「$TextButtonStyle」を指定しています。これは、「TextButtonStyle」はインナークラスなので、
お約束として、$以降はインナークラスを指定しているのかもしれません。
●②に関しての指定方法です。
"big": { "up": "button.up", "down": "button.down", "font": black64, "pressedOffsetX": 1, "pressedOffsetY": -1 },
注意すべきは、「/** Optional. */」このコメントです。つまりOptional以前は必須項目と判断し、fontのみを記載すれば動作するはずです。
さらに注意すべきは、「extends ButtonStyle」ひょっすると。。。必須項目はなさそうですが、表示に大きく関係しそうな部分がありますね。
「up」、「down」を追加します。
と、こんな感じでJSONファイルを作成していきますが、項目名を間違えていたり、カンマ忘れたりするとExceptionが発生しますので、
気を付けてくださいね。
ちなみに、「””」で囲っている箇所とそうでない箇所とありますが、なくても大丈夫なようですが「,」の表示が必要な場合などは、「””」でくくった方がよいでしょうねｗ
package com.badlogic.gdx.scenes.scene2d.ui;
～中略～
public class TextButton extends Button {
～中略～
/** The style for a text button, see {@link TextButton}.
* @author Nathan Sweet */
static public class TextButtonStyle extends ButtonStyle {
public BitmapFont font;
/** Optional. */
public Color fontColor, downFontColor, overFontColor, checkedFontColor, checkedOverFontColor, disabledFontColor;
public TextButtonStyle () {
}
public TextButtonStyle (Drawable up, Drawable down, Drawable checked, BitmapFont font) {
super(up, down, checked);
this.font = font;
}
public TextButtonStyle (TextButtonStyle style) {
super(style);
this.font = style.font;
if (style.fontColor != null) this.fontColor = new Color(style.fontColor);
if (style.downFontColor != null) this.downFontColor = new Color(style.downFontColor);
if (style.overFontColor != null) this.overFontColor = new Color(style.overFontColor);
if (style.checkedFontColor != null) this.checkedFontColor = new Color(style.checkedFontColor);
if (style.checkedOverFontColor != null) this.checkedFontColor = new Color(style.checkedOverFontColor);
if (style.disabledFontColor != null) this.disabledFontColor = new Color(style.disabledFontColor);
}
}
}
●継承したクラス
package com.badlogic.gdx.scenes.scene2d.ui;
～中略～
public class Button extends Table implements Disableable {
～中略～
/** The style for a button, see {@link Button}.
* @author mzechner */
static public class ButtonStyle {
/** Optional. */
public Drawable up, down, over, checked, checkedOver, disabled;
/** Optional. */
public float pressedOffsetX, pressedOffsetY;
/** Optional. */
public float unpressedOffsetX, unpressedOffsetY;
public ButtonStyle () {
}
public ButtonStyle (Drawable up, Drawable down, Drawable checked) {
this.up = up;
this.down = down;
this.checked = checked;
}
public ButtonStyle (ButtonStyle style) {
this.up = style.up;
this.down = style.down;
this.over = style.over;
this.checked = style.checked;
this.checkedOver = style.checkedOver;
this.disabled = style.disabled;
this.pressedOffsetX = style.pressedOffsetX;
this.pressedOffsetY = style.pressedOffsetY;
this.unpressedOffsetX = style.unpressedOffsetX;
this.unpressedOffsetY = style.unpressedOffsetY;
}
}
}
こんなところで、今回は終了です。ボタンポチポチできあると、プログラムできた気がするでしょｗｗｗ？
●倒れるだけで腹筋ワンダーコアでおなじみの商品です。
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。
画像一覧 
