Last Updated:

Midlet Pascal | Images and buttons

We continue to study Midlet Pascal. In the last article, I talked about the very basics of this language. In this article, let's talk about things more interesting - we will draw a little, consider the output of images and the processing of user clicks on buttons.

Standard shapes are very easy to depict in Midlet Pascal. For example, let's draw a blue rectangle 100x100 and write something in it in white text. Here's how it's done. The SetColor procedure is responsible for the color, where three colors are indicated in parentheses, from which the one that we need will be obtained. Colors are indicated in this order: red, green, blue. The value of each of them can be from 0 to 255. For example, if you write it like this:

SetColor(0, 255, 0);

then we get a bright green color, and if so:

SetColor(244, 242, 77);

then yellow.

Let's move on. We will take a rectangle painted - for this there is a FillRect procedure, where the coordinates of the upper left corner are written in parentheses - the rectangle, width and height. As a result, we get something like this:

program graphic;
begin
  SetColor(0,0,255);
  FillRect(10,10,100,40);
  SetColor(255,255,255);
  DrawText('some text...',15,20);
  repaint;      
  delay(5000);
end.

Rectangles with lines are certainly good, but clearly not enough to make a good toy. It would be nice to show some beautiful picture, which we will do now. With pictures in Midlet Pascal, the situation is not important, only the PNG format is supported. Therefore, all the images that you want to display on the screen must be translated into this format. There are many programs for converting images and I will not dwell on this. I will only say that personally Photoshop is closer to me. There you can edit the picture and save it as needed. Oh well. You have found a good picture, now it's time to add it to our program. To do this, in the menu select "Project -> Import resource file", find our picture and add it. It should appear in the list of files on the left ("Files" tab). If you do not have such a tab, you can enable it via "View -> Files". Let's say your picture is called "picture.png". Now in the program we write:

DrawImage(LoadImage('/picture.png'), 10, 10);

It means something like this: LoadImage loads the image from the resource file (the symbol "/" before the name must be written, otherwise nothing will work). DrawImage displays the loaded image on the screen at a point with coordinates (10, 10). It is possible (and sometimes even necessary) to do it a little differently. First, load the image into some variable (which in this case will be of type image), and then act through this variable. I.e. something like this:

var
  PictureVar : image;
begin
  PictureVar := LoadImage('/picture.png');
  DrawImage(PictureVar, 10, 10);
end.

What is it for? The fact is that the latter option works much faster. This, in principle, does not matter if you need to display one or two small images, but if there are several dozen of these images and you write a very dynamic game - then it is better to do it through variables. And it is more convenient to work with variables, especially if you arrange this matter in an array.

Well - the pictures are more or less sorted out (although I strongly advise you to experiment on your own - I told only the basics, and there are many other interesting things on this topic). Let's say you drew a wonderful picture (for example, the main character of the game), depicted it on the screen and everything seems to be fine. But something is missing. And there's not enough movement. The user will persistently press all the buttons in a row, but nothing will happen.

The hero of the game will not budge. And all because it was still necessary to program and process keystrokes. Well, let's do it. It's very simple. So I'll explain. There are two main functions: GetKeyClicked and GetKeyPressed, which return the code of the key pressed. The only difference between them is that the first returns the last key pressed, and the second - the key pressed at the given moment. Different phones (and devices in general) can return different codes for the same key and then a program that worked fine on one phone will completely refuse to work on another. This problem is solved by the KeyToAction function, which itself determines which key was pressed and displays its value as a constant. For example, if the joystick was pressed up, the value will be GA_UP, if to the right, then - GA_RIGHT. And now I will explain all of the above in practice:

while KeyToAction (GetKeyClicked) <> GA_FIRE do
  begin
    Delay(100);
  end;

This example was taken from midlet Pascal help. This loop (and therefore the program in this case) will work until the center of the joystick is pressed. Read more about constants in the help.

Oh well. You learned a little bit about displaying images and handling keystrokes. And now I want to show you how to put all this into practice. Let's write a small toy using the above. To tell the truth, this is not even a toy yet, but only a blank for it, but for example it is quite suitable. We're going to be driving a flying saucer. To do this, you need to draw a picture of the plate itself and the background of space, where, in particular, the action will take place. Next, I'll just quote the text of the program. It's full of comments and I think you'll figure it out here without a problem.

program game;
var
  space:image; // Variable to store the background
  NLO:image; // Variable to store the plate itself
  X,Y:integer; // Dish coordinates
  key:integer; // Clicked button code
begin
  // Load pictures
  Cosmos:=LoadImage('/Cosmos.png');
  NLO:=LoadImage('/NLO.png');

  // Set the initial coordinates of the plate
  X:=50;
  Y:=50;

  // Loop until the center of the joystick is pressed
  while (Key<>GA_FIRE) do
    begin
      We display images and be sure to put a short pause
      DrawImage(Cosmos,0,0);
      DrawImage(NLO,X,Y);
      delay(100);
      repaint;
      
      // We process button presses and change the coordinates of the plate
      Key:=KeyToAction(getKeyPressed);
      if (Key=GA_LEFT) then X:=X-3;
      if (Key=GA_RIGHT) then X:=X+3;
      if (Key=GA_UP) then Y:=Y-3;
      if (Key=GA_DOWN) then Y:=Y+3;
    end;
end.

This program is completely working, but is made rather simplified. You can try to make it better. I did not attach pictures, because the artist of me is not important.

Well, that's all for today. Next time we will add musical accompaniment to our game.