Smart Mobile Studio
  • News
  • Forums
  • Download
  • Store
  • Showcases
    • Featured demos
    • The Smart Contest 2013, Round 1 – Graphics
  • Documentation
    • Get the book
    • System requirements
    • Prerequisites
    • Getting started
      • Introduction
      • Application architecture
      • The application object
      • Forms and navigation
      • Message dialogs
      • Themes and styles
    • Project types
      • Visual project
      • Game project
      • Console project
    • Layout manager
    • Networking
      • TW3HttpRequest
      • TW3JSONP
      • Loading files
  • About

2d tile drawing for game programmers

Posted on 01.04.2012 by Jon Lennart Posted in Developers log, Documentation 2 Comments

The following is a class that allows you to draw game tile graphics easily. A game tile is basically just a small chunk of graphics (typically 16×16 or 32×32 pixels in size) that you use to display game maps. Typical examples are the older Super Mario games from Nintendo, or the Sega megadrive Sonic games.

Here is an example of a tile-set which you can use (the tileset below is public domain)

A classical 16x16 tileset

A classical 16x16 tileset

And here is the class you can use to draw the tiles

[sourcecode language=”delphi”]
unit SpriteSheet;

interface

uses w3ctrls, w3graphics, w3System;

type

TW3SpriteSheet = Class(TObject)
private
FImage: TW3Image;
FReady: Boolean;
FColumns: Integer;
FRows: Integer;
FTotal: Integer;
FWidth: Integer;
FHeight: Integer;

procedure HandleImageReady(sender:TObject);
Procedure setWidth(aValue:Integer);
procedure setheight(aValue:Integer);
Procedure ReCalcInfo;

public
Constructor Create;virtual;
destructor Destroy;Override;

Procedure LoadImage(aUrl:String);
Procedure Draw(Canvas:TW3Canvas;dx,dy:Integer;FrameIndex:Integer);

Property SpriteWidth:Integer read FWidth write setWidth;
Property SpriteHeight:Integer read FHeight write setHeight;
Property Ready:Boolean read FReady;
End;

implementation

Constructor TW3SpriteSheet.Create;
Begin
inherited Create;
FImage:=TW3Image.Create(NIL);
FImage.OnLoad:=HandleImageReady;
FWidth:=32;
FHeight:=32;
end;

destructor TW3SpriteSheet.Destroy;
Begin
FImage.onLoad:=NIL;
FImage.free;
inherited;
end;

Procedure TW3SpriteSheet.setWidth(aValue:Integer);
Begin
FWidth:=Max(aValue,4);
ReCalcInfo;
end;

procedure TW3SpriteSheet.setheight(aValue:Integer);
Begin
FHeight:=Max(aValue,4);
ReCalcInfo;
end;

Procedure TW3SpriteSheet.ReCalcInfo;
var
img : Variant;
Begin
if FReady then Begin
img:=ObjToVariant(FImage.TagRef);
FColumns:=(img.width+1) div FWidth;
FRows:=(img.height+1) div FHeight;
FTotal:=FColumns * FRows;
end else Begin
FColumns:=0;
FRows:=0;
FTotal:=0;
end;
end;

procedure TW3SpriteSheet.HandleImageReady(sender:TObject);
Begin
FReady:=True;
ReCalcInfo;
end;

Procedure TW3SpriteSheet.LoadImage(aUrl:String);
Begin
FReady:=False;
ReCalcInfo;
FImage.LoadFromUrl(aUrl);
end;

Procedure TW3SpriteSheet.Draw(Canvas:TW3Canvas;
dx,dy:Integer;FrameIndex:Integer);
var
sx,sy: Integer;
Begin
if FReady then
Begin
sx:=FrameIndex mod FColumns;
sy:=FrameIndex div FRows;
Canvas.DrawImageF(ObjToVariant(FImage.TagRef),
sx*SpriteWidth, sy*SpriteHeight,
SpriteWidth, SpriteHeight,
dx, dy, SpriteWidth, SpriteHeight);
end;
end;

[/sourcecode]

In our next installment I’ll give you some examples of how to use it

Pascal game developer’s compo!

Posted on 31.03.2012 by Jon Lennart Posted in Developers log
Waste of time? Think again!

Waste of time? Think again!

Many programmers don’t get the demo scene. What could be the point of spending hours, days and weeks on creating effects? Well for me the demo scene has been one of the best things in my life. I grew up with Commodore 64, MSX, Atari and Amiga machines. And while we all loved to play games only the few asked the magical question “how”. Some were happy to just play the games, but the rest of us, those that became programmers as adults, were always the people who just had to ask the question “how the hell did they do that”?

I have been extremely privileged growing up in Norway during the 1980’s and 90’s, nowhere in the world (with exception of Germany, Sweden and Finland) was the demo scene stronger than in Norway. Even to this day we fill the viking ship annually with thousands of young programmers full of creativity (check out this site for tickets to The Gathering). So there can be little doubt that the “demo scene” is primarily a European phenomenon.

PS: if you are looking for talent then The Gathering should be the proverbial shangri-la !

But why? What is it good for?

Demo coding is one of the best ways of growing as a programmer and as a thinking individual. The problems you face (like tweening objects, calculating sprite paths, how one object stands in context to another, proportion, animation cycles – the works!) will help you in every avenue of life, including your personal life since it involved organization and thinking in terms of context. It will benefit you in the most unlikely of scenarios: Take an example from my life, I always wanted to code games, but I spent many years coding invoice systems, win32 services and all the “boring stuff”. But one day my employers wanted a 3d look and feel to their report, so i ended up using the skills i learned as a demo coder to complete tasks. Without it those reports would have been very dry, very dull and not very productive. So it turned out to be my creative side that made the difference, not my education (!) You dont learn stuff like this at the university.

No matter what your interests might be, from games programming to spreadsheets – you are bound to face the same mathematics and the same train of thought. But those that really succeed in these things are the programmers who took the time to really experiment with demo and games coding. Anyone can code a spreadsheet, but it’s the hacker that makes the numbers bounce 😉

The Pascal Game Developer’s compo

Smart Mobile @ 98% complete

Smart Mobile @ 98% complete

When you think “pascal”, you think database driven business applications right? Well that’s just wrong. Delphi (which is the universal name for object pascal) earned that label because it made database programming simple in the early 90’s. But object pascal as a language is capable of so much more. So much so that databases become almost trivial in comparison. Remember all those high-speed dos games? (if you don’t, then get an emulator) A lot of those games were coded in turbo pascal. This was before we had full OOP and the might of the VCL at our fingertips.

It thus stands to reason that with all the power of the Delphi XE2 and the latest free-pascal compiler, that object pascal could knock out some serious games right? I mean — when compared to a commodore 64, Atari ST or Amiga?

Remember that the commodore 64 contained the same cpu-chip that powers most modern dishwasher’s today. Yet that little machine running at 1Mz with an 8bit bandwidth knocked out some pretty cool games! Now imagine what you could do with a computer 10.000 times faster, with 32 bit graphics, 24 bit sound and an IDE unlike anything we had back in the 80’s!

Well, unless you are reading this on a Pentium PC, that computer is what you have right now.

The gathering, Vikingship, Norway

The gathering, Vikingship, Norway

So… If they can do this on a 1mhz dishwasher, then surely we can do better right? With our dual-core processors, fifth generation 3d graphics chip-sets and latest operative systems?

Here are a couple of examples of what people can do with a commodore 64 (second video is from a modern PC, coded in machine code):

Instinct & Horizon C-64 Demo, 2008

And just how much brilliance can you pack into 64k of machine code?

Razor 1911 – my #1 demo group

And just to make it retro – here is the first Amiga demo i ever saw. This demo made me forget all about commodore 64 gaming, and ask the question “how”. This demo changed me from a gamer for a coder:

Doc – Demons are forever

Our mission is to follow javascript at every step. From it’s birth as HTML5 and onto it’s full evolution as a fully fledged multimedia system. We want to push the limits of what can be done under javascript to the full extent of it’s capabilities. And last but not least – to provide the infrastructure required for modern object pascal programmers to continue their hard earned experience and knowledge under a new platform. Javascript is quite alien to the average Delphi or FPC programmer, but with Smart you will be able to knock out apps with little effort.

Getting inspired

Today, the Pascal Game Developer competition started. And Smart was included in the list of allowed pascal compilers (jeey!). If you would like to use our product to push some limits then send us an email and we will return a preview version of smart (32bit) that you can use. You can use Smart as much as you want for the duration of the competition for free. While we are still in beta (with all the bells and whistles that pertains) there really is no compiler and IDE out there like Smart for webkit development!

Let’s push that border a couple of more inches, like pascal has always done 🙂

Click here for the pascal game developer’s website

About the author


Jon Lennart Aasenden is a software architect at Optimale Systemer AS. He is currently the lead developer of Smart Mobile Studio and have been a strong supporter of Delphi and object pascal since the beginning. He is also involved in the evangelizing of object pascal in Norway and is by many called “a Delphi fundamentalist” due to his somewhat radical teaching methods. The views of the author is his own and does not reflect the policy of Optimale Systemer AS.

delphi demo fpc freepascal game gamedev games javascript Object Pascal OP4JS Pascal scene

Retro demo coded in Smart

Posted on 30.03.2012 by Jon Lennart Posted in Developers log 2 Comments
Parallax scrolling galore

Parallax scrolling galore

This is a small retro demo I put together last weekend. Believe it or not but it doesn’t use the HTML5 canvas display at all. Everything you see moving on the screen are actually controls (which in this case inherits from the lightweight TW3MovableControl, which is the base-class TW3CustomControl builds on).

You can test-drive the demo yourself here: Parallax demo

qrcode

Features

  • parallax scrolling
  • alpha blending
  • scroll-text with bitmap fonts
  • 3d rotated logo
  • hardware accelerated transformations

Note: This is a webkit only demo, so it will only run under Chrome or Safari (also iPad and iPhone is supported, but lacks sound).

The source

352 lines of uber-messy code, just like the good old days on the Amiga 🙂

[sourcecode language=”delphi”]
unit Form1;

interface

uses w3system, w3graphics, w3ctrls, w3components, w3time,
w3forms, w3application, w3sprite3d, w3bmpfont;

const
CHAR_SIZE = 16;
CHARSET_FONT = ‘ !"#¤%&/{}=_-\[]0123456789:;(|)?*abcdefghijklmnopqrstuvwxyz’;

type

TMenuLogo = Class(TW3Sprite)
Private
mDown: Boolean;
protected
Procedure InitializeObject;override;
public
Procedure UpdateBehavior(Const TimeId:Integer);override;
End;

TMenuBackground01 = Class(TW3Sprite)
protected
Procedure InitializeObject;override;
public
Procedure UpdateBehavior(Const TimeId:Integer);override;
End;

TFront = Class(TW3Sprite)
protected
Procedure InitializeObject;override;
public
Procedure UpdateBehavior(Const TimeId:Integer);override;
End;

TForm1=class(TW3form)
private
{ Private methods }
{$I ‘Form1:intf’}
FLogo: TMenuLogo;
FBack01: TMenuBackground01;
FTimer: TW3Timer;
FCounter: Integer;
FMyFont: TKromaskyBitmapFont;
FCredits: TW3Image;
FFontDone:Boolean;
FChars: Array of TW3Sprite;
FReady: Array of TW3Sprite;
FScrolled:Float;
FText: String;
FCharIndex:Integer;
FAudio: Variant;
FFront: TFront;
Procedure HandleUpdate(Sender:TObject);
procedure setupChars;
protected
{ Protected methods }
Procedure InitializeObject;override;
Procedure FinalizeObject;override;
Procedure StyleTagObject;reintroduce;virtual;
Procedure Resize;Override;
Procedure FormActivated;override;
Procedure FormDeActivated;override;
end;

Implementation

//############################################################################
// TFront
//############################################################################

Procedure TFront.InitializeObject;
Begin
inherited;
setTransformFlags(CNT_USE_POS);
Background.fromURL(‘res/tile_ground.png’);
Width:=96 * 32;
height:=96;
Transparent:=True;
end;

Procedure TFront.UpdateBehavior(Const TimeId:Integer);
var
mRange: Integer;
Begin
mRange:=application.Display.View.Width;
mRange:=(mRange div 96) * 96;
if X<=-(mRange) then
X:=0.0;
MoveX(-1.5);
Update3d;
end;

//############################################################################
// TMenuBackground01
//############################################################################

Procedure TMenuBackground01.InitializeObject;
Begin
inherited;
setTransformFlags(CNT_USE_POS);
Background.fromURL(‘res/gamebg02.png’);
Width:=960 * 2;
height:=480;
end;

Procedure TMenuBackground01.UpdateBehavior(Const TimeId:Integer);
Begin
if X<=-960 then
X:=0;
MoveX(-0.80);
Update3d;
end;

//############################################################################
// TMenuLogo
//############################################################################

Procedure TMenuLogo.InitializeObject;
Begin
inherited;
setTransformFlags(CNT_USE_POS or CNT_USE_SCALE or CNT_USE_ROTY);
Width:=422;
Height:=57;
mDown:=True;
Update3d;

Transparent:=True;
background.fromURL(‘res/parallax.png’);
end;

Procedure TMenuLogo.UpdateBehavior(Const TimeId:Integer);
Begin
if (TimeId mod 3)=0 then
Begin
case mDown of
True:
Begin
if Y<20 then
Begin
MoveY(0.50);
end else
mDown:=False;
end;
false:
Begin
if Y>10 then
Begin
MoveY(-0.50);
end else
mDown:=True;
end;
end;
update3d;
end else
Begin
RotateY(-1);
update3d;
end;
end;

//############################################################################
// TForm1
//############################################################################

function getXforChar(aChar:String):Integer;
var
xpos: Integer;
begin
if length(aChar)>1 then
xpos:=pos(aChar[1],CHARSET_FONT) else
if length(aChar)=1 then
xpos:=pos(aChar,CHARSET_FONT) else
exit;
result:=CHAR_SIZE * (xpos -1);
end;

Procedure TForm1.InitializeObject;
Begin
inherited;
{$I ‘Form1:impl’}
StyleClass:=”;

FTimer:=TW3Timer.Create;
FTimer.Delay:=1;
FTimer.onTime:=HandleUpdate;

asm
@FAudio = new Audio();
(@FAudio).autoplay=true;
(@FAudio).src = "res/Last Ninja wastelands.mp3";
end;

FBack01:=TMenuBackground01.Create(self);
FLogo:=TMenuLogo.Create(self);
FFront:=TFront.Create(self);
FMyFont:=TKromaskyBitmapFont.Create;

FText:=’Welcome to 1990* This is a nice retro demo coded in ‘
+ ‘¤Smart Mobile Studio¤ Brought to you by Optimale Systemer AS ‘
+ ‘&&&&&&&& ‘;
FText:=lowercase(FText);
FCharIndex:=0;

Background.fromURL(‘res/ancientbg.png’);
w3_setStyle(tagRef,’background-repeat’,’repeat-x’);
w3_setStyle(tagRef,’background-size’,’auto 100%’);
End;

Procedure TForm1.FinalizeObject;
Begin
FLogo.free;
FBack01.free;
FFront.free;
inherited;
End;

Procedure TForm1.HandleUpdate(Sender:TObject);
var
x: Integer;
mSprite: TW3Sprite;
Begin
inc(FCounter);

FLogo.UpdateBehavior(FCounter);
FBack01.UpdateBehavior(FCounter);
FFront.UpdateBehavior(FCounter);

If FMyFont.Ready
and not FFontDone then
Begin
FFontDone:=True;
FCredits:=FMyFont.DrawAndMake(‘coded by quartex’);
FCredits.InsertInto(self.tagRef);
FCredits.Visible:=True;

FCredits.top:=Height – (FCredits.height + 10);
FCredits.left:=(Width div 2) – (FCredits.width div 2);
w3system.w3_Callback(self.resize,10);
end;

if length(FChars)>0 then
Begin
x:=-1;
repeat
inc(x);

mSprite:=FChars[x];
mSprite.moveX(-0.5);

if mSprite.x<=(-CHAR_SIZE) then
begin
FChars.Delete(x,1);
FReady.add(mSprite);
dec(x);
end else
mSprite.update3d;

until x>=high(FCHars);

end;

FScrolled+=0.5;
if FScrolled>=CHAR_SIZE then
begin
FScrolled:=0.0;
inc(FCharIndex);
if FCharIndex>Length(FText) then
FCharIndex:=1;

if FReady.length>0 then
begin
mSprite:=FReady[0];
FReady.Delete(0,1);
w3_setStyle(mSprite.tagRef,’backgroundPosition’,
‘-‘ + IntToStr(getXforChar(FText[FCharIndex])) +’px 0px’);
mSprite.x:=Width;
mSprite.y:=(Height div 2) – (CHAR_SIZE div 2);
mSprite.Update3d;
FChars.add(mSprite);
end;
end;
end;

procedure TForm1.setupChars;
var
cnt: Integer;
x: Integer;
mChar: TW3Sprite;
begin
if FChars.length<1 then
Begin
cnt:=width div CHAR_SIZE;
if (cnt * CHAR_SIZE) < width then
inc(cnt);
inc(cnt);

for x:=0 to cnt-1 do
Begin
mChar:=TW3Sprite.Create(self);
mChar.setTransformFlags(CNT_USE_POS);
mChar.background.fromUrl(‘res/fnt16x16.png’);

w3_setStyle(mChar.tagRef,’backgroundPosition’,’0px 0px’);
mChar.x:=-CHAR_SIZE * 2;
mChar.width:=CHAR_SIZE;
mChar.height:=CHAR_SIZE;
//mChar.color:=clRed;
mChar.Transparent:=True;
mChar.visible:=true;
mChar.update3d;
FReady.add(mChar);
end;
end;
end;

Procedure TForm1.FormActivated;
Begin
inherited;
setupChars;
FTimer.Enabled:=True;
end;

Procedure TForm1.FormDeActivated;
Begin
FTimer.enabled:=False;
inherited;
end;

Procedure TForm1.Resize;
var
dx: Integer;
Begin
inherited;
dx:=(width div 2) – (FLogo.width div 2);
FLogo.setBounds(dx,10,FLogo.Width,FLogo.Height);
FFront.setBounds(0,Height-FFront.height,FFront.width,FFront.height);
FBack01.top:=FFront.top – FBack01.height;
if FCredits<>NIl then
begin
FCredits.top:=Height – (FCredits.height + 10);
FCredits.left:=(Width div 2) – (FCredits.width div 2);
end;
end;

Procedure TForm1.StyleTagObject;
Begin
// Custom styling
End;

end.
[/sourcecode]

demo parallax

Sprite3d converted to Smart

Posted on 23.03.2012 by Jon Lennart Posted in Developers log 2 Comments

I am happy to report that the award winning HTML5 3d system Sprite3d has been converted to Object Pascal and will ship with Smart Mobile Studio. Sprite3d is a fantastic javascript library which allows you to perform advanced 3d transformations on ordinary HTML elements. Since CSS 3d is hardware accelerated both on mobile and desktop browsers -the results often outperform drawing graphics using the canvas object.

As an example of what you can do with Sprite3d have a look at the following demo (written by the Sprite3d author). Keep in mind that this is not webGL It uses nothing but CSS and javascript and all the objects are ordinary DIV tags.

Under Smart Mobile Studio, using Sprite3d to rotate a button in 3d-space is as simple as:

FSprite:=TW3Sprite3d.Create(button1);
try
  FSprite.SetTransformOrigin(button1.Width div 2, button1.height div 2);
  FSprite.RotateY(1.5);
  FSprite.RotateZ(-0.5);
  FSprite.Update3d;
finally
  FSprite.free;
end;

The exciting part is that you can apply these transformations to any Smart control. While it is highly doubtful that a spinning edit-box will be of much use in serious business applications, the effects could be leveraged as a means to add life to otherwise static interfaces (options that scale in/out, drop down lists that rotate on close, buttons that move as a response to touch) – and last but not least, it opens up for some interesting multimedia possibilities.

About the author


Jon Lennart Aasenden is a software architect at Optimale Systemer AS. He is currently the lead developer of Smart Mobile Studio and have been a strong supporter of Delphi and object pascal since the beginning. He is also involved in the evangelizing of object pascal in Norway and is by many called “a Delphi fundamentalist” due to his somewhat radical teaching methods. The views of the author is his own and does not reflect the policy of Optimale Systemer AS.

feature sprite3d sprites

Getting ready to rumble

Posted on 22.03.2012 by Jon Lennart Posted in Developers log 1 Comment

We are getting seriously close to a beta here now. Just a couple of more tweaks and some visual goodies and then it’s party time 🙂

Smart Mobile @ 98% complete

Smart Mobile @ 98% complete

I am of-course working overtime in the hope that we can ship the beta before next Friday, just in time for the Pascal game development competition. If you haven’t checked it out yet, visit PGD and have a look!

Debugging smart apps on your mac

Posted on 20.03.2012 by Jon Lennart Posted in Developers log, Documentation

If you happen to own a Mac computer, there is a cool trick i can teach you to make better Smart Mobile applications. It’s also a trick which can benefit native development. In short: the iPhone emulator that ships with Apple’s SDK have many hidden aspects and parameters. One of the most useful is an option to highlight GUI elements that iOS have marked for the GPU. This is a really cool feature and very helpful for both Firemonkey, C#, C++, FreePascal and (drumroll) Javascript apps.

Detecting hardware acceleration

First, make sure the Smart IDE is set to use the built-in server. Now simply load in a project (one of the demos for instance) and execute the application. The server window appears and displays the full URL of your app.

Smart running inside VMWare on a Mac

Smart running inside VMWare on a Mac

Second, go to your Mac and open up a new terminal window. The terminal is more or less what we call a command-line prompt under Windows. On the Mac the terminal is located at “/Applications/Utilities/Terminal”.

In the terminal window punch in the following to start the iPhone emulator with the “magic” setting:

[sourcecode language=”bash”]
CA_COLOR_OPAQUE=1 /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\ Simulator.app/Contents/MacOS/iPhone\ Simulator
[/sourcecode]

Note: The above should be a single line of text. Remove any formatting before pasting it into the terminal.

Punch in the commands and hit enter

Punch in the commands and hit enter

The iPhone emulator should now start up and you will notice that there is a red-tint covering different GUI elements. The elements which have a red tint are those marked for hardware acceleration.

Watching Smart go

Next, click on the safari icon to start Safari Mobile, and when loaded – punch in the URL to your running Smart application. Hit enter and wait for the application to load.

Once your app is safely running inside the iOS emulator, click the shortcut button and select “Add to home screen”. All Smart apps can run in full-screen directly from the iPhone screen – we don’t want to waste 30% of the screen on Safari.

Add the app to the home screen

Everything is HW accelerated here

Now you can start the app directly from the iPhone screen – and you can clearly see which components in your Smart app that uses hardware acceleration. It is also worth noting that elements turn red when they are cached and handled by the GPU. In our case the Buddha below does not turn red until you click the “spin the Buddha” button.

Click the button and hardware rotation takes over

Click the button and hardware rotation takes over

Marking your own controls

If you want to ensure that a custom control (or indeed, any TW3CustomControl descendant) makes use of hardware acceleration, there are two ways of achieving it. Both do the same thing and simply hints to the browser that it needs to cache the element in video memory rather than casual memory:

You can add the following to the control’s CSS:

[sourcecode language=”css”]
-webkit-transform: translateZ(0);
[/sourcecode]

Or, you can set the property directly in your code. Preferably by overriding the StyleTagObject method:

[sourcecode language=”delphi”]
Procedure TMyControl.StyleTagObject;
Begin
inherited;
w3_setStyle(tagRef,’webkitTransform’,’translateZ(0)’);
end;
[/sourcecode]

debugging how-to tips & tricks

Beta1, components and layout

Posted on 18.03.2012 by Smart Mobile Studio Team Posted in News 11 Comments

It’s a been a while since we published anything about Smart Mobile Studio, but that doesn’t mean we have been resting on our laurels. Quite the opposite. We have been busy with the final step of the project – namely the visual designer. We know that people have been waiting for our first beta release – and you will not be disappointed! So while we are tinkering on the final bits, here is a status report of what we have been up to.
Continue reading→

Smart hits the local news

Posted on 27.02.2012 by Smart Mobile Studio Team Posted in News

Last week we had a visitor from a Norwegian newspaper (Østlandsposten) that wanted to know more about Smart Mobile Studio. Today we found a nice surprise in the news – a whole page about Smart. Some of the technical issues have sadly been omitted and the reporter got a couple of things wrong (the paint example below was not made by us but rather donated by Primoz Gabrijelcic). But either way – its always nice to have our effort recognized.

Østlandsposten, monday 27 feb. 2012

Østlandsposten, monday 27 feb. 2012

 

Sincerely

The Smart Mobile Team

Bitmap fonts

Posted on 27.02.2012 by Jon Lennart Posted in Developers log

While we are adding the finished touches to Smart, I thought I could point the finger at a website with loads of bitmap fonts. Bitmap based fonts are important, especially in games, first of all because they add atmosphere – but also since they allow for more processing than ordinary fonts.

Let’s say you want your text to roll over the screen (also known as a “scroll text”) right? If that was all you wanted then you could opt for a normal font. But what if you want the text to follow a nice sinus curve as well? And also be more decorative than a single color typeface? This is where bitmap fonts make it very easy, because you always have full access to it’s pixel buffer. Naturally they don’t scale well, but for games and demos which usually operate with fixed screen sizes they really spice up the final result.

http://bmf.wz.cz/

 

JSBridge getting there

Posted on 21.02.2012 by Jon Lennart Posted in Developers log

It’s been quite a chore but the IDE is now able to extract properties from components. This involves polling data from the RTL into the designer live (only published properties of-course). I still need to transport the values back and forth but that should be fairly easy. Once the bridge is complete the time has come, finally, to render the graphics and thus technological “push” is complete.

Property extraction in place, now for value transport

Property extraction in place, now for value transport

Cant wait to code some knockout demos!

About the author


Jon Lennart Aasenden is a software architect at Optimale Systemer AS. He is currently the lead developer of Smart Mobile Studio and have been a strong supporter of Delphi and object pascal since the beginning. He is also involved in the evangelizing of object pascal in Norway and is by many called “a Delphi fundamentalist” due to his somewhat radical teaching methods. The views of the author is his own and does not reflect the policy of Optimale Systemer AS.

Bling up your apps

Posted on 18.02.2012 by Jon Lennart Posted in Documentation 2 Comments

Today we are going to visit the wonderful world of webkit animations. I’m going to demonstrate how you can use relatively simple CSS animations to bring your application to life. So start up Smart Mobile Studio and let’s get cracking! We begin by creating a brand new visual project. This is because we want to make use of visual controls rather than drawing stuff directly to the screen ourselves. So start by creating clicking on the “New project” button and fill in a suitable name.

Remember to select the right project type

Remember to select the right project type

Editing the CSS is easy

Editing the CSS is easy

Setting up the animation

Next step is to define the actual animation. This requires some knowledge of CSS but to be honest, it’s very easy and you will find tons of examples and pre-defined effects online. To define our animation first double-click on the “app.css” file in the project treeview. The file opens and you can edit the CSS.

Note: if you are having problems understanding CSS or lack the inspiration to come up with something unique – a great place to find ready made snippets to use is over at CSS Tricks. This is an awsome website with examples for pretty much every effect under the sun. So it’s well worth the visit.

So now comes the fun part – namely: what sort of animation do we want to create? Well, when my app starts I want it to load a picture and then quickly fade this picture into view. I also want it to scale from very small to normal size. This effect sort of comes at you out of nowhere, so a fitting name is “in your face”. So let’s define the animation:

@-webkit-keyframes InYourFace {
  0% {
    opacity: 0.1;
    -webkit-transform: scale(0.1);
  }
  100% {
    opacity: 1.0;
    -webkit-transform: scale(1.0);
  }
}

As you can see above the animation is defined in C style, using curly brackets. It has two sections, one called 0% and another called 100%. These two sections basically represent the state of the object from beginning to end. You can also add as many sections as you like, in which case the sections become “key frames” (hence the tagname). How fast the keyframes play out depends on the duration property you set (see sourcecode example below). So in the CSS above we animate both the opacity of the object from barely visible to normal visibility, and also the scale of the object from 0.1 to 1.0 (which is the same as 100%).

Setting up the animation code

Next, we are going to need a picture to play with, so i’ve added a picture to my project (Buddhas_beauty.jpg), just find a picture that you want to play around with and add it to the project. You do this by right-clicking on the resources node in the project treeview, clicking “add resource file” from the pop-up menu.

Next, double-click on the file “form1”, which brings up the object pascal code for your form. This form is automatically created by the IDE for you – so you dont need to write it all yourself. We will be adding an image and an animation player object. We will also override a couple of methods to trigger the animation at the right time. Here is the interface section of our form:

  TForm1=class(TW3form)
  private
   { Private methods }
    FImage:   TW3Image;
    FAnim:    TW3NamedAnimation;
    Procedure HandleImageLoaded(Sender:TObject);
  protected
    { Protected methods }
    Procedure InitializeObject;override;
    Procedure FinalizeObject;override;
    Procedure StyleTagObject;override;
    Procedure ReSize;override;
  end;

In the constructor (InitializeObject) we setup the objects we want to use. This is more or less identical to ordinary Delphi, except for the names of-course which has been obscured to protect the binary otherwise located (that was a joke).

  Procedure TForm1.InitializeObject;
  Begin
    inherited;
    (* setup the image *)
    FImage:=TW3Image.Create(self);
    FImage.Visible:=False;
    FImage.OnLoad:=HandleImageLoaded;
    FImage.LoadFromURL('/res/buddhas_beauty.jpg');

    (* setup the effect for our image *)
    FAnim:=TW3NamedAnimation.Create;

    (* and tell the object the CSS name *)
    FAnim.AnimName:='InYourFace';
  End;

  Procedure TForm1.FinalizeObject;
  Begin
    FImage.free;
    FAnim.free;
    inherited;
  End;

Since Javascript is “non blocking” we have to use events to know when a picture has loaded. So to make it short – that’s when we want to trigger our animation. If we tried it before the image was ready we would get an error (or, depending on the object state, nothing would happen).

  Procedure TForm1.HandleImageLoaded(Sender:TObject);
  Begin
    (* image is loaded, now start the effect & make it visible *)
    FAnim.Duration:=0.2;
    FAnim.Execute(FImage);
    FImage.Visible:=True;
  end;

The rest of the code is fairly self describing, especially if you have been following our other examples. The rules are simple: position your controls in the resize method and set styles in the StyleTagObject method. Some rules can be broken and others bent – but these are the ground rules for the VJL.

  Procedure TForm1.StyleTagObject;
  Begin
    inherited;
    StyleClass:='TW3CustomForm';
  End;

  Procedure TForm1.ReSize;
  Begin
    inherited;
    (* position image *)
    FImage.setBounds(10,10,width-20,height-20);
  end;

Another way to trigger an animation on an object is to go low-level. You can for instance run an animation forever using a simple style call as such:

w3_setStyle(FHeader.TagRef,'-webkit-animation',
'TitleGrow 1s infinite alternate');

The above code will execute an animation called “titlegrow” forever. But ofcourse you lose the high level benefits of a pascal interface and also no event callbacks. But if you just want something to move up and down, or some other transformation – then the above one-liner will do the trick.

The final result

Sadly I cant show you a video of the output, but it works just as expected. The application executes, loads the picture – and when the picture is loaded it scales at you out of nowhere into full size (I later added a label to the top of the display). Click here to download the project

Animations are super easy

Animations are super easy

Here is the same app running in iPad mode. I added some simple resize code to make the font scale with the size of the display. Not bad for less than 5 minutes of coding! Put that in your pipe and smoke it Macromedia 😉

iPad galore, anyone for an e-book?

iPad galore, anyone for an e-book? Click for full size image

animation CSS tutorial

Global rename function

Posted on 17.02.2012 by Jon Lennart Posted in Developers log, News and articles 6 Comments
Global rename done

Global rename done

Being able to rename a unit via the project treeview is commonplace in mid to high range editors today. There are a lot of javascript editors out there, some more evolved than others – but the number of object pascal editors is sadly very limited. You have Delphi of-course which is great (and the most advanced object pascal editor on the marked), then there is Lazarus which is the free and open version written in freepascal – and while there are other alternatives, none of them even comes close to the original “Delphi” look and feel.

Believe it or not but this time Smart Mobile Studio actually got something Delphi doesn’t (Delphi 7 was our initial model): global renaming. When you rename a unit under Smart, it doesn’t just alter the source-code for the unit in question – it alters all references to that unit in the entire project. No need to backtrack and update the uses declaration elsewhere, they are all changed in a single sweep.

We can actually map the use of a class or method throughout a whole project, and it’s super quick as well!

Database mapped RTL

But we have more tricks up our sleeve. I took the time to make a recursive database indexer for our RTL files. So the first time you run Smart it will parse and extract every inch of information about the RTL and store it in a database table. This table is kept in memory and used to speedup extraction of data regarding classes, methods and properties.

It also has the benefit of giving me instant access to things like class ancestors, data types, fields, scope, interfaces and all those tiresome look-up chores that makes a mess of a codebase. So armed with a TClientDataset map (what did you expect? No self respecting Delphi app is complete without at least one instance of TClientDataset) of the RTL, it is now super easy to beef up and compliment the compiler. On top of my head here are a few things i’m gunning for:

  • Complete class at cursor
  • Rename class at cursor
  • Add interface to class
  • Merge classes
  • Support for documentation remarks above methods
  • Mouse-over information about symbols

I doubt we will be able to stuff all the goodies into version 1 of Smart Mobile Studio, but rest assured that I will do my best to get as much features into Smart as I can.

Globals

And now that the indexing and background compile is up to speed, the time has come to finish the globals feature. Globals allows you to edit a list of object (of any class) that should be created automatically by TApplication. Very handy if you have a database connection or some game logic you want to be created on startup.

These are exciting days!

Smart Mobile Studio Upcoming features

Big blue, ancient of days

Posted on 17.02.2012 by Jon Lennart Posted in Developers log 6 Comments

All of life follows a certain pattern. You start out very little, the initial spark if you will, and if you don’t buckle under while learning the ropes – you grow to become large and strong. The duration of your life and the level of strength you can exercise greatly depends on how you manage that strength in context with others. But the fact of life is that the “initial spark” that started the formation cant burn forever. So sooner or later the formation looses its cohesion and voila – the formation breaks up. In human terms we call this breaking up death, in business terms we call it foreclosure, retirement or bankruptcy.

“Demonstrate. I want to see a negative before i provide
you with a positive” -Source: Bladerunner, Tyrell on voigt kampf

I find it very interesting that you can take the same pattern, the “rise, adapt, grow, age and die” formula if you will – and apply it to absolutely everything in the universe. Plants, rocks, animals, planets, solar systems, galaxies, people, companies and even software. Everything that is put together will sooner or later fall apart and re-group. Unless the formation can somehow be maintained over decades and millennia – the proverbial quest for IT immortality.

T.J Watson, IBM

T.J Watson, IBM

Big blue, ancient of days

If you are younger than 30 you probably wont have a clue who “big blue” was. It is the nickname for IBM which remained the IT giant par excellence until as little as 20 years ago. If you think Microsoft is big now, or Apple – IBM was for nearly half a century bigger than both of them. But 20 years ago IBM was already ancient, at least compared to the life expectancy of a modern technology company. Big blue was founded as early as the late 1800’s and was only officially registered in 1911, as a producer of typewriters (among many things).That is quite an achievement. This is a company that was founded while the Victorian empire was still ticking! And that means that the older and more mature IBM investors would remember reading in the colonial paper  – how a Jack the ripper was carving his way through London. Imagine that.

And to make it even more astounding, a study in 2010 showed that IBM still has over 40.000 employees worldwide. That is an absolutely mind blowing fact to contemplate. Yet impressive as it may be, IBM is today completely and utterly out of the loop with regards to personal computing.

From hero to zero in two decades? That demands and explanation.

Meanwhile, in our corner of time

When I grew up in the 70’s and 80’s IBM was still synonymous with personal computers and operative systems. There were other machines of-course, I preferred the Amiga and Atari machines because they were more fun, but for business and offices the IBM personal computer was top-dog. And IBM likewise provided their own operative system, OS/2 warp, which sold like hotcakes for a while, a joint effort with Microsoft actually. But we all know Microsoft stabbed them in the back by launching Windows and quickly ran off with the cash. Over the next decade IBM was forced to fire employees in the bucket-loads and began it’s inevitable drift into IT oblivion.

Eniac, the first programmable numerical device, United States Army, 1943

Eniac, the first programmable numerical device, United States Army, 1943

But what killed IBM as the #1 provider of hardware and software? How could they go from being the inventor of the personal computer, to being completely left out of the equation? Well, to run with our nature analogy — it was the rigormortis of business: namely office culture and bureaucracy. When moving a part from A to B takes 2 weeks and 6 forms, then its game over.

I sincerely hope Microsoft and Apple takes the time to learn from big blue. Not just from it’s mistakes but also from what it got right. Apple and Microsoft is using their patents to utterly cripple the IT industry – which means new and exciting technologies will never see the light of day. Apple got many fans because they were the only true alternative to Microsoft, a classical David vs. Goliath scenario. But sadly Apple is about to become an even bigger bully than Microsoft ever was. I truly hope they wake up.

This is why I love developing new software rather than adapting to existing technology – because when you are on the front lines of thought, there are no patents or standards to worry about. The mind can roam free to find the best solution to a real problem. Linux is looking better by the minute.

The dark side of the force

Lets hope no company ever repeats this mistake

Lets hope no company ever repeats this

But speaking of IBM — they did make some really, really big blunders. You could even go so far as to call it the mother of all blunders, like their strategic alliance with Nazi Germany. But to be frank they were not alone about that one, coca-cola company was likewise in bed with the enemy back then, selling coca-cola to the Americans and fanta to the Nazis.

And if you go back 100 years you will find that American and French companies were doing all sorts of nasty business. Especially towards the native population. And let us not forget the devil himself, the British east Indian company who murdered and extinguished entire civilizations in the name of profit.

But those were thankfully different times. Or were they?

We should have a higher standard of conduct in our age (he said while pointing to the child labour camps in Asia where Apple products are made).

Here is an interesting link:

Apple admits using child slave labour, article from the telegraph
[break]
So what is the final verdict? Well I started by describing a pattern of life so it’s only fitting that we end the article on the same note. And that note has to do with longevity. IBM survived as long as they did because – for the better part of a century they were the good guys. It was only after they started to drive their business purely for the sake of profit, bullying smaller companies and selling their soul to the devil if you like – that the original formation fell apart. As is the case with most large companies that breaks down (and again the law applies to people as well) it was not something outside that caused the downfall, but rather something inside them. Their bureaucracy and bought “high and mightiness” got the better of them in the end. Victims of their own greed to be precise.

About the author


Jon Lennart Aasenden is a software architect at Optimale Systemer AS. He is currently the lead developer of Smart Mobile Studio and have been a strong supporter of Delphi and object pascal since the beginning. He is also involved in the evangelizing of object pascal in Norway and is by many called “a Delphi fundamentalist” due to his somewhat radical teaching methods. The views of the author is his own and does not reflect the policy of Optimale Systemer AS.

Windows 8, Moriarty at it again

Posted on 16.02.2012 by Jon Lennart Posted in Developers log

A lot of people are wondering if Microsoft have lost it’s proverbial marbles in respect to the Windows 8 “metro” formula. The idea of not being able to write desktop applications sounds just to odd to be true. And when it sounds to odd to be true then it usually is. So Watson – put on your best pipe and let’s investigate!

The context

In order to fully grasp the significance of Windows 8 we need the proper context in which to judge it. And the context is as follows: In one hand Microsoft has the worlds most popular operating system. In the other Microsoft holds the most advanced compiler system on the marked. And while juggling these two factors they have for the past decade or so flirted flamboyantly with alternative hardware combinations. It was about time they jumped into bed with one of them, especially now when mobile computing and instant access to data is central to business philosophy.

The metro UI

The metro UI

Now before my fellow Spartans beat me with sticks for entertaining that Microsoft has the worlds best compiler system – im not actually talking about language here (we all know Delphi is the best). Im talking about the fact that with CLR (common language run-time) and the underlying compiler architecture — you can bake your source to byte-codes which in turn can be re-compiled to machine-code.  In other words its portable in abstract form. This means that if Microsoft author large parts of their new operative system in oh say, C#, they have in effect turned Windows into a truly hardware independent operative system. Moving from Intel x86 processors to a system based on a RISC processor would be a relatively simple chore compared to moving 1 gigabyte of hardcoded C/C++ source code.

So this is the context you have to keep in mind when looking at what Microsoft is doing. By being able to run on cheap ARM processors Microsoft has gained remarkable easy access to technology, not just phones and pad – but also a whole universe of embedded systems. Im thinking wall mounted alarm systems, car entertainment systems and even the kitchen fridge. A marked which is currently rampant with Linux clones.

The missing piece of the puzzle

Now running windows on a fridge would be impractical (to say the least) if you had to fiddle around with a keyboard and mouse. But Windows have had support for touch-screens, gestures and virtual keyboards for years now. And this is where the new “metro” UI comes into its proper setting. Now im not saying that Microsoft will do any of this (!) Im simply scetching out that they can. And if Microsoft’s history is anything to go by – they will do whatever they have to.

Apples victory may be short lived

Apples "victory" may be short lived

So this is where the strange, interactive and “boxed” user interface makes perfect sense. Because its not really a desktop like we are used right now. The only logical conclusion is that this is by design and not some desperate attempt to fix what’s not broken. It’s designed to be an interactive “touch” menu which is fun to look at. And that is a minimal requirement if you want to sell something you can wall mount or integrate into your car. Or, perhaps more likely, put inside a television.

Se the pattern? Microsoft moves through the trenches in almost syncronious opposition to Apple. Pads, mobile phones, abstraction from hardware – and you can bet they will have a stab at television as well. The metro UI is the perfect tv menu.

The web based UI

Good move

Good move

Now, no Windows upgrade is complete without robbing Apple blind, and metro is no different. Unless you have been living under a rock you may have noticed that Apple have thrown tons of money into webkit the past couple of years. As a result Apple and Google are now the kings of mobile browsing. And to be perfectly frank – they also rule the desktop waves (albeit Opera and Safari is not far behind). More and more sites demand that you run a webkit browser these days. Both normal users and developers are sick and tired of browser incompatibility, so I wouldn’t be surprised to see webkit winning by brute force.

What is the significance of this? Why simple. Apple and Google have done what Microsoft was sued for doing to Java, namely taken hold of Javascript and married it to their own intellectual ideas. Better known as HTML5. At the same time we see them pushing Dart in the backdoor, the “so called” javascript replacement. But it’s not really a replacement as much as it is leverage. Who do you think owns dart? Cui bono?

So what does Microsoft do? It flanks them by taking hold of javascript and making it the new, de facto language for UI design. It really is a brilliant move by Microsoft and having learned to love javascript – I sincerely hope they blow apple and Google out of the water with this one.

The game is afoot!

And there you have it. While I don’t suspect to find a start-button on my fridge anytime soon, the UI design adopted by Microsoft, their sudden interest in RISC technology and taking javascript under their wing. These are all strategic moves on a chessboard designed to make them top-dog.

And the rumour about not being able to create desktop applications is not actually true (at least not the way people present it). The confusion is because Microsoft have changed the meaning of the word desktop to mean the metro menu. Your native apps will still run but more akin to the old Amiga where each application had it’s own full-screen view. Microsoft is not in the business of committing suicide.

[break]

About the author


Jon Lennart Aasenden is a software architect at Optimale Systemer AS. He is currently the lead developer of Smart Mobile Studio and have been a strong supporter of Delphi and object pascal since the beginning. He is also involved in the evangelizing of object pascal in Norway and is by many called “a Delphi fundamentalist” due to his somewhat radical teaching methods. The views of the author is his own and does not reflect the policy of Optimale Systemer AS.

Gearing up for final alpha

Posted on 15.02.2012 by Smart Mobile Studio Team Posted in Developers log

As we approach the final alpha release of Smart Mobile Studio and entering the beta stage, the IDE is really starting to feel more and more like Delphi. It truly is the attention to little things that makes an IDE work in real life – and Smart Mobile Studio is no different. So what can you expect to find in the upcoming versions?

Automated editing

No place like home, the Smart IDE in action

No place like home, the Smart IDE in action (blue skin optional)

Basic IDE functionality includes the ability for the environment to alter your source-code. To poll this off the IDE must know things like where does the “unit” keyword appear in a source-file? It must also tell the difference between the interface and implementation section of a unit and other important things like where in your code a class is defined.

We are happy to say that this functionality is now under wraps. So when you rename a unit from the project tree view, the source-code is altered accordingly. But of-course this type of functionality has a lot more going for it – because it forms the foundation on which the layout designer rests. The designer must by its nature have access to the source-code and it must also be able to add, alter and remove sections of a unit.

And we are going to alter the “form designer” formula slightly, with less mess and less data in the final compiled application. You will just have to wait and see how cool it is.

Better browsing

The browser window has also seen a radical change. We used to limit the view to iPhone only but have now removed the iPhone background and opted for several sizes. So now you can check how your app will look on your iPad, your webkit browser (any size) and various other standard measurements.

Components and packages

In version 1 there will be no support for individual source packages, but we have designed a system that will make it very simple to get your own components into the design-cycle. The IDE will have a normal ini file where you can register components. To install a new component or a series of components, just add a new section to the ini-file, register each component (syntax pending) and copy the unit(s) to the library folder. Then go to the Tools menu and click “Rebuild RTL index”.

Faster class browser

The previous class browser parsed and scanned each unit on startup which caused a noticeable delay. The new class browser will extract it’s information from the RTL index which is basically a database table covering ever aspect of the registered RTL units and libraries. The final outcome will be super-quick and allow for click-able links. So if you click on an ancestor class, it will instantly browse to that class. Very handy and more natural. You can also go directly to the RTL source-code and check out the implementation.

 

Sincerely

The Smart Mobile Team

Upcoming features

Pages

  • About
  • Feature Matrix
  • Forums
  • News
  • Release History
  • Download
  • Showcases
    • The Smart Contest 2013, Round 1 – Graphics
  • Store
  • Documentation
    • Creating your own controls
    • Debugging, exceptions and error handling
    • Differences between Delphi and Smart
    • Get the book
    • Getting started
      • Introduction
      • Local storage, session storage and global storage
      • Application architecture
      • The application object
      • Forms and navigation
      • Message dialogs
      • pmSmart Box Model
      • Themes and styles
    • Layout manager
    • Networking
      • Loading files
      • TW3HttpRequest
      • TW3JSONP
    • Prerequisites
    • Real data, talking to sqLite
    • System requirements
    • Project types
      • Visual project
      • Game project
      • Console project

Archives

  • December 2019
  • December 2018
  • November 2018
  • July 2018
  • June 2018
  • February 2018
  • September 2017
  • April 2017
  • November 2016
  • October 2016
  • September 2016
  • April 2016
  • March 2016
  • January 2016
  • October 2015
  • September 2015
  • July 2015
  • April 2015
  • January 2015
  • December 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • November 2011
  • October 2011
  • September 2011

Categories

  • Announcements (25)
  • Developers log (119)
  • Documentation (26)
  • News (104)
  • News and articles (16)

WordPress

  • Register
  • Log in
  • WordPress

Subscribe

  • Entries (RSS)
  • Comments (RSS)
  • Prev
  • 1
  • …
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • Next
© Optimale Systemer AS