TechNet Small Basic LitDev Extension Version 1.1.0.2 を追加インストール( 実際はファイルをコピーするだけ )と、色々びっくりするようなな機能が簡単に実行できるようになります。
Small Basic をめちゃくちゃ拡張するライブラリ
その中でも、とてもタイムリーだったのが、非同期アニメーションを分割画像を読み込むだけで簡単に実装できるところです。
GraphicsWindow.BackgroundColor = "DarkGray"
LDGraphicsWindow.PauseUpdates() ' 画像をロードしている間表示しない
LDShapes.AnimationInterval = 0 ' アニメーションしない
anim = LDShapes.AddAnimatedImage(Program.Directory+"\anim.png","True",4,4)
Shapes.Move(anim,100,100) ' 表示位置
LDShapes.AnimationInterval = 75 ' 75 ms インターバルでアニメーション
LDGraphicsWindow.ResumeUpdates() ' 画面表示
上のコードは、サンプルコードそのままです。このコードでは、AddAnimatedImage の第二引数が、"True" なので自動的に繰り返し表示を行います。しかし、目的はボール(弾) が当たった時に一回だけアニメーションするので以下のように実装する事になります。
' ウィンドウの背景色
GraphicsWindow.BackgroundColor = "White"
' ウインドウの位置
GraphicsWindow.Left = 100
GraphicsWindow.Top = 40
' リサイズできないようにする
GraphicsWindow.CanResize = 0
LDShapes.AnimationInterval = 25 ' 爆発アニメーション用
' アニメーション画像の読み込み( 第二引数で自動繰り返しをしない )
explosion = LDShapes.AddAnimatedImage(Program.Directory+"\anim.png","False",4,4)
LDShapes.ZIndex( explosion, 1000 ) ' 爆発なので手前に表示する
Shapes.Zoom(explosion,2,2) ' 爆発の表示サイズを倍にする
' 爆発画像を非表示にする
Shapes.HideShape(explosion)
LoadImage_Url = "https://lh5.googleusercontent.com/-3IWAlBbUSYs/VLgFjekftnI/AAAAAAAAYKw/VM5FI7bYNzw/s800/142133580685821985693.jpeg"
'LoadImage_Url = ""
LoadImage_Opacity = 50
LoadImage()
' ******************************************
' 白いボール
' ******************************************
GraphicsWindow.BrushColor = "#ffffff" ' ボールの塗りつぶし色
Ball_Speed = 1
Ball_Size = 30 ' ボールの直径
Ball_Name = Shapes.AddEllipse(Ball_Size, Ball_Size)
' 初期位置
Ball_x = LoadImage_width / 2 - Ball_Size / 2 ' ボールの中心を画面の中心に
Ball_y = Ball_Size * -1 ' ボールが隠れる位置( 直径ぶん、上辺の上 )
Shapes.Move( Ball_Name, Ball_x, Ball_y )
Sub Ball
Ball_y = Ball_y - Ball_Speed
If Ball_y > (Ball_Size * -2) Then
Shapes.Move( Ball_Name, Ball_x, Ball_y )
' TextWindow.WriteLine(Ball_y)
Else
Ball_y = Ball_Size * -1
EndIf
EndSub
' ******************************************
' 四角形
' ******************************************
GraphicsWindow.BrushColor = "#00ff00" ' 四角形の塗りつぶし色
Rect_Speed = 0.3
Rect_Size = 40 ' 高さ
Rect_Name = Shapes.AddRectangle(Rect_Size * 2, Rect_Size) ' 幅は、高さの倍
' 初期位置
Rect_x = Rect_Size * -2 ' 箱が隠れる位置( 幅ぶん左 )
Rect_y = Rect_Size * 1 ' 箱一個ぶん下
Shapes.Move( Rect_Name, Rect_x, Rect_y )
' 当たりアニメーション中フラグ
Rect_Hit_Flg = 0 ' 0 は、通常時でアニメーション中では無い
Sub Rect
If Rect_Hit_Flg = 0 then
Rect_x = Rect_x + Rect_Speed
If Rect_x < LoadImage_width Then
Shapes.Move( Rect_Name, Rect_x, Rect_y )
' TextWindow.WriteLine(Rect_y)
Else
Rect_x = Rect_Size * -2
EndIf
' 当たり判定用の値を用意する
Hit_x = Rect_x
Hit_width = Rect_Size * 2
Hit_y = Rect_y
Hit_height = Rect_Size
' 当たり判定のチェック
Hit()
' 当たり判定からの結果をこちらの条件にセットする
Rect_Hit_Flg = Hit_Flg
' 当たっていたら、ボールは先に初期化しておく
If Rect_Hit_Flg <> 0 Then
' ボールは消えるが、爆発アニメーションを実行
Shapes.ShowShape(explosion)
LDShapes.Centre(explosion,Ball_x,Ball_y)
LDShapes.AnimationSet(explosion,1)
Ball_y = Ball_Size * -1
EndIf
Else
Shapes.Rotate(Rect_Name, 1000 - Rect_Hit_Flg)
Rect_Hit_Flg = Rect_Hit_Flg - 1
' アニメーションが終了すると初期位置に移動
If Rect_Hit_Flg = 0 Then
Shapes.Rotate(Rect_Name, 0)
Rect_x = Rect_Size * -2
EndIf
EndIf
EndSub
' ******************************************
' 当たり判定
' ******************************************
Sub Hit
Hit_Flg = 0
' 当たり判定は、四角形の居る位置( 高さ ) に、ボールが到達した時で
If Hit_y <= Ball_y And Ball_y <= Hit_y + Hit_height Then
If Hit_x <= Ball_x + Ball_Size And Ball_x <= Hit_x + Hit_width Then
' アニメーション回数
Hit_Flg = 1000
EndIf
EndIf
EndSub
' ******************************************
' キーイベント
' ******************************************
GraphicsWindow.KeyDown = OnKeyDown
Sub OnKeyDown
If Ball_y <= (Ball_Size * -1) Then
Ball_y = LoadImage_height
EndIf
EndSub
' ******************************************
' アニメーションループ
' ******************************************
Loop:
Program.Delay(1)
Ball()
Rect()
Goto Loop
' ******************************************
' グラフィックウインドウに画像を表示する
' LoadImage_Url : URL
' LoadImage_Opacity : 不透明度
' ******************************************
Sub LoadImage
If LoadImage_Url <> "" then
LoadImage_pic = ImageList.LoadImage(LoadImage_Url)
LoadImage_img = Shapes.AddImage(LoadImage_pic)
Shapes.SetOpacity(LoadImage_img, LoadImage_Opacity)
LoadImage_width = ImageList.GetWidthOfImage(LoadImage_pic)
LoadImage_height = ImageList.GetHeightOfImage(LoadImage_pic)
Else
LoadImage_width = Desktop.Width * 0.8
LoadImage_height = Desktop.Height * 0.8
EndIf
GraphicsWindow.Width = LoadImage_width
GraphicsWindow.Height = LoadImage_height
GraphicsWindow.DrawResizedImage(LoadImage_img, 0, 0, LoadImage_width, LoadImage_height)
EndSub
LDShapes.AnimationSet(explosion,1) で、非同期でアニメーションが開始されます(1番の画像から最後の画像まで)。プログラムのループ処理は継続されるので、アニメーション中も弾を撃つ事が可能になっています。
爆発アニメーション用の背景透過 PNG
この画像はサンプルにあったものをそのまま使っています。ただ、一番右下の画像が元々の画像では小さい点が表示されていました。それでは、アニメーションの最後のフレームとして表示し続けてしまうので、何も無い透過した状態に変更しました。
手元に Monaca 公式ガイドブックがあるのですが、インターネット上のドキュメントだけは情報が整理されていない上に一番キモとなるものは、検証しないと解らない事が多かったです。
とりあえず、ons-gesture-detector 要素の使い方のサンプルとして見て下さい。ちなみに、イベント内の gesture 情報を見るには通常 jQuery が必要です。jQuery mobile では、使えません。また、イベントの書き方としても、$(document).on('イベント', 'セレクタ', function(e){} でないと動作しませんでした。他の書き方で書いても、Monaca デバッガで動いても apk にビルドしたものは動作しませんでした。目安としては、プレビューで動かないものは、apk でも動かない可能性があります。
※ jQuery mobile は、コンソールのクリアがうまくいかないような気もします
index.html
public void メソッド(View view)
このような形式のメソッド( 本来の setOnClickListener 用 )を事前に作成しておくと、プロパティの設定でそのメソッドが表示されるので、選択するたけでコード作成が完了します。
▼ CTRL + O で既存のコードを利用する
setContentView のブロックが作成されるので、clickButton に変更して中身を作成します。
以下は具体的なコードです
▼ フィルタの名前を任意に変更
▼ タグでフィルタする
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
