Maverick Project

■Playstation Mobile　UI Toolkit( ProgressBar と CheckBox と Button と Slider )	Prev　Top　Next
	関連ページ：なし

前回に引き続き UI Toolkit をやります。今回は ProgressBar と CheckBox と Button と Slider を使ってみます。
でもって Simple Media Player を適当に作ってみます。
ボタンコントロールで画像を使用しているので、一応アップしときますので、使いたい人は DL してください。

これらの画像と Media Player で再生する mp3 ファイルを例によってソリューションエクスプローラーに追加してください。

using System; using Sce.PlayStation.Core.Environment; using Sce.PlayStation.Core.Graphics; using System.Collections.Generic; using Sce.PlayStation.Core.Input; using Sce.PlayStation.HighLevel.UI; using Sce.PlayStation.Core.Imaging; using Sce.PlayStation.Core.Audio; namespace PSM_Samples { public class AppMain { private static GraphicsContext graphics; private static DebugFont debugFont; private static ProgressBar ProgressBar_Time; private static CheckBox CheckBox_Loop; private static Button Button_Stop; private static Button Button_Play; private static Button Button_Pause; private static CheckBox CheckBox_Mute; private static Button Button_Volume; private static Slider Slider_Volume; private static BgmPlayer bgmPlayer; private static float Volume; private static bool loop = true; public static void Main (string[] args) { Initialize(0); while (loop) { SystemEvents.CheckEvents (); Update (); Render (); } Destroy(); } // 初期化 public static void Initialize( int selectedIndex ) { // GraphicsContext 初期化 graphics = new GraphicsContext( 0, 0, PixelFormat.Rgba, PixelFormat.Depth16, MultiSampleMode.None ); int Width, Height; Width = graphics.GetViewport().Width; Height = graphics.GetViewport().Height; // UI Toolkit 初期化 UISystem.Initialize(graphics); // scene 作成 Scene scene = new Scene(); // BGM Bgm bgm = new Bgm("/Application/resources/GameBgm.mp3"); bgmPlayer = bgm.CreatePlayer(); bgm.Dispose(); // ******************************************************************************************* // 再生時刻プログレスバー // ******************************************************************************************* ProgressBar_Time = new ProgressBar(); ProgressBar_Time.Name = "Time"; ProgressBar_Time.SetSize( 500, 20 ); ProgressBar_Time.SetPosition( 250, Height / 2 ); // Sceneにウィジェットを追加 scene.RootWidget.AddChildLast(ProgressBar_Time); // ******************************************************************************************* // ループチェックボックス // ******************************************************************************************* CheckBox_Loop = new CheckBox(); CheckBox_Loop.Name = "Loop"; CheckBox_Loop.SetSize( 20, 20 ); CheckBox_Loop.SetPosition( ProgressBar_Time.X, ProgressBar_Time.Y + ProgressBar_Time.Height + 30 ); CheckBox_Loop.Style = CheckBoxStyle.CheckBox; CheckBox_Loop.Checked = bgmPlayer.Loop; // イベントを設定 CheckBox_Loop.CheckedChanged += new EventHandler<TouchEventArgs>( CheckBox_CheckedChanged ); // Sceneにウィジェットを追加 scene.RootWidget.AddChildLast(CheckBox_Loop); // ******************************************************************************************* // Stopボタン // ******************************************************************************************* Button_Stop = new Button(); Button_Stop.Name = "Stop"; Button_Stop.SetSize(50, 50); Button_Stop.TextFont = new UIFont(FontAlias.System, 30, FontStyle.Bold); Button_Stop.TextColor = new UIColor( 1, 1, 1, 1 ); Button_Stop.Text = "■"; Button_Stop.SetPosition( CheckBox_Loop.X + CheckBox_Loop.Width + 30, CheckBox_Loop.Y ); // イベントを設定 Button_Stop.ButtonAction += new EventHandler<TouchEventArgs>( Button_ButtonAction ); // Sceneにウィジェットを追加 scene.RootWidget.AddChildLast(Button_Stop); // ******************************************************************************************* // Playボタン // ******************************************************************************************* Button_Play = new Button(); Button_Play.Name = "Play"; Button_Play.SetSize(80, 80); Button_Play.SetPosition( Button_Stop.X + Button_Stop.Width + 30, Button_Stop.Y - ( Button_Play.Height - Button_Stop.Height ) * 0.5f ); // イベントを設定 Button_Play.ButtonAction += new EventHandler<TouchEventArgs>( Button_ButtonAction ); // カスタムイメージ設定 Button_Play.CustomImage = new CustomButtonImageSettings(); Button_Play.CustomImage.BackgroundNormalImage = new ImageAsset("/Application/resources/Play1.png"); // 押していないときの画像 Button_Play.CustomImage.BackgroundPressedImage = new ImageAsset("/Application/resources/Play2.png"); // 押しているときの画像 Button_Play.Style = ButtonStyle.Custom; // Sceneにウィジェットを追加 scene.RootWidget.AddChildLast(Button_Play); // ******************************************************************************************* // Pauseボタン // ******************************************************************************************* Button_Pause = new Button(); Button_Pause.Name = "Pause"; Button_Pause.SetSize(Button_Play.Width, Button_Play.Height); Button_Pause.SetPosition( Button_Play.X, Button_Play.Y ); Button_Pause.Visible = false; // イベントを設定 Button_Pause.ButtonAction += new EventHandler<TouchEventArgs>( Button_ButtonAction ); // カスタムイメージ設定 Button_Pause.CustomImage = new CustomButtonImageSettings(); Button_Pause.CustomImage.BackgroundNormalImage = new ImageAsset("/Application/resources/Pause1.png"); // 押していないときの画像 Button_Pause.CustomImage.BackgroundPressedImage = new ImageAsset("/Application/resources/Pause2.png"); // 押しているときの画像 Button_Pause.Style = ButtonStyle.Custom; // Sceneにウィジェットを追加 scene.RootWidget.AddChildLast(Button_Pause); // ******************************************************************************************* // Mute チェックボックス // ******************************************************************************************* CheckBox_Mute = new CheckBox(); CheckBox_Mute.Name = "Mute"; CheckBox_Mute.SetSize(Button_Stop.Width, Button_Stop.Height); CheckBox_Mute.SetPosition( Button_Play.X + Button_Play.Width + 30, Button_Stop.Y ); CheckBox_Mute.Checked = false; // イベントを設定 CheckBox_Mute.CheckedChanged += new EventHandler<TouchEventArgs>( CheckBox_CheckedChanged ); // カスタムイメージ設定 CheckBox_Mute.CustomCheckBoxImage = new CustomCheckBoxImageSettings(); CheckBox_Mute.CustomCheckBoxImage.NormalUncheckedImage = new ImageAsset("/Application/resources/Mute1.png"); CheckBox_Mute.CustomCheckBoxImage.PressedUncheckedImage = new ImageAsset("/Application/resources/Mute1.png"); CheckBox_Mute.CustomCheckBoxImage.NormalCheckedImage = new ImageAsset("/Application/resources/Mute2.png"); CheckBox_Mute.CustomCheckBoxImage.PressedCheckedImage = new ImageAsset("/Application/resources/Mute2.png"); CheckBox_Mute.Style = CheckBoxStyle.Custom; // Sceneにウィジェットを追加 scene.RootWidget.AddChildLast(CheckBox_Mute); // ******************************************************************************************* // Volume ボタン // ******************************************************************************************* Button_Volume = new Button(); Button_Volume.Name = "Volume"; Button_Volume.Text = "▼"; Button_Volume.TextColor = new UIColor( 1, 1, 1, 1 ); Button_Volume.SetSize(40, 40); Button_Volume.SetPosition( CheckBox_Mute.X + CheckBox_Mute.Width, CheckBox_Mute.Y ); // イベントを設定 Button_Volume.ButtonAction += new EventHandler<TouchEventArgs>( Button_ButtonAction ); // Sceneにウィジェットを追加 scene.RootWidget.AddChildLast(Button_Volume); // ******************************************************************************************* // Volume スライダー // ******************************************************************************************* Slider_Volume = new Slider(); Slider_Volume.Name = "Volume"; Slider_Volume.SetSize(200, 10); Slider_Volume.SetPosition( Button_Volume.X + Button_Volume.Width, Button_Volume.Y ); Slider_Volume.MinValue = 0; Slider_Volume.MaxValue = 1; Slider_Volume.Step = 0.01f; Slider_Volume.Visible = false; Slider_Volume.ValueChanging += new EventHandler<SliderValueChangeEventArgs>( Slider_ValueChanging ); Slider_Volume.ValueChanged += new EventHandler<SliderValueChangeEventArgs>( Slider_ValueChanged ); // Sceneにウィジェットを追加 scene.RootWidget.AddChildLast(Slider_Volume); // scene を追加 UISystem.SetScene(scene, null); // デバッグフォントの作成 debugFont = new DebugFont(); } public static void Destroy() { bgmPlayer.Dispose(); UISystem.Terminate(); debugFont.Dispose(); graphics.Dispose(); } // チェックボックスの状態が変更された private static void CheckBox_CheckedChanged( object sender, TouchEventArgs e) { CheckBox checkbox = (CheckBox)sender; switch( checkbox.Name ) { case "Loop": // ループ再生の設定 bgmPlayer.Loop = checkbox.Checked; break; case "Mute": switch( checkbox.Checked ) { case true: Volume = bgmPlayer.Volume; bgmPlayer.Volume = 0; break; case false: bgmPlayer.Volume = Volume; break; } break; } } // 各種ボタンを押した private static void Button_ButtonAction( object sender, TouchEventArgs e) { Button button = (Button)sender; switch( button.Name ) { case "Stop": Button_Play.Visible = true; Button_Pause.Visible = false; bgmPlayer.Stop(); break; case "Play": Button_Play.Visible = false; Button_Pause.Visible = true; switch( bgmPlayer.Status ) { case BgmStatus.Stopped: bgmPlayer.Play(); break; case BgmStatus.Paused: bgmPlayer.Resume(); break; } break; case "Pause": Button_Play.Visible = true; Button_Pause.Visible = false; if( bgmPlayer.Status == BgmStatus.Playing ) bgmPlayer.Pause(); break; case "Volume": button.Visible = false; Slider_Volume.Value = bgmPlayer.Volume; Slider_Volume.Visible = true; break; } } // スライダーの値が変更中 private static void Slider_ValueChanging( object sender, SliderValueChangeEventArgs e ) { Slider slider = (Slider)sender; switch( slider.Name ) { case "Volume": bgmPlayer.Volume = e.Value; break; } } // スライダーの値が変更された private static void Slider_ValueChanged( object sender, SliderValueChangeEventArgs e ) { Slider slider = (Slider)sender; switch( slider.Name ) { case "Volume": slider.Visible = false; Button_Volume.Visible = true; break; } } // フレーム更新 public static void Update () { List<TouchData> touchDataList = Touch.GetData (0); // マウスクリックでイベント発生させられるようにする UISystem.Update(touchDataList); // 最後まで再生したらボタン表示をPauseからPlayに切り替え if( bgmPlayer.Status == BgmStatus.Stopped && Button_Pause.Visible == true ) { Button_Play.Visible = true; Button_Pause.Visible = false; } // プログレスバーの更新 if( bgmPlayer.Status == BgmStatus.Playing ) { ProgressBar_Time.Progress = (float)( bgmPlayer.Time / bgmPlayer.Duration ); } // 停止したのでプログラムバーを0に戻す else if( bgmPlayer.Status == BgmStatus.Stopped ) ProgressBar_Time.Progress = 0; } // レンダリング public static void Render() { // クリア graphics.SetClearColor (0, 0, 0, 1 ); graphics.SetClearDepth( 1 ); graphics.Clear (); // デバッグ情報出力 debugFont.Draw( graphics, "Simple Media Player" ); // UI Toolkit の描画 UISystem.Render (); // スワップ graphics.SwapBuffers(); } } }

今回はウィジェットの数が多いため結構長いソースとなっています。やはりUIデザインはツールを使わないと面倒ですな。
ということで次回は UI Composer をやります。まあどれだけ作成しやすくなるかは不明ですが。

Common.cs	共通クラスとか
Sprite.vcg	バーテックスシェーダーのcgファイル
Sprite.fcg	フラグメントシェーダーのcgファイル
Sprite.cs	スプライトシェーダークラス
SpriteMesh.cs	スプライトメッシュクラス
DebugFont.cs	デバッグフォントクラス
AppMain.cs	main関数があるソースファイル