Home Lessons Apps Support About Consultations We create games Contact
Home Lessons Apps Support About Consultations We create games Facebook

Lesson 13: Scrollable icons.

Select the device which you develop the application for:
 

In this project, we will show scrollable icons working in two different modes.

Start Game Pilot, select "Prepare demo project", then select the "13 Scrollable icons" project. The project will load to your device into the Documents/Lesson013 folder.

The project consists of one scene Start with two bars:

The SongIcon character contains pictures of icons for the bars; the icons are arranged vertically. During scrolling, only five icons are displayed, and the rest are hidden behind the background image. This is due to the fact that the background image contains a transparent window through which the icons are visible, as shown on the right of the picture. The icons are displayed above the background image line_scroll.png. And the scrolling buttons Button001.png and Button002.png are above all images .

The scene is described in the Lesson013.sc file:

 

- - - - - CODE BEGIN - - - - -

// Scroll lines
Scene Start
Orientation(TypeDevice) // Orientation landscape for iPad and portrait for iPhone.
XLine1 =TypeDevice*125-75 // The X-coordinate of the first line
XLine2 =TypeDevice*576-304 // The X-coordinate of the second line
Png(line_scroll,XLine1,239,100,338) // The picture under the left line
Png(line_scroll,XLine2,239,100,338) // The picture under the right line

SongSel =1 + Random(16) // Specifies the number of the selected melody from 1 to 16
IconSel =1 + Random(7) // Specifies the number of the selected character from 1 to 7
SoundTik=0 // The flag of playback clicks line movement
Person(Sound) // The character reproduces the sounds of the lines
Person(SongIcon, 1,XLine1) // The range of tunes Icons SongIcon001 - SongIcon016
Person(Icon, 1,XLine2) // The range of characters Icons Icon001 - Icon007
Png(Background)
ButtonPress=0 // The flag button is pressed
Person(Button,1,XLine1,436) // Button Up the range of tunes
Person(Button,2,XLine1, 42) // Button Down the range of tunes
Person(Button,1,XLine2,436) // Button Up the range of characters
Person(Button,2,XLine2, 42) // Button Down the range of characters

Value(SongSel,ScreenCX-40,200) // The number of the selected melody
Value(IconSel,ScreenCX+40,200) // The number of the selected character

// End

- - - - - CODE END - - - - -

 

To output the sound, the Sound character is used. Here is the content of the file Sound.stt:

 

- - - - - CODE BEGIN - - - - -

// Sound.stt - The output of the sound line
  Slot[Time0_Sound]=2
  Timer[0]=50
  Slot[SoundSelect]=3  // Sound select
Rest

// Initialization
1:  Rest

2:  if SoundTik MP3=0
    Rest

3:  MP3=1
    Rest

- - - - - CODE END - - - - -

 

File Sound00.mp3 contains a short click. These clicks are output by timer, every 500 ms, when the variable SoundTik is set. According to the SoundSelect message, the sound Sound001.mp3 is output.

The Button character describes how the buttons «Up» and «Down» work:

 

- - - - - CODE BEGIN - - - - -

   Scale = 50
   Delay = 0
   Slot[Touch_Self]=10
   Slot[LetGo_Self]=11
   Rest

1: Img=1  // UP
   Rest

2: Img=2  // Down
   Rest

10: ButtonPress=1
    If Img=1 If X<ScreenCX Send=UpSong   else Send=UpIcon
    If Img=2 If X<ScreenCX Send=DownSong else Send=DownIcon
   Rest

11: ButtonPress=0
   Rest

- - - - - CODE END - - - - -

 

The view of the button is set according to the states (that are called from the .sc-file): 1 – Up; 2 – Down. By clicking the button, the ButtonPress value is set and one of the following touch messages are sent: UpSong; UpIcon; DownSong; DownIcon.

The SongIcon character is meant to output songs icons, to scroll the list and select an icon.

 

- - - - - CODE BEGIN - - - - -

// SongIcon - Icons ringtones left ruler
  MinY    =443 // Minimum position of the line
  IconH   =68  // Step output icons
  IconN   =16  // The number of icons
  FlagMove=0   // The event flag movement
  Slot[UpSong]    =2
  Slot[DownSong]  =3
  Slot[Touch_Self]=4
  Slot[Move_Self] =5
  Slot[LetGo_Self]=6
Rest

// Initialize the left of the line ringtones
1: Delay=0
   MaxY =MinY+(IconN-5)*IconH // Maximum position of the line
   i=1 to IconN { Parent[i]=0 Scale[i]=50 Img[i]=i X[i]=1 Y[i]=-IconH*i }
   // For output frames
   i=IconN+1  Person[i]=Image Opacity[i]=100 Priority[i]=0 State[i]=1 X[i]=1
   // Output frame
   Y[i]=-IconH*SongSel
   // Move the icons to the current tune was the first in the list
   Y = Min(MinY+(SongSel-1)*IconH, MaxY)
  Rest

// Press the button up
2: If Y<=MinY     { Y=MinY Rest }
   Slot[UpSong]   SoundTik=1
   Delay=500      dY=-IconH
   Delay=  0
   Slot[UpSong]=2 SoundTik=0
   if ButtonPress State=2
   Rest

// Press the button down
3: If Y>=MaxY     { Y=MaxY Rest }
   Slot[DownSong]   SoundTik=1
   Delay=500        dY=IconH
   Delay=  0
   Slot[DownSong]=3 SoundTik=0
   if ButtonPress   State=3
   Rest

//  Slot[Touch_Self]
4: Index=TouchIndex
   N = Index - (Y - MinY)/IconH // The number of the selected icon on the screen
   If (N < 1) Or (N > 5)  { Index=0 Rest }
   SoundTik=0    FlagMove=0
   Rest

  //  Slot[Move_Self]
5:  if Index=0 Rest
    SoundTik=1   FlagMove=1
    if MoveY<MinY { Y=MinY Rest}
    if MoveY>MaxY { Y=MaxY Rest}
    Y=MoveY
   Rest

//  Slot[LetGo_Self]
6:  if Index=0 Rest
    if FlagMove=1 { // After moving the aligning icons
       Y_=MinY+Round((Y-MinY)/IconH)*IconH
       if Y_<MinY  Y_=MinY
       if Y_>MaxY  Y_=MaxY
       Delay=200   Y=Y_
       Delay=0     SoundTik=0
       Rest  }
    SoundTik=0
    If Index>IconN Index=Index-IconN
    SongSel=Index  Send=SoundSelect
    // Выводим рамку
    i=IconN+1      Opacity[i]=100 Y[i]=-IconH*Index
    Send=Shownotes
  Rest

//End

- - - - - CODE END - - - - -

 

During the initialization of the character, 16 child sprites are created in the loop:

i=1 to IconN { Parent[i]=0 Scale[i]=50 Img[i]=i X[i]=1 Y[i]=-IconH*i }

These sprites contain icons of songs and are arranged vertically. Then, sprite 17 is created, which contain the image of the selection frame. State 2 is called when the "Up" button of the bar is tapped. In this implementation, if at the beginning of the bar there is the first icon, then the following condition is fulfilled:

If Y<=MinY     { Y=MinY Rest }

and the movement of the icons in the bar is blocked. In other words, the Y coordinate of the icon bar cannot be smaller than MinY.

If the blocking condition is not fulfilled, then smooth movement 1 icon down occurs: Delay=500 dY=-IconH. Since it takes some time to make the movement, the processing of messages with the Slot[UpSong] command is deactivated for this time period, and the sound is turned on with the command SoundTik=1. If the button is still tapped after the movement, the state 2 is repeated: if ButtonPress State=2.

Similarly, state 3 is called when the "Down" button of the bar is tapped. In this realization, if the last icon is in the end of the line, then the following condition is fulfilled:

If Y>=MaxY     { Y=MaxY Rest }

and the movement of the icons in the bar is blocked. In other words, the Y coordinate of the icons bar cannot be larger than MaxY.

The states 4, 5, 6 are used for processing of touches, movement and releases of the icons bar.

Unlike the SongIcon character, the Icon character presents scrolling in a circle:

 

- - - - - CODE BEGIN - - - - -

// Icon - Icons of characters from the right of the line
  MinY    =443 // Minimum position of the line
  IconH   = 68 // Step output icons
  IconN   =  7 // The number of icons
  FlagMove=0   // The event flag movement
  Slot[UpIcon]   =2
  Slot[DownIcon] =3
  Slot[Touch_Self]=4
  Slot[Move_Self] =5
  Slot[LetGo_Self]=6
Rest

// Initializing the right line characters'
1: Delay=0
   MaxY =MinY+IconN*IconH // Maximum position of the line
   i=1       to IconN   {Parent[i]=0 Scale[i]=50 Img[i]=i       X[i]=1 Y[i]=-IconH*i}
   // Additional icons for turning in a circle
   i=IconN+1 to IconN+5 {Parent[i]=0 Scale[i]=50 Img[i]=i-IconN X[i]=1 Y[i]=-IconH*i}
   // For output frames
   i=IconN+6 to IconN+7 {Person[i]=Image Opacity[i]=0 Priority[i]=0 State[i]=1 X[i]=1}
   i=IconN+6         Opacity[i]=100 Y[i]=-IconH*IconSel
   // Move the icons to the current tune was the first in the list
   Y = MinY+(IconSel-1)*IconH
   Rest

// Press the button up
2: Slot[UpIcon]   SoundTik=1
   If Y<=MinY     Y=MaxY
   Delay=500      dY=-IconH
   Delay=  0      if ButtonPress State=2
   Slot[UpIcon]=2 SoundTik=0
   Rest

// Press the button down
3: Slot[DownIcon]   SoundTik=1
   Delay=500        dY=IconH
   Delay=  0
   If Y>=MaxY       Y=MinY
   if ButtonPress   State=3
   Slot[DownIcon]=3 SoundTik=0
   Rest

//  Slot[Touch_Self]
4: Index=TouchIndex
   N = (MinY-Y)/IconH+Index // The number of the selected icon on the screen
   If (N < 1) Or (N > 5)  { Index=0 Rest }
   SoundTik=0    FlagMove=0
   Rest

//  Slot[Move_Self]
5:  if Index=0   Rest
    SoundTik=1   FlagMove=1
    if MoveY&#MinY { Y=MaxY-Y+MoveY  Rest}
    if MoveY>MaxY { Y=MinY-Y+MoveY  Rest}
    Y=MoveY
   Rest

//  Slot[LetGo_Self]
6:  if Index=0   Rest
    If FlagMove=1 { // After moving the aligning icons
       Y_=MinY+Round((Y-MinY)/IconH)*IconH
       if Y_&#MinY  Y_=MinY
       if Y_>MaxY  Y_=MaxY
       Delay=200   Y=Y_
       Delay=0     SoundTik=0
       If Y_=MaxY  Y =MinY
       Rest  }
    SoundTik=0     Send=SoundSelect
    If Index>IconN Index=Index-IconN
    IconSel=Index
    // Erase the spare frame
    Opacity[IconN+7]=0
    // Output frame
    i=IconN+6         Opacity[i]=100 Y[i]=-IconH*Index
    if Index<6 {i=i+1 Opacity[i]=100 Y[i]=-IconH*(IconN+Index)}
  Rest

//End

- - - - - КОНЕЦ КОДА - - - - -

 

In the character initialization process, after the seven main sprites are created, the five additional sprites are built:

i=IconN+1 to IconN+5 {Parent[i]=0 Scale[i]=50 Img[i]=i-IconN X[i]=1 Y[i]=-IconH*i}

These sprites are located below the main sprites, so if you scroll the bar above the seventh sprite, it will be followed by the first additional sprite, then by the second one, and so on.

After the additional sprites, the two other sprites are created: for the main selection frame and for the additional one.

State 2 is called while tapping the "Up" button of the bar. Since the icons can be moved in a circle without any limitation, the sound is output in any case: SoundTik=1.

If the first icon is in the beginning of the line, then the following condition is fulfilled:

If Y<=MinY   Y=MaxY

Thus, the line moves up as much as possible, and the five icons of the additional sprites are displayed on the screen. The smooth moving down of the line is possible now:

Delay=500      dY=-IconH

While tapping the "Down" button of the bar, the state 3 is called. The icons can be moved in a circle without any limitation, according to the command: Delay=500 dY=IconH.

After the movement, the following condition is checked:

If Y>=MaxY   Y=MinY

Thus, the bar returns to its original position, in which the five first main icons are displayed.
 

- Download the archive with project files for this lesson -


Privacy Policy    Terms of Use     Copyright © Rais Garifullin