Tutorials‎ > ‎

[PS Vita] Picture Slideshow Program

posted Nov 21, 2012, 1:18 AM by William Surya Permana   [ updated Aug 15, 2016, 11:24 PM by Surya Wang ]

PSM SDK and PSM Studio

The PSM Studio is a part of SDK (PlayStation® Mobile Software Development Kit), a multi-platform application development and execution environment provided by Sony Computer Entertainment. With PSM SDK, we can create an application that can be executed with PlayStation Vita, Android device supporting PlayStation™ Certified, Windows PC supporting OpenGL 2.0 or later for a single project and single binary file.

Code Structure

When creating new solution in PSM Studio, it will generate the default code in AppMain.cs. Below is the description of each function:
Function name Description
Main() A program starts with Main(). Any application will always require one Main() function. If there are two or more, a build error will occur.
Initialize() The content of Initialize() mainly describes the initialization processing. This processing is performed only once during startup in this program framework.
SystemEvents.CheckEvents() The OS dependent events will be checked with SystemEvents.CheckEvents(). An Android device, for example, will detect an event here where an application is minimized, etc. Window message processing, etc. in Windows will be detected here.
Update() The calculation processing, etc. handled by the CPU is mainly described in Update().
Render() The render processing and calculation processing, etc. handled by the GPU is mainly described in Render(). In Render(), the frame buffers are first cleared with graphics.Clear().
SwapBuffers() SwapBuffers() switches the frame buffers with the vertical synchronization timing.

Objective

Using PSM Studio, we can create a picture slideshow program. This program will show an opening animation, then go to the scenes. Each scenes consist of picture and animated text of the picture desciption. The program will show one scene at first, then it will changed to another screen after some times, with animation. Look at this screenshots below:

 
  .

For more detail, you can also download the solution below and try it for yourself.

Codes

To create program like that, we can use this code:
using System; using System.Collections.Generic; using Sce.PlayStation.Core; using Sce.PlayStation.Core.Imaging; using Sce.PlayStation.Core.Environment; using Sce.PlayStation.Core.Graphics; using Sce.PlayStation.Core.Input; using Sce.PlayStation.HighLevel.UI; namespace NewApp { public class AppMain { static GraphicsContext graphics; static int time; static int pict; static int endanimationtime; static Scene scene; static Label label; static string labeltext; static Label labelimg; static ImageBox imagebox; static ImageBox imageboxbg; static List imagedesc; public static void Main (string[] args) { Initialize (); while (true) { SystemEvents.CheckEvents (); Update (); Render (); } } public static void Initialize () { graphics = new GraphicsContext (800, 600, PixelFormat.Rgba, PixelFormat.Depth24, MultiSampleMode.None); labeltext = "Welcome to Picture Slideshow!"; imagedesc = new List(){ "\"Sheep under a tree near Dorset, England\" — Jeremy Walker", "\"The famous mesas of Monument Valley, Utah\"", "\"A dock at sunset on White Sands Island in the Maldives\" — Angelo Cavalli", "\"Orange flowers\"", "\"A humpback whale slapping the surface with its tail\" — Tom Brakefield" }; UISystem.Initialize (graphics); scene = new Scene(); label = new Label(); label.SetPosition(0, 0); label.SetSize(graphics.Screen.Width, graphics.Screen.Height); label.Font = new UIFont("/Application/resources/bluehigh_cellphone_msv.ttf", 32, FontStyle.Regular); label.TextColor = new UIColor(0, 0.5f, 0, 1); label.HorizontalAlignment = HorizontalAlignment.Center; label.VerticalAlignment = VerticalAlignment.Middle; labelimg = new Label(); labelimg.SetPosition(20, -20); labelimg.SetSize(graphics.Screen.Width-40, graphics.Screen.Height); labelimg.Font = new UIFont(FontAlias.System, 32, FontStyle.Italic | FontStyle.Bold); labelimg.TextColor = new UIColor(1, 1, 0.5f, 1); labelimg.TextShadow = new TextShadowSettings(){ Color = new UIColor(0, 0, 0, 1), HorizontalOffset = 3, VerticalOffset = 3, }; labelimg.HorizontalAlignment = HorizontalAlignment.Left; labelimg.VerticalAlignment = VerticalAlignment.Bottom; labelimg.LineBreak = LineBreak.Word; imagebox = new ImageBox(); imagebox.ImageScaleType = ImageScaleType.Stretch; imagebox.SetSize(graphics.Screen.Width, graphics.Screen.Height); imageboxbg = new ImageBox(); imageboxbg.ImageScaleType = ImageScaleType.Stretch; imageboxbg.SetSize(graphics.Screen.Width, graphics.Screen.Height); scene.RootWidget.AddChildLast(label); scene.RootWidget.AddChildLast(imageboxbg); scene.RootWidget.AddChildLast(labelimg); scene.RootWidget.AddChildLast(imagebox); UISystem.SetScene(scene, null); } public static void Update(){ time++; if(pict == 0){ if (time < 128) graphics.SetClearColor (time, time, time, 1); else if (time <= 128+labeltext.Length*10) label.Text=labeltext.Substring(0, (time-128)/10); else{ time = 0; pict = 1; } } if (pict > 0){ string filename = "/Application/resources/image"+(pict-1)+".jpg"; if(System.IO.File.Exists(filename)) imagebox.Image = new ImageAsset(filename); else pict = 1; if (time < graphics.Screen.Width/2) imagebox.SetPosition(graphics.Screen.Width-time*2, 0); else if (time > graphics.Screen.Width/2 && labelimg.Text != imagedesc[pict-1]){ imageboxbg.Image = new ImageAsset(filename); imagebox.SetPosition(graphics.Screen.Width, 0); labelimg.Text = imagedesc[pict-1].Substring(0, (time-graphics.Screen.Width/2)/5); } else if (labelimg.Text == imagedesc[pict-1] && endanimationtime == 0) endanimationtime = time; else if(time==endanimationtime+60*5){ endanimationtime = 0; time = 0; pict++; } } } public static void Render(){ graphics.Clear (); UISystem.Render (); graphics.SwapBuffers (); } } }

Explanation

In line 12-23, we create the object that we will use later, like:
  • GraphicsContext graphics as the main graphics
  • Scene scene as the main scene
  • 3 integer time, pict, and endanimationtime as the frame counter, current picture index, and time needed to do the animation of image description alternatively
  • 2 Label label and labelimg for opening text and image description alternatively
  • 2 ImageBox imagebox and imageboxbg as animated foreground picture and background picture alternatively
  • string labeltext as opening description
  • List imagedesc as images description
In Initialize function, we create new object, set the value and properties of the following object:
  • [Line 35] graphics, set the resolution to 800x600 pixels
  • [Line 36] labeltext, set the value to ‘Welcome to Picture Slideshow!’
  • [Line 37-43] imagedesc, fill the list of string with the following text:
    - "Sheep under a tree near Dorset, England" — Jeremy Walker
    - "The famous mesas of Monument Valley, Utah"
    - "A dock at sunset on White Sands Island in the Maldives" — Angelo Cavalli
    - "Orange flowers"
    - "A humpback whale slapping the surface with its tail" — Tom Brakefield
  • [Line 45-46] Initialize the UISystem with graphics, and set the new scene
    • Position: Top left corner of the screen (0,0)
    • Size: Full screen (screen width x screen height)
    • Font: using font ‘bluehigh_cellphone_msv.ttf’ in folder ‘resources’ 32pt
    • Color: Green (0,0.5,0)
    • Text alignment: Middle center
  • [Line 48-54] Create the object of label, and set the following properties:
  • [Line 56-68] Create the object of labelimg, and set the following properties:
    • Position: 20px from left, and -20px from top
    • Size: [screen width – 40px] x screen height
    • Font: using system font 32pt in bold italic
    • Color: Yellow (1,1,0.5)
    • Text shadow: Black (0,0,0) with 3px horizontal and vertical offset
    • Text alignment: Bottom left
    • Line break: after a word
  • [Line 70-76] Create the object of imagebox and imageboxbg, and set the following properties:
    • Scaling: stretch image
    • Size: Full screen (screen width x screen height)
  • [Line 78-81] Add label in the most rear of the scene, then imageboxbg, labelimg, and imagebox in the most front layer of the scene.
  • [Line 83] Set scene as the scene of UISystem.
In Update function, we define all of the animations logic:
  • If pict is 0, do the opening text animation.
    • If time is less than 128, set the background color from black to white (in 128 frames)
    • Else, if time is less than 418 (128+10*labeltext length), show ‘Welcome to Picture Slideshow!’ text in the label letter by letter, each after 10 frames.
    • Else, reset the time and go to the image slide show.
  • If pict is more than 0, do the image slide show.
    • Set the filename to ‘image.jpg’ in folder resources.
    • Check if the file mentioned in the filename is exist or not.
      - If yes, read the file and set it as the image of imagebox.
      - If not, reset the pict to 1
    • If time is less than 400 (half of the screen width), set the imagebox X position to screen width – 2*time, so the imagebox will move from right (800) to left (0) in 400 frames.
    • Else, if time is more than 400 but labelimg text is not the same as the image description,
      - read the file and set it as the image of imageboxbg
      - hide the imagebox, set the imagebox position to the right
      - do the animation to show the image description letter by letter every 5 frames
    • Else, if text is already the same as the image description and endanimationtime is 0, set the endanimationtime to the currenttime
    • Then, after waiting 300 frames from endanimationtime, reset the endanimationtime, time, and go to the next picture.
In Render function, we render all the animations.

This is the end of the tutorial. Hope you can understand how to create a simple picture slideshow program in PS Vita using PSM Studio.
ċ
[PS Vita] Picture Slideshow Program.zip
(2026k)
William Surya Permana,
Nov 21, 2012, 1:18 AM