Developing Graphical Web Pages

[Static Graphics] [Motion Graphics] [Links]

You should study this section carefully if you intend to write your own games in Smart Pascal. See below the options available when drawing graphics and displaying images and follow the links to more detailed information on collision detection, exclusion zones, sprites and the use of WebGL for advanced graphics. The sub-section on routines available for drawing on a canvas applies whether it belongs to a PaintBox control or to a game project.

We are currently testing the compilation of our examples with Version 3.0 of Smart Mobile Studio. Common alterations required are the addition of System.Types.Graphics to the uses clause and the assignment of font styles to Canvas.FontStyle rather than to Canvas.Font.

Static Graphics

For a static drawing use a PaintBox control as demonstrated in the Julia set example.

For a static image, use an Image control as follows.

  1. Right click on the Resources folder in the tree view of the project at the top left of the Smart IDE.
  2. Click on Add Resource File(s).
  3. Browse to find your file (e.g. my_file.png) and open it.
  4. Add an Image control to the form.
  5. Set the ImageName property to the relative pathname of the image (e.g. res/my_image.png).
  6. Set the Width and Height properties of the Image control to be the same as those of your image.
  7. Position the control by dragging it or by setting the Top and Left properties.
  8. Set the Zoom property if necessary.

Motion Graphics

There are several options available for motion graphics:
  • canvas game project such as the growing collection of SMS student programs and our web versions of student programs linked to in the introduction;
  • sprites;
  • form with PaintBox and/or Image controls and manipulated with your own timer;
  • form(s) with each motion graphic in a TW3GraphicControl manipulated with your own timer as in the Compendium example;
  • form with your own canvas creation and timing as in the AnimatedLogo demo;
  • inbuilt animation such as the ControlAnimation demo where a circular button rotates as it moves round the form. The code is compact but you may find it tricky to produce exactly the effect you want. This might be most suited to adding subtle effects to enliven the use of widgets on forms.
Programming - a skill for life!

Developing graphical web pages including 3D, input from keyboard and mouse and storing and loading data