NASUのメモ

GDでimagecropを使用したら画像に黒枠ができた場合の対処

2015-11-27T15:50:00.000+09:00

PHPでGDのimagecropを使用し画像をトリミングをしたのですが、画像の周りに黒枠ができてしまいました。
PHPマニュアル＞GD＞imagecrop

こんな感じで上下左右に数pxの黒枠が出てしまいました。
そんなときの対処法。

imagecopyresampledを使う。

PHPマニュアル＞GD＞imagecopyresampled
bool imagecopyresampled (
resource $dst_image ,resource $src_image ,
int $dst_x , int $dst_y ,
int $src_x , int $src_y ,
int $dst_w , int $dst_h ,
int $src_w , int $src_h )

$dst_imageは

$dst_image = imagecreatetruecolor( $img_width, $img_height );

などとし、
$src_imageは元になる画像sourceを指定
$dst_xと$dst_yは0を指定。
$src_xと$src_yは切り取りたいx,y位置。
$dst_wと$src_w、 $dst_hと$src_h
はそれぞれ同じ値で幅と高さを指定。
これで黒枠が出ないようになる。
結果は

はい、すっきり。

imagedestroyで使用したリソースは破棄することを忘れずに。

jQuery UI のSortableでアイテムにclickイベントを併用した場合の問題

2015-10-30T15:01:00.001+09:00

jQuery UIのSotrableを使用し、Sortable内の各アイテムにclickイベントを設置した場合、ドラグ後にclickイベントが発火してしまう問題。
Chromeではドラッグ後にclickイベントが発火することは無かったが、FireFoxなどでは、この問題が起きる。
解決方法はSotableのオプションに

 helper:"clone"

を追加してあげる。
これで解決。

iOS8.0をXcode5.1でデバッグする方法

2014-09-18T11:31:00.004+09:00

テスト端末のiOSを8.0にアップデートしたところ、Xcodeで認識しなくなった。
デバイスの選択で
[プロジェクト名] > [iOS Device]
となり、端末が選択できない。

まず、以下の場所を確認
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport/
この場所にサポートしているiOSのバージョン毎のディレクトリーがあるが、
「7.1 (11D167)」はあるが、やはり8.0は無い。

アップデートを待つのも一つ。

ある掲示板に次のような記述があった。リンクを作るそうだ。
sudo ln -s /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSup‌port/7.1\ (11D167) /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSup‌port/8.0\ (12A4265u)

試してみたところ、一応動いた。
Xcode6がリリースされるまでこれで待とうと思う。

ちなみに、Xcode6のベータ版をインストールしている場合は、下記で動くそうだ。
sudo ln -s /Applications/Xcode6-Beta4.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport/8.0\ (12A4331d) /Volumes/MAVERICKS/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport/8.0\ (12A4331d)

レンタルサーバでsass,compassを使う為のgemの設定

2014-05-26T00:07:00.001+09:00

私の使用しているレンタルサーバはさくらレンタルサーバです。
この環境で、sassを使うために設定した内容を一部紹介します。
というか、さくらレンタルサーバでgemを使用するための.bash_profileもしくは.cshrcの設定について。

さくらレンタルサーバなどで通常、gem を使用してインストールする場合、何も設定していない場合は

ERROR: While executing gem ... (Gem::FilePermissionError)
  You don't have write permissions into the /usr/local/lib/ruby/gems/1.8 directory.

などと言われてしまいます。

当然レンタルサーバで、/usr/local/配下は書き込めないでしょう。

なので、次のような設定をします。

.cshrcの場合

setenv GEM_HOME $HOME/local/rubygems/gems
setenv RUBYLIB $HOME/local/rubygems/lib
setenv RB_USER_INSTALL true
setenv PATH ${PATH}:$HOME/local/rubygems/bin

.bash_profileの場合

PATH=$PATH:$HOME/local/rubygems/bin
GEM_HOME=$HOME/local/rubygems/gems
RUBYLIB=$HOME/local/rubygems/lib
RB_USER_INSTALL=true
export GEM_HOME
export RUBYLIB
export RB_USER_INSTALL
export PATH

などとし、設定を反映して下さい。

さて、sassとcompassをインストールしてみましょう。

$ gem install sass
Fetching: sass-3.3.7.gem (100%)
Successfully installed sass-3.3.7
1 gem installed
Installing ri documentation for sass-3.3.7...
Installing RDoc documentation for sass-3.3.7...
$
$ gem install compass
Fetching: sass-3.2.19.gem (100%)
Fetching: chunky_png-1.3.1.gem (100%)
Fetching: fssm-0.2.10.gem (100%)
Fetching: compass-0.12.6.gem (100%)
Successfully installed sass-3.2.19
Successfully installed chunky_png-1.3.1
Successfully installed fssm-0.2.10
Successfully installed compass-0.12.6
4 gems installed
Installing ri documentation for sass-3.2.19...
・
・
・
Installing RDoc documentation for compass-0.12.6...
$

OKでした。

ASUS EeePC 1025c & Ubuntu12.04 ...解像度変更編

2012-06-29T01:25:00.000+09:00

Ubuntu12.04をASUSのEeePCシリーズに入れた場合、ディスプレイの解像度が800x600で変更できないという報告をよく目にします。
今回はASUSのEeePC1025Cの1024x600に変更できたので報告致します。

6月にEeePC1025Cを購入。
メモリを4GBに、HDDをSSDに換装。
そしてOSはUbuntu12.04に変更。
Ubuntuのバージョンが11.xの時はUnityの評価が低く、自分でも不満があったので１１.xの導入はしなかったのですが、今回はディスプレイが10.1インチなので、このUIなら使い易いだろうと思い、12.04にしました。
Windowsの左下のメニューを頑張って操作しなくてもよいからと言う意味で。

EeePCにUbuntu12.04を入れた状態で、どのようになったかを軽くまとめます。

メモリの認識は/proc/meminfoで確認して4GBちゃんと認識されています。
備え付けのSDカードリーダも動作しています。
ディスプレイの上についているカメラも認識しています。
備え付けのマイクも認識しています。
キーボードのFnで割り当てられている機能について、ディスプレイの明るさ調整はできないようです。それ以外はほとんど使えます。スクリーンショットもできます。
Unityですが、やはり標準ではUnity2Dです。特に２Dでも問題がないので、今のところ３Dに変更する予定はありません。
動作速度ですが、全く問題ないです。というより、期待していた以上にキビキビ動いてくれます。
最後にバッテリーですが、このPCはハードウエアとソフトウエアでバッテリーの持ちを良くし、仕様では10時間と言う表記となっています。ただし、購入時の環境（Windows）で。Ubuntuにした場合、バッテリーの持ち時間の表示は、6時間強となりました。SSDを使用しているので、HDDのままだと恐らくもう少し短くなるかもしれません。

さて、本題です。
ディスプレイの設定が解像度800x600で変更できない。
xrandrの結果は次のようになっています。
---------------------------------------------------------------
xrandr: Failed to get size of gamma for output default
Screen 0: minimum 800 x 600, current 800 x 600, maximum 800 x 600
default connected 800x600+0+0 0mm x 0mm
800x600 0.0*"
---------------------------------------------------------------
maximumが800x600なので、設定ツール等を使用してもそれ以外に変更ができない。

解決方法として、xrandrを使用したり、xorg.confで設定したりという方法があります。
それについては未確認です。

こちらのフォーラムで同様の問題に対し、解決策が載っているのを見つけました。
http://forum.ubuntu-fr.org/viewtopic.php?pid=9088911
フランス語ですが。

この方法は、カーネルを更新することで、グラフィックモジュールが認識され、ディスプレイの解像度を変えることが出きると。

ASUS EeePC1025CのグラフィックはIntel atom内臓のグラフィックモジュールを使用しています。
このモジュールはGMA3650というものです。

Ubuntu12.04のkernelバージョンは3.2.0で、どうやらこのkernelはこのGMA3650には対応していないもよう。

それに対し、今回更新しようとしているバージョンは3.4.xは対応している。

ということで、試してみた。
手順は以下。

1. カーネルをダウンロードして解凍

$ wget http://www.kernel.org/pub/linux/kernel/v3.0/linux-3.4.4.tar.bz2
$ tar jxvf linux-3.4.4.tar.bz2

2. make menuconfigで.configの設定
(他のツールでも、直接変更してもよい）

解凍したディレクトリに移動
$ cd linux-3.4.4/
$ make menuconfig

ここで、もしmenuconfigを立ち上げるのに必要なライブラリがない場合は、エラーが出力される。
--------------------------------------------------------------

*** Unable to find the ncurses libraries or the
*** required header files.
*** 'make menuconfig' requires the ncurses libraries.
***
*** Install ncurses (ncurses-devel) and try again.
***

--------------------------------------------------------------
なので、必要なライブラリをインストールする。

$ sudo apt-get install libncurses5-dev

再度チャレンジ
$ make menuconfig

3. menuconfigで.configを編集

Device drivers ---> Graphics support ---> Direct rendering manager --->
ここで"Intel GMA5/600 KMS Framebuffer"という項目を探し、"m"と入力
この項目の下に"Intel GMA3600/3650 support"と言う項目が出るので、"y"と入力。

フォーラムに載っている内容ではもう一つ項目を設定。

Device drivers ---> Staging drivers --->
"Realtek RTS5139 USB card reader support" の項目に"n"を入力
理由は分からない。

これでmenuconfigは終了。

4. コンパイルの実行

まず、カーネルコンパイル用のパッケージをインストール
$ sudo apt-get install kernel-package

そして、make clean
$ make-kpkg clean

makeする。
CONCURRENCY_LEVEL=`getconf _NPROCESSORS_ONLN` fakeroot make-kpkg --initrd --append-to-version=-custom kernel_image kernel_headers

ここから恐らく1時間以上かかった。

5. インストール

makeが終了したら、一旦上の階層に戻る
$ cd ..

このディレクトリにcustom kernel_imageとkernel_headersの2ファイルのdebファイルができているので
次のコマンドでインストール
$ sudo dpkg -i *.deb

6. 起動の設定

$ cd /lib/modules
このディレクトリに3.4.4-customが作成されている。

initramfsに、この3.4.4-customを登録する。
$ sudo update-initramfs -ck 3.4.4-custom

grubを更新。
$ sudo update-grub

これでカーネルの更新は終了。
リブートする。

恐らく再起動後にディスプレイの設定が変だから、とりあえず1024x600にするよ。
といったメッセージが表示される。

ログイン。

画面を見ていただきたい。
1024x600の画面になっているはずである。

設定から、ディスプレイの解像度の設定を見てみると1024x600
ただし、それ以外の選択肢はない。

しかしながら、ディスプレイがとても見やすい。
そして、カーネルをコンパイルしたので、動作がさらに早くなった。
気がする。

N2600を使ったASUS EeePC101CHなどでも同様に変更できると思われる。

【AndEngine】背景を画像にする

2012-01-31T02:11:00.002+09:00

背景に画像を使いたい場合の方法。

onLoadResources()内で
背景テクスチャのTextureRegionクラスのインスタンスを生成

onLoadScene()内で
背景画像からSpriteのインスタンスを生成、
SpriteからSpriteBackgroundのインスタンスを生成してsetBackgroundメソッドに読み込ませてあげる。

■SpriteBackgroundクラスのコンストラクタ
SpriteBackground(final BaseSprite pBaseSprite)
SpriteBackground(final float pRed, final float pGreen, final float pBlue, final BaseSprite pBaseSprite)

■SceneクラスのsetBackgroundメソッド
void setBackground(final IBackground pBackground)

参考にしたソース

AndEngine-Forumsより
Set as a background image

では実際に使用した際から抜粋


/**  省略  **/

private BitmapTextureAtlas mBackgroundTextureAtlas;
private TextureRegion mBackgroundGrassTextureRegion;

public void onLoadResources() {
  BitmapTextureAtlasTextureRegionFactory.setAssetBasePath("gfx/");
  this.mBackgroundTextureAtlas = new BitmapTextureAtlas(512, 512, TextureOptions.BILINEAR_PREMULTIPLYALPHA);
  this.mBackgroundGrassTextureRegion = BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mBackgroundTextureAtlas, this, "bg1.png", 0, 0);
  this.mEngine.getTextureManager().loadTextures(this.mBackgroundTextureAtlas);
}
 
public Scene onLoadScene() {
  this.mEngine.registerUpdateHandler(new FPSLogger());
  this.mScene = new Scene();
  
  final Sprite sp = new Sprite(0, 0, mBackgroundGrassTextureRegion);
  this.mScene.setBackground(new SpriteBackground(sp));
  
  /** 省略 **/
  
  return this.mScene;
}

【AndEngine】TimerHandlerの使い方

2012-01-18T00:32:00.000+09:00

タイマーを使用してｎ秒後に〇〇したい。という要望を叶える。

まずTimerHandlerクラスについてjavadocを見てみよう。
Class TimerHandler

コンストラクタは２つ
TimerHandler(float pTimerSeconds, boolean pAutoReset,
　　　　　　　ITimerCallback pTimerCallback)
TimerHandler(float pTimerSeconds, ITimerCallback pTimerCallback)

第一引数は秒で指定。

上の方は第二引数にboolean型でAutoResetの指定ができる。

メソッドのsetAutoReset(boolean pAutoReset) でも同様に設定できる。

AutoResetをtrueにすると指定した秒で繰り返しpTimerCallbackが呼ばれる。

falseの場合は指定した秒が経過するとpTimerCallbackが１度呼ばれる。

reset()を実行すると再度Timerが起動する。

引数のpTimerCallbackはITimerCallbackインターフェイスを実装した自身を呼ぶためにthisを指定したり、ITimerCallbackインターフェイスをnewしても良い。

Interface ITimerCallback

では、サンプル

final TimerHandler timerHandler = new TimerHandler(1.0f, true, new ITimerCallback() {

  public void onTimePassed(TimerHandler pTimerHandler) {
  
    /** 処理したい内容を記述 **/
    Debug.d("TimePassed");
  }

});
mScene.registerUpdateHandler(timerHandler);

TimerHandlerのインスタンスをregisterUpdateHandlerに渡すことを忘れずに。

【AndEngine】TMX map を使った簡単な例衝突判定

2012-01-15T16:27:00.000+09:00

今回は衝突判定についてです。

以前から使っているDigitalOnScreenControlを使ってプレイヤーを移動させ、Sceneに描画した四角と衝突している間、色を変える例です。

使用している変数、DigitalOnScreenControl等は以前のコードを参考にして下さい。

final Rectangle exampleRectangle = new Rectangle(100, 100, 32, 32);  //四角を描画
exampleRectangle.setColor(0f, 0f, 1f);  //青
mScene.attachChild(exampleRectangle);

mScene.registerUpdateHandler(new IUpdateHandler(){

  public void onUpdate(float pSecondsElapsed) {
    //四角とplayerが衝突したか
    if(exampleRectangle.collidesWith(player)){
      exampleRectangle.setColor(1f, 0f, 0f);  //赤
    } else {
      exampleRectangle.setColor(0f, 0f, 1f);  //青
    }
  }

  public void reset() {
  }

});

実行結果は以下になります。

衝突前

衝突時

衝突前は青。衝突時は赤となるようにしました。

【AndEngine】TMX map を使った簡単な例 HUDを使う

2012-01-13T00:22:00.000+09:00

HUDは、ヘッドアップディスプレイの略であり、ディスプレイ上の固定位置に配置されているユーザーインターフェースのすべての部分を表します。
以前紹介したDigitalOnScreenControlのように画面がスクロールしてもディスプレイ上の固定位置に配置されています。

では、今回はHUDを継承した簡単なサンプルを提示したいと思います。

画面上の上部に白い四角を描きたいと思います。

まずはHUDを継承したTestBarクラスを作成

import org.anddev.andengine.engine.camera.Camera;
import org.anddev.andengine.engine.camera.hud.HUD;
import org.anddev.andengine.entity.primitive.Rectangle;

public class TestBar extends HUD {

  public TestBar(float pX, float pY, final Camera pCamera) {
    this.setCamera(pCamera);

    final Rectangle btnSubRect = new Rectangle(pX, pY, pCamera.getWidth(), 30);
    btnSubRect.setColor(1, 1, 1);
    this.attachChild(btnSubRect);

    pCamera.setHUD(this);
  }
}

BaseGameActivityを継承したクラスのonLoadScene()でSceneにsetChildSceneとして作成したクラスのインスタンスを渡す。

private Scene mScene;
public Scene onLoadScene() {

  mScene = new Scene();
  
  /** ・・省略・・ **/
  
  final TestBar testbar = new TestBar(0, 0, this.mBoundChaseCamera);
  
  /** ・・省略・・ **/
  
  return mScene;
}

以上の内容を実行すると下の画像のようになります。

DigitalOnScreenControlでプレイヤーを移動させても画面の上部に白い四角は固定された位置に描画され続けます。

AndEngine.orgのHUDの記事にHUDの説明とCreatingとRemovingについて例が載っています。

【AndEngine】TMX map を使った簡単な例プレイヤーを移動させる（AStarPath編）

2012-01-12T00:56:00.002+09:00

前回はプレイヤーの移動する座標をpathに登録しましたが、今回は２点間の最短経路をpathに登録してプレイヤーを移動させる方法についてです。
タワーディフェンス系のゲームで敵がゴールに向かって最短経路で進んだりするやつです。

AStarPathFinderクラスのfindPathメソッドで最短経路のPathを取得できます。
ただしfindPathメソッドで定義したApathはタイルの列と行なので座標に変換する必要があります。

/AStarPathを定義
final org.anddev.andengine.util.path.Path Apath;
// findpath（）の動作を定義
final ITiledMap<TMXLayer> tmap = new ITiledMap<TMXLayer>(){

  public int getTileColumns() {
    return mTMXTiledMap.getTileColumns();
  }

  public int getTileRows() {
     return mTMXTiledMap.getTileRows();
  }

  // findpath()で処理されるときに処理する必要があるコードはここに記述
  public void onTileVisitedByPathFinder(int pTileColumn, int pTileRow) {
  }

   // どのブロックをブロックしたいかカスタマイズできる
   Lets you customize what blocks you want to be considered blocked
  public boolean isTileBlocked(TMXLayer pEntity, int pTileColumn, int pTileRow) {
    // false by defaultの場合はブロックは無し
        return false;
  }

  // 重要
  // pathの次のタイルのコストを返却
  public float getStepCost(TMXLayer pEntity, int pFromTileColumn, int pFromTileRow, int pToTileColumn, int pToTileRow) {
    // ↓例
    TMXProperty cost = tmxLayer.getTMXTile(pToTileColumn, pToTileRow).getTMXTileProperties(mTMXTiledMap).get(0);
    return Float.parseFloat(cost.getValue());
  }

};

// AStarPathFinderを宣言
// 第１引数：上記のITiledMap
// 第２引数：最大検索の深さ（この値が小さすぎる場合、プログラムがクラッシュします。）
// 第３引数：斜め移動を許可するかどうか
// 第４引数：（オプション）ヒューリスティック関数の使用
AStarPathFinder<TMXLayer> AStarPath = new AStarPathFinder<TMXLayer>(tmap, 100, false);

// findPath()でpathを作成
// 第１引数：TMXLayerの場合、上記ITiledMapとAStarPathFinder関数を使ってテンプレート化。
// 第２引数：最大のコスト（１タイルではなく終了までの値。値が小さすぎる場合、プログラムがクラッシュします。）
// 第３引数＆第４引数：スタートタイルの場所（列と行で指定）
// 第５引数＆第６引数：エンドタイルの場所（列と行で指定）
Apath = AStarPath.findPath(this.mTMXTiledMap.getTMXLayers().get(0), 100, 1, 13, 5, 12);

// プレイヤーのエンドタイルの場所をセットしておく
final TMXTile tmxTile = tmxLayer.getTMXTile(5, 12);
if(tmxTile != null) {
  player.setPosition(tmxTile.getTileX(), tmxTile.getTileY());
}

// 実際にスプライトを操作するための座標ベースのパスを宣言
final Path path = new Path(Apath.getLength());

int tilewidth = mTMXTiledMap.getTileWidth();
int tileheight = mTMXTiledMap.getTileHeight();

// 座標ベースのパスからAStarPath用に変換
for(int i=0;i < Apath.getLength();i++)
{
  path.to((Apath.getTileColumn(i) * tilewidth), (Apath.getTileRow(i) * tileheight));
}

// スプライトの移動時間をそれぞれのタイルで0.5になるように設定
// Move the sprite, the duration in PathModifier sets each tile to a .5 duration
player.registerEntityModifier(new PathModifier((Apath.getLength()/2), path, null, new IPathModifierListener() {
  public void onPathStarted(PathModifier pPathModifier, IEntity pEntity) {
  }

  public void onPathWaypointStarted(PathModifier pPathModifier, IEntity pEntity, int pWaypointIndex) {
  }

  public void onPathWaypointFinished(PathModifier pPathModifier, IEntity pEntity, int pWaypointIndex) {
  }

  public void onPathFinished(PathModifier pPathModifier, IEntity pEntity) {
  }
}));

Class Path(org.anddev.andengine.util.path.Path)

Class AStarPathFinder

【AndEngine】TMX map を使った簡単な例プレイヤーを移動させる（Path編）

2012-01-10T23:16:00.037+09:00

RPGなどで町の中の人などが決められたルートを歩いていたりする。
そういったことを実現するための方法。

変数等は前回までのコードか参考元のソースを参考に

Pathを生成してルートを指定。

PathModifierを生成。

final Path path = new Path(5).to(20, 20).to(0, 100).to(100, 100).to(100, 20).to(20, 20);
final PathModifier pathModifier = new PathModifier(10, path, null, new IPathModifierListener(){
  
  public void onPathStarted(PathModifier pPathModifier, IEntity pEntity) {
  }
  public void onPathWaypointStarted(PathModifier pPathModifier, IEntity pEntity, int pWaypointIndex) {
    //ここにプレイヤーのアニメーション等を記述
  }
  
  public void onPathWaypointFinished(PathModifier pPathModifier, IEntity pEntity, int pWaypointIndex) {
  }

  public void onPathFinished(PathModifier pPathModifier, IEntity pEntity) {
  }
});

player(AnimatedSpriteクラス)にpathModifierを登録

player.registerEntityModifier(pathModifier);

//Pathをループさせたい場合はLoopEntityModifierを挟む
//player.registerEntityModifier(new LoopEntityModifier(pathModifier));

Class PathModifier.Path

Class PathModifier

Class LoopEntityModifier

【AndEngine】TMX map を使った簡単な例 DigitalOnScreenControlでスプライトを移動

2012-01-09T13:26:00.000+09:00

前回ではDigitalOnScreenControlでプレイヤーを操作するところまででした。

今回はDigitalOnScreenControlでプレイヤーを移動することをします。

概要
・physics worldを作成
・プレイヤーを物理シミュレーション上で動くようにBodyを作成
・DigitalOnScreenControlの操作でプレイヤーを動かす

public Scene onLoadScene() {
  this.mEngine.registerUpdateHandler(new FPSLogger());

  // Create physics world
  this.mPhysicsWorld = new FixedStepPhysicsWorld(30, new Vector2(0, 0), false, 3, 2);

  //Create the scene and register the physics world
  mScene = new Scene();
  mScene.registerUpdateHandler(this.mPhysicsWorld);

  //TMX mapの読み込み
  try {
    final TMXLoader tmxLoader = new TMXLoader(this, this.mEngine.getTextureManager(), // TextureOptions.BILINEAR_PREMULTIPLYALPHA,
        TextureOptions.NEAREST);
    this.mTMXTiledMap = tmxLoader.loadFromAsset(this, "tmx/ground1.tmx");
  } catch (final TMXLoadException tmxle) {
    Debug.e(tmxle);
  }

  // レイヤーをSceneに結びつける
  for (int i = 0; i < this.mTMXTiledMap.getTMXLayers().size(); i++){
    TMXLayer layer = this.mTMXTiledMap.getTMXLayers().get(i);
    mScene.attachChild(layer);

  }

  // カメラがTMXLayerの境界を超えないようにする
  final TMXLayer tmxLayer = this.mTMXTiledMap.getTMXLayers().get(0);
  this.mBoundChaseCamera.setBounds(0, tmxLayer.getWidth(), 0, tmxLayer.getHeight());
  this.mBoundChaseCamera.setBoundsEnabled(true);


  //プレイヤーの表示
  final int centerX = (CAMERA_WIDTH - this.mPlayerTextureRegion.getTileWidth()) / 2;
  final int centerY = (CAMERA_HEIGHT - this.mPlayerTextureRegion.getTileHeight()) / 2;

  final AnimatedSprite player = new AnimatedSprite(centerX, centerY, this.mPlayerTextureRegion);
  this.mBoundChaseCamera.setChaseEntity(player);
  final FixtureDef playerFixtureDef = PhysicsFactory.createFixtureDef(0, 0, 0.5f);
  final Body mPlayerBody = PhysicsFactory.createBoxBody(this.mPhysicsWorld, player,
      BodyType.DynamicBody, playerFixtureDef);
  this.mPhysicsWorld.registerPhysicsConnector(new PhysicsConnector(player,
      mPlayerBody, true, false){
    @Override
    public void onUpdate(float pSecondsElapsed){
      super.onUpdate(pSecondsElapsed);
      mBoundChaseCamera.updateChaseEntity();
    }
  });
  mScene.attachChild(player);

  //プレイヤーのコントロール
  this.mDigitalOnScreenControl = new DigitalOnScreenControl(0,
      CAMERA_HEIGHT - this.mOnScreenControlBaseTextureRegion.getHeight(),
      this.mBoundChaseCamera,
      this.mOnScreenControlBaseTextureRegion,
      this.mOnScreenControlKnobTextureRegion, 0.1f,
      new IOnScreenControlListener() {
    public void onControlChange(final BaseOnScreenControl pBaseOnScreenControl,
        final float pValueX, final float pValueY) {
      // Set the correct walking animation
      if (pValueY == 1){
        // Up
        if (playerDirection != PlayerDirection.UP){
          player.animate(ANIMATE_DURATION, 0, 2, true);
          playerDirection = PlayerDirection.UP;
        }
      }else if (pValueY == -1){
        // Down
        if (playerDirection != PlayerDirection.DOWN){
          player.animate(ANIMATE_DURATION, 9, 11, true);
          playerDirection = PlayerDirection.DOWN;
        }
      }else if (pValueX == -1){
        // Left
        if (playerDirection != PlayerDirection.LEFT){
          player.animate(ANIMATE_DURATION, 3, 5, true);
          playerDirection = PlayerDirection.LEFT;
        }
      }else if (pValueX == 1){
        // Right
        if (playerDirection != PlayerDirection.RIGHT){
          player.animate(ANIMATE_DURATION, 6, 8, true);
          playerDirection = PlayerDirection.RIGHT;
        }
      }else{
        if (player.isAnimationRunning()){
          player.stopAnimation();
          playerDirection = PlayerDirection.NONE;
        }
      }
      // Set the player's velocity
      mPlayerBody.setLinearVelocity(pValueX * PLAYER_VELOCITY, pValueY * PLAYER_VELOCITY);
    }
  });
  this.mDigitalOnScreenControl.getControlBase().setBlendFunction(GL10.GL_SRC_ALPHA,
      GL10.GL_ONE_MINUS_SRC_ALPHA);
  this.mDigitalOnScreenControl.getControlBase().setAlpha(0.5f);
  this.mDigitalOnScreenControl.getControlBase().setScaleCenter(0, 128);
  this.mDigitalOnScreenControl.getControlBase().setScale(1.25f);
  this.mDigitalOnScreenControl.getControlKnob().setScale(1.25f);
  this.mDigitalOnScreenControl.getControlKnob().setAlpha(0.5f);
  this.mDigitalOnScreenControl.refreshControlKnobPosition();

  mScene.setChildScene(this.mDigitalOnScreenControl);

  return mScene;
}

解説
前回のコードに追記する形でonLoadScene()メソッド内のコードを載せています。

5行目でphysics worldを作成しています。
これを9行目でSceneに対UpdateHandlerとして登録しています。

physics worldについては以下を参考にしてください。
AndEnginePhysicsBox2DExtension::Creating A Physicsworld

38から49行目でBodyを作成しています。

93行目でBodyに対して速度を設定しています。

以上でプレイヤーはDigitalOnScreenControlの操作で移動することができます。

【AndEngine】TMX map を使った簡単な例スプライトとDigitalOnScreenControl

2012-01-07T14:13:00.002+09:00

前回の続き

今回の内容
・TMX mapにプレイヤーのスプライトを表示
・プレイヤーをDigitalOnScreenControlで操作できるようにする。

概要
onLoadResources()
・スプライトのテクスチャ読み込み
・DigitalOnScreenControlのテクスチャを読み込み
(画像については前回同様、TileCollision.zipに含まれている画像を使用)

onLoadScene()
・プレイヤーを表示
・DigitalOnScreenControlでプレイヤーを操作

クラス変数にenumを定義。その他必要な物は元のソースを参考に追加

private enum PlayerDirection{
  NONE,
  UP,
  DOWN,
  LEFT,
  RIGHT
}
private PlayerDirection playerDirection = PlayerDirection.NONE;

onLoadResources()

public void onLoadResources() {
  BitmapTextureAtlasTextureRegionFactory.setAssetBasePath("gfx/"); // assets/gfx配下に画像が置かれていること
  // Control texture
  this.mOnScreenControlTexture = new BitmapTextureAtlas(256, 128, TextureOptions.BILINEAR_PREMULTIPLYALPHA);
  this.mOnScreenControlBaseTextureRegion = BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mOnScreenControlTexture, this, "onscreen_control_base.png", 0, 0);
  this.mOnScreenControlKnobTextureRegion = BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mOnScreenControlTexture, this, "onscreen_control_knob.png", 128, 0);

  // Player sprite texture
  this.mTexturePlayer = new BitmapTextureAtlas(128, 128, TextureOptions.DEFAULT);
  this.mPlayerTextureRegion = BitmapTextureAtlasTextureRegionFactory.createTiledFromAsset(this.mTexturePlayer, this, "hero.png", 0, 0, 3, 4);

  // Load the textures
  this.mEngine.getTextureManager().loadTextures(this.mTexturePlayer, this.mOnScreenControlTexture);
}

onLoadScene()

public Scene onLoadScene() {

  /*・・省略(TMX mapの読み込み等)・・*/
 
  //プレイヤーのアニメーションをインスタンス化
  final int centerX = (CAMERA_WIDTH - this.mPlayerTextureRegion.getTileWidth()) / 2;
  final int centerY = (CAMERA_HEIGHT - this.mPlayerTextureRegion.getTileHeight()) / 2;
  final AnimatedSprite player = new AnimatedSprite(centerX, centerY, this.mPlayerTextureRegion);
 
  //Sceneにプレイヤーを結びつける
  mScene.attachChild(player);
 
  //プレイヤーのコントロール
  this.mDigitalOnScreenControl = new DigitalOnScreenControl(0,
      CAMERA_HEIGHT - this.mOnScreenControlBaseTextureRegion.getHeight(),
      this.mBoundChaseCamera,
      this.mOnScreenControlBaseTextureRegion,
      this.mOnScreenControlKnobTextureRegion, 0.1f,
      new IOnScreenControlListener() {
        public void onControlChange(final BaseOnScreenControl pBaseOnScreenControl, final float pValueX, final float pValueY) {
          // Set the correct walking animation
          if (pValueY == 1){
            // Up
            if (playerDirection != PlayerDirection.UP){
              player.animate(ANIMATE_DURATION, 0, 2, true);
              playerDirection = PlayerDirection.UP;
            }
          }else if (pValueY == -1){
            // Down
            if (playerDirection != PlayerDirection.DOWN){
              player.animate(ANIMATE_DURATION, 9, 11, true);
              playerDirection = PlayerDirection.DOWN;
            }
          }else if (pValueX == -1){
            // Left
            if (playerDirection != PlayerDirection.LEFT){
              player.animate(ANIMATE_DURATION, 3, 5, true);
              playerDirection = PlayerDirection.LEFT;
            }
          }else if (pValueX == 1){
            // Right
            if (playerDirection != PlayerDirection.RIGHT){
              player.animate(ANIMATE_DURATION, 6, 8, true);
              playerDirection = PlayerDirection.RIGHT;
            }
          }else{
            if (player.isAnimationRunning()){
              player.stopAnimation();
              playerDirection = PlayerDirection.NONE;
            }
          }
        }
    });
  this.mDigitalOnScreenControl.getControlBase().setBlendFunction(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);
  this.mDigitalOnScreenControl.getControlBase().setAlpha(0.5f);
  this.mDigitalOnScreenControl.getControlBase().setScaleCenter(0, 128);
  this.mDigitalOnScreenControl.getControlBase().setScale(1.25f);
  this.mDigitalOnScreenControl.getControlKnob().setScale(1.25f);
  this.mDigitalOnScreenControl.getControlKnob().setAlpha(0.5f);
  this.mDigitalOnScreenControl.refreshControlKnobPosition();
  //Sceneの
  mScene.setChildScene(this.mDigitalOnScreenControl);

  return mScene;
}

実行するとこうなります。

今回の内容ではプレイヤーの向きが変わるだけです。
次回ではプレイヤーが移動するようにします。

【AndEngine】TMX map を使った簡単な例

2012-01-06T12:59:00.001+09:00

ここのサンプルを参考にした。
[Tutorial] Collision objects from TMX map
リンク先のTileCollision.zipをダウンロードしてTileの画像等を利用しました。

事前に以下のことをする。

andengine.jarをライブラリに追加
タイルの画像を用意
Tiledを使ってtmxファイルを用意

では、TileCollisionを参考にTMX mapの表示をする。
ここでは単にTMX mapを表示するまでの最小限のコードとする。

public class WtMiniTestActivity extends BaseGameActivity {

  static final int CAMERA_WIDTH = 480;
  static final int CAMERA_HEIGHT = 320;

  private TMXTiledMap mTMXTiledMap;
  private BoundCamera mBoundChaseCamera;

  //Scene
  private Scene mScene;

  public Engine onLoadEngine() {
    this.mBoundChaseCamera = new BoundCamera(0, 0, CAMERA_WIDTH, CAMERA_HEIGHT);
    return new Engine(new EngineOptions(true, ScreenOrientation.LANDSCAPE,
        new RatioResolutionPolicy(CAMERA_WIDTH, CAMERA_HEIGHT),
        this.mBoundChaseCamera));
  }

  public void onLoadResources() {
  }

  public Scene onLoadScene() {
    this.mEngine.registerUpdateHandler(new FPSLogger());

    mScene = new Scene();
    //TMX mapの読み込み
    try {
      final TMXLoader tmxLoader = new TMXLoader(this,
          this.mEngine.getTextureManager(), // TextureOptions.BILINEAR_PREMULTIPLYALPHA,
          TextureOptions.NEAREST);
      this.mTMXTiledMap = tmxLoader.loadFromAsset(this, "tmx/ground1.tmx");
    } catch (final TMXLoadException tmxle) {
      Debug.e(tmxle);
    }

    // レイヤーをSceneに結びつける
    for (int i = 0; i < this.mTMXTiledMap.getTMXLayers().size(); i++){
      TMXLayer layer = this.mTMXTiledMap.getTMXLayers().get(i);
      mScene.attachChild(layer);
    }

    // カメラがTMXLayerの境界を超えないようにする
    final TMXLayer tmxLayer = this.mTMXTiledMap.getTMXLayers().get(0);
    this.mBoundChaseCamera.setBounds(0, tmxLayer.getWidth(), 0,
        tmxLayer.getHeight());
    this.mBoundChaseCamera.setBoundsEnabled(true);

    return mScene;
  }

  public void onLoadComplete() {
  }
}

上記のコードで表示されるのが以下の様な感じ

今日はここまで。

【雑記】SyntaxHighlighterを使う

2012-01-05T09:33:00.000+09:00

ソースコードの表示テスト

public class HelloWorld{
    public static void main(String [] args) {
        System.out.println("Hello world!");
    }
}

コードを投稿する際に以下の内容を記述
ex.)java



 投稿のコード

参考させていただいたサイト