Jump to content


Photo

Hard time learning Graphics from demos with Basic version

graphics demos canvas formless

  • Please log in to reply
7 replies to this topic

#1 piXelicidio

piXelicidio
  • Members
  • 6 posts

Posted 11 March 2015 - 06:05 AM

Hi, newcomer here ;)

 

I'm new to SMS, a guy from the old times of Delphi  7 with almost zero knowledge of java-script. 

 

My problem is that I'm using Basic verison and most demos are using Forms with controls.

 

Is there another version of Spartacus demo or similar sprite demo without froms? Canvas only?

Would be too hard to convert Spartacus demo to canvas only?

 

Regards,

Denys.


  • Ekbergket, RudyAttemia, Danielfem and 5 others like this

Regards,

Denys


#2 Jørn E. Angeltveit

Jørn E. Angeltveit
  • Administrators
  • 297 posts
  • LocationNorway

Posted 11 March 2015 - 02:22 PM

Good question!

 

 

First of all:

You are able to work with "form projects" in the basic edition, but you'd need to create all elements runtime (since you don't have the visual designer).

If you're experienced with architectural patterns like MVVM, MVP and MVC, you might consider this to be a good thing.

 

And I agree:  We should really create some visual-components demos for the basic edition.

We have basically had game development, canvas-development, node.js, espruino, etc in mind for this edition.

I'll see if we can publish something on this topic.

 

 

The "sprite" library in the "Spartacus" demo is designed to work with DOM-elements, and thus not suitable for canvas projects.

(http://smartmobilest...erted-to-smart/)

This project should not have been categorised under "Canvas".

 

 

 

If you take a look at the demos from the contest we ran a couple of years ago, you will find a few nice examples.

The source for these are in the demos folder too.

(http://smartmobilest...tcontest2013-1/)

 

 

Under "Canvas" and "Games" you will also find a few demos with generic sprite management.

Eg. Missile Command (Nicle Iron).

 

Take also a look at this "tutorial" on how you can get sprites to work with the Box2d library:

http://stackoverflow...t-mobile-studio

 

 

Some blog posts on sprites (and tile maps):

http://smartmobilest...e-sprite-sheet/

http://smartmobilest...ramming-part-1/

http://smartmobilest...raphics-part-3/



#3 piXelicidio

piXelicidio
  • Members
  • 6 posts

Posted 11 March 2015 - 08:05 PM

Hi, thanks.

 

 Sincerely I'm not familiar with architectural patterns you mentioned, at least not consciously :) My typical application with Delphi almost used no more than a few components. Main form, buttons for testing, maybe a demo for logs, and lot of back-buffers work and finally show to canvas... So basically I don't really need the visual designer too much, then I think the basic edition is perfect for me. And for the programming part... I do my best effort to make acceptable OOP.

 

 

Yes, more demos for Basic edition would be good. Also IMO the learning path should focus more on Basic edition.

 

I'll keep going...

 

Regards.


Regards,

Denys


#4 Cipher Diaz

Cipher Diaz
  • Administrators
  • 313 posts

Posted 12 March 2015 - 12:20 AM

Hi!

 

Spartacus would easily be converted to canvas, but you would have to write to the pixelbuffer directly, which under JS can be slow if you dont know your way around array-buffers (untyped memory allocations) and UInt8Array pointers (which you connect to the buffer as a writer-channel).

 

The first thing you should do is to google "HTML5 Canvas tutorial" and start learning how the canvas works.

Next, CTRL+Click is your friend in the IDE. In a canvas app, inspect the RTL code while you are studying the HTML5 canvas tutorial (there are hundreds) - you will soon begin to understand how our wrapper works, and that it makes it easier by giving HTML5 and the DOM a "pascal face".

 

Finally, look up how to load files in SMS (see the website under documentation).

Essentially loading an image is super-easy:

 

//create an image object

var mImage:=TW3Image.Create(NIL);

 

//install an event handler (anonymous procedure here, you can define it elsewhere if you like)

mImage.OnLoad:=procedure (sender:TObject)

  Begin

    //image is ready and loaded here!

  end;

 

// trigger the load. The onReady event will fire when it's loaded

mImage.FromURL("/res/myimage.png");

 

With the image loaded, you can draw it using PutImage etc.. in the canvas.

 

To get the pixelbuffer for an image, that's a bit more tricky. There is a rule that you cant get the RGBA info directly from the image, only from a canvas.

So to get the data we want to draw the image to a canvas, then extract a "sprite" like buffer, like this:

 

function TGetImageData(Image:THandle): TW3ImageData;
var
  mContext: TW3GraphicContext;
  mCanvas:  TW3Canvas;
begin
  if  (Image) then
  begin
    mContext := TW3GraphicContext.Create(Null);
    try
      mContext.Allocate(image.naturalWidth,image.naturalHeight);
      mCanvas := TW3Canvas.Create(mContext);
      try
        mCanvas.DrawImageF(Image,0,0);
        Result := mCanvas.ToImageData;
      finally
        mCanvas.Free;
      end;
    finally
      mContext.Free;
    end;
  end;
end;

 

The above code takes the handle of an image (like w3image1.handle), draws it to a canvas and then returns a TW3ImageData instance.

Through this new object you can access the RGBA pixel values.

 

Once you have modified the pixels, simply draw it to your canvas again (in a canvas application) using putImage etc..

 

This is basically how you would go about creating graphics demos. Loading in the images, drawing them directly -- or, if you want to play around with the pixels, pertaining to TW3ImageData and then copying (blitting) it onto the display canvas.

 

The reason Spartacus uses DIV elements and ordinary HTML objects, is because this gives you access to the GPU.

CSS3 is GPU powered and this is how we can rotate, move and push elements around quickly -- much faster than canvas (!)

 

Well -- hope it helps!

 

Note: Smart Mobile Studio forces you to write more -- but the code you write is much smaller than C#, visual basic and even Delphi for the same tasks.

And the benefit is that the code runs everywhere there is a modern browser :)

 

Buy a good book on javascript and canvas game coding and you should have everything you need to create kick ass demo's and games. Once you understand how much the poor JS coders have to go through just to get a pixel on the screen, you will appreciate the power of Smart Pascal so much more :)

 

 

 

 

Hi, thanks.

 

 Sincerely I'm not familiar with architectural patterns you mentioned, at least not consciously :) My typical application with Delphi almost used no more than a few components. Main form, buttons for testing, maybe a demo for logs, and lot of back-buffers work and finally show to canvas... So basically I don't really need the visual designer too much, then I think the basic edition is perfect for me. And for the programming part... I do my best effort to make acceptable OOP.

 

 

Yes, more demos for Basic edition would be good. Also IMO the learning path should focus more on Basic edition.

 

I'll keep going...

 

Regards.



#5 piXelicidio

piXelicidio
  • Members
  • 6 posts

Posted 12 March 2015 - 04:41 PM

Hi Cipher, 

 

Thank you very much for your extended reply! :D

 

 

I'm starting reading about HTML5 tutorials, I also need know what I should understand about the DOM from SMS.

 

Loading and image, you readed my mind, that's one of the first things I was looking. Also how to read any text file or binary file if possible; if I can host everything statically like copying all the files in a folder on my hosting or I need to do something in the server side? (That will scare me :-o ) 

 

My plans are keep inside SMS as much as possible with your units wrappers, If I can avoid dealing with CSS thingies better.

 

About the power of SMS; yesterday I saw a presentation from Mozilla the Canvas and at the end they listed what should be the future of HTML5, and one of the points was: OOP, then I though: "ha! good! I already have SMS" ;)

 

I'll let you know about my progress,

 

Let's see if I can port/rework my Delphi 6 Ant Colony Simulation --> (  )

 

regards,

Denys


  • Jørn E. Angeltveit likes this

Regards,

Denys


#6 Jørn E. Angeltveit

Jørn E. Angeltveit
  • Administrators
  • 297 posts
  • LocationNorway

Posted 13 March 2015 - 11:16 AM

Nice.  That would be cool.

 

I believe I saw this simulation a while ago while searching for alternative "Game of life" visualisations, and I thought that this would be cool to run under Smart.

 

 

We already have a "Game of life" demo in the demo folder, but this is based on a visual components project (praced under "Forms & Components".

I'm sure you can find some inspiration in that demo anyway.

 

Live demo: http://showcases.sma...me of Life/www/

 

Add some black squares and hit "Play" button on upper right.

(On a tablet you will find a menu on the left as well.  It seems like this only works for touch and not mouse click).


  • piXelicidio likes this

#7 piXelicidio

piXelicidio
  • Members
  • 6 posts

Posted 20 March 2015 - 06:45 PM

Hi again, 

That game of life is cool, thanks.

 

Two subjects I can't find detailed info on the blogs and docs:

 

About Game Loop:

 

I all the examples I have seen everything is done inside the PaintView. Then my question is if there is not separation between the "FrameTick" and "DrawTick".  The Game project template call PaintView from the method TW3CustomGameApplication.HandlePaintEvent(Sender: TObject; Canvas: TW3Canvas); Then was trying to find another method that should be called each time the Game timer is triggered, before drawing.

 

Please, I understand this is not stopping me for making a graphics game or simulation, doing everything inside PaintView is ok. I just want to understand how things should be done with SMS and if there a possibility to make it better. 

 

For example when working with Delphi i get used to use OnIdle event. Then from there I called my "NextTick" and "DrawTick". NextTick was responsible for all the logic of the game, movement and decisions. While DrawTick just draw the current state of all elements. In some cases I could experiment with other Game Loop algorithms where I could call NextTick asynchronously to DrawTick, or just call NextTick twice and DrawTick once... Or for some reason the application needs to redraw the screen immediately and just call DrawTick how many times needed. 

 

Currently what I think I understand here is that the PaintEvent is something handled by the control parent class, and forced to be called by some timer in the GameView... then How I know if for some reason the PaintEvent is called but it was not originated by the gameview timer event? if this is possible?

 

If you think I'm over-complicating things please tell me that everything will be ok: "piX, do everything inside the PaintView and do not worry so much"  :D

 

 

About backbuffers:

 

Is there a Backbuffer already implemented with the GameApplication and GameView?? (please, tell me yes  :rolleyes: ) Or I have to implement it by myself with some TW3BufferedImage or offline canvas I have read about it somewhere?

 

My intentions are to use as much as possible SMS only,  the framework you have done, avoiding JavaScript, that's why I'm here as new user, because I don't want to learn&code HTML5/JavaScript. I want to use ObjectPascal all time, and if I made a game will be limited by that philosophy. 

 

Regards,

Denys...

 

PS: Oops... I think I should have created another thread for these new questions....  ^_^


Regards,

Denys


#8 piXelicidio

piXelicidio
  • Members
  • 6 posts

Posted 21 March 2015 - 09:33 PM

Well, you can now change this thread title form "hard time" to "interesting time".  B)

 

With this test i'm satisfied and motivated for continuing my journal with  SMS:

 

3000 animated sprites of 128x128 (png) 

 

 

 

At fullscreen 1920x1024 on my PC the FPS fluctuate from 50-70 with Chrome while with Firefox the keeps stable at ~70fps. 

 

:D


Regards,

Denys






Also tagged with one or more of these keywords: graphics, demos, canvas, formless

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users