Author Topic: Z Project - universal screen size scaling system  (Read 30030 times)

Offline ampos

  • Prof. Inline
  • *****
  • Posts: 1592
    • View Profile
    • AMpostata Website
Z Proyect uses ployvector for all his drawing, that should be faster than "normal" sprite draws.

Also, some Android devices could not use "create screen"
check my web and/or my blog :D
http://diniplay.blogspot.com (devblog)
http://www.ampostata.org
http://ampostata.blogspot.com
I own PC-Win, MacBook 13", iPhone 3G/3GS/4G and iPAC-WinCE

sionco

  • Guest
I'm not sure how to get this working,

I've pasted this, in a new source file in the project, 
Code: GLBasic [Select]
// --------------------------------- //
// Project: ProjectoZ
// Start: Tuesday, October 25, 2011
// IDE Version: 10.118

GLOBAL x_offset,y_offset                //offset to add to X&Y to display correctly
GLOBAL x_res,y_res                              //X&Y real screen size
GLOBAL x_zoom,y_zoom                    //zoom to scale sprites and so
GLOBAL x_orig=768,y_orig=1024   //the screen size our app is designed for
GLOBAL single_sheet=0                   //1 IF all sprites in a single sheet

FUNCTION initZ: keep_ratio=0
        LOCAL z

        GETSCREENSIZE x_res,y_res

        x_zoom=x_res/x_orig
        y_zoom=y_res/y_orig

        IF keep_ratio<>0
                z=MIN(x_zoom,y_zoom)
                x_zoom=z
                y_zoom=z
                x_offset=(x_res-(x_orig*x_zoom))/2
                y_offset=(y_res-(y_orig*y_zoom))/2
                IF x_offset<1 THEN x_offset=0
                IF y_offset<1 THEN y_offset=0

        ENDIF

        init_SC()

ENDFUNCTION

FUNCTION z_drawsprite: num%,x%,y%,color=0xFFFFFF
        LOCAL sx,sy,x1,y1,x2,y2

        GETSPRITESIZE num,sx,sy

        x1=x_offset+(x*x_zoom)
        x2=sx*x_zoom
        y1=y_offset+(y*y_zoom)
        y2=sy*y_zoom

//      STRETCHSPRITE num,x1,y1,x2,y2

        STARTPOLY num
        POLYVECTOR x1,y1,0,0,color
        POLYVECTOR x1,y1+y2,0,sy,color
        POLYVECTOR x1+x2,y1+y2,sx,sy,color
        POLYVECTOR x1+x2,y1,sx,0,color
        ENDPOLY

ENDFUNCTION

FUNCTION z_drawanim: num%,frame%,x%,y%,w%,h%,color=0xFFFFFF
        LOCAL sx,sy,x1,y1,x2,y2,ancho,alto,xa,ya

        GETSPRITESIZE num,sx,sy

        x1=x_offset+(x*x_zoom)
        x2=w*x_zoom
        y1=y_offset+(y*y_zoom)
        y2=h*y_zoom

        ancho=sx/w;alto=sy/h
        ya=INTEGER(frame/ancho)*h
        xa=MOD(frame,ancho)*w

//      STRETCHANIM num,frame,x1,y1,x2,y2

        IF single_sheet=0 THEN STARTPOLY num
        POLYVECTOR x1,y1,xa,ya,color                    //TL
        POLYVECTOR x1,y1+y2,xa,ya+h,color               //BL
        POLYVECTOR x1+x2,y1+y2,xa+w,ya+h,color  //
        POLYVECTOR x1+x2,y1,xa+w,ya,color
        IF single_sheet=0
                ENDPOLY
        ELSE
                POLYNEWSTRIP
        ENDIF
ENDFUNCTION

FUNCTION z_rotozoomanim: num%,frame%,x%,y%,w%,h%,ang,size,color=0xFFFFFF
        LOCAL sx,sy,x1,y1,x2,y2,ancho,alto,xa,ya,x3,x4,y3,y4,xcos,ysin,xs,ys,sw,sh

        GETSPRITESIZE num,sx,sy
        sw=w;sh=h

        x=x_offset+(x*x_zoom)-(((w*size)-w)/2)
        w=w*x_zoom*size
        y=y_offset+(y*y_zoom)-(((h*size)-h)/2)
        h=h*y_zoom*size
        INC x2,x1;INC y2,y1

        ancho=sx/sw;alto=sy/sh
        ya=INTEGER(frame/ancho)*sh
        xa=MOD(frame,ancho)*sw

                h=h/2
                w=w/2
                INC x,w
                INC y,h

                x1 = x
                y1 = y
                x2 = x
                y2 = (y + h)
                x3 = (x + w)
                y3 = y
                x4 = (x + w)
                y4 = (y + h)

                xcos = tCOS(ang)
                ysin = tSIN(ang)

                x1 = x - (xcos * w) - (ysin * h)
                y1 = y - (xcos * h) + (ysin * w)

                x2 = x - (xcos * w) + (ysin * h)
                y2 = y + (xcos * h) + (ysin * w)

                x3 = x + (xcos * w) - (ysin * h)
                y3 = y - (xcos * h) - (ysin * w)

                x4 = x + (xcos * w) + (ysin * h)
                y4 = y + (xcos * h) - (ysin * w)

                SELECT single_sheet
                        CASE 0
                                STARTPOLY num
                                        POLYVECTOR x1, y1, xa, ya,color                         //TL
                                        POLYVECTOR x2, y2, xa, ya + sh,color            //BL
                                        POLYVECTOR x4, y4, xa + sw, ya + sh,color       //BR
                                        POLYVECTOR x3, y3, xa + sw, ya,color            //TR
                                ENDPOLY
                        CASE 1
                                POLYVECTOR x2, y2, xa, ya + sh,color            //BL
                                POLYVECTOR x1, y1, xa, ya,color                         //TL
                                POLYVECTOR x4, y4, xa + sw, ya + sh,color       //BR
                                POLYVECTOR x3, y3, xa + sw, ya,color            //TR
                                POLYNEWSTRIP
                ENDSELECT

ENDFUNCTION

FUNCTION z_print: t$,x,y,font=100,centered=1,zoom=1,color=0xFFFFFF,underline=0,italic=0
        LOCAL fx,fy,l,c$,tx,ty,dx,dy,fxz,fyz,t1,t2,t3,t4,tl
        LOCAL line_width=2              //width of the underline line in pixels at zoom 1 (100%)
        LOCAL outline=2                 //width of the outline in underline in pixels at zoom 1 (100%)
        LOCAL und_pos=.9                //vertical position of underline (in % of Font Y size)
        LOCAL ital_ang=.5               //inclination of font (in % of font X size)

        GETSPRITESIZE font,fx,fy
        fx=fx/16;fy=fy/16                       //change to fy/8 if you dont use full charset fonts
        fxz=fx*zoom*x_zoom;fyz=fy*zoom*y_zoom
        tl=LEN(t$,1)*zoom*x_zoom

        x=x_offset+(x*x_zoom)
        y=y_offset+(y*y_zoom)

        DEC x,(LEN(t$,1)*zoom*centered*x_zoom)/2

        IF underline=1  
                t1=line_width*(zoom*y_zoom);IF t1<1 THEN t1=1
                t2=fxz/4
                t3=fyz*und_pos
                t4=outline*(zoom*x_zoom);IF t4<1 THEN t4=1

                STARTPOLY   //this can be changed with a call to z_drawline...
                POLYVECTOR x-t2-t4,y+t3-t4,0,0,0
                POLYVECTOR x-t2-t4,y+t3+t1+t4,0,0,0
                POLYVECTOR x+t2+tl+t4,y+t3+t1+t4,0,0,0
                POLYVECTOR x+t2+tl+t4,y+t3-t4,0,0,0
                ENDPOLY

                STARTPOLY
                POLYVECTOR x-t2,y+t3,0,0,color
                POLYVECTOR x-t2,y+t3+t1,0,0,color
                POLYVECTOR x+t2+tl,y+t3+t1,0,0,color
                POLYVECTOR x+t2+tl,y+t3,0,0,color
                ENDPOLY

        ENDIF

    italic=italic*zoom*fx*ital_ang*x_zoom
        STARTPOLY font,2
        FOR n=0 TO LEN(t$)-1
                c$=MID$(t$,n,1)
                l=ASC(c$)

                ty=ASR(l,4)
                tx=INTEGER(MOD(l,ty*16))
                dx=tx*fx
                dy=ty*fy

                POLYVECTOR x,y+fyz,dx,dy+fy,color                       //BL
                POLYVECTOR x+italic,y,dx,dy+1,color                     //TL
                POLYVECTOR x+fxz,y+fyz,dx+fx,dy+fy,color        //BR
                POLYVECTOR x+fxz+italic,y,dx+fx,dy+1,color      //TR
                POLYNEWSTRIP
                INC x,LEN(c$,1)*zoom*x_zoom
        NEXT
        ENDPOLY
ENDFUNCTION

FUNCTION z_drawline: x1,y1,x2,y2,color=0xFFFFFF,width=1
        LOCAL w=(x2-x1)*x_zoom
        LOCAL h=(y2-y1)*y_zoom

        x1=x_offset+(x1*x_zoom)
        y1=y_offset+(y1*y_zoom)
        x2=x_offset+(x2*x_zoom)
        y2=y_offset+(y2*y_zoom)

        width=width*x_zoom
        glLineWidth (width)
        DRAWLINE x1,y1,x2,y2,color
        glLineWidth(1)

//      STARTPOLY
//      POLYVECTOR x1,y1,0,0,color
//      POLYVECTOR x1+w,y1+h,0,0,color
//      POLYVECTOR x1+w+1,y1+1+h,0,0,color
//      POLYVECTOR x1+1,y1+1,0,0,color
//      ENDPOLY

ENDFUNCTION

FUNCTION z_drawrect: x,y,w,h,color=0xFFFFFF

        x=x_offset+(x*x_zoom)
        y=y_offset+(y*y_zoom)
        w=w*x_zoom
        h=h*y_zoom

        STARTPOLY
        POLYVECTOR x,y,0,0,color
        POLYVECTOR x,y+h,0,0,color
        POLYVECTOR x+w,y+h,0,0,color
        POLYVECTOR x+w,y,0,0,color
        ENDPOLY

ENDFUNCTION

INLINE
#define OGL                             ::
typedef float           GLfloat;
ENDINLINE

INLINE
} extern "C" { void __stdcall glLineWidth( GLfloat width );; }; namespace __GLBASIC__ {
ENDINLINE
FUNCTION glLineWidth: width
        INLINE
                OGL glLineWidth(width);
        ENDINLINE
ENDFUNCTION


INLINE
        }       //  + + + A T T E N T I O N + + +
                // int __a__ needs to be a n^2 value.
                // Higher values give better precision
                // but larger lookup tables as well!

                const unsigned int __a__ = 131072 ;
                const DGInt __b__ = (360.0 / __a__) ;
                const unsigned int __c__ = (__a__ - 1) ;
                DGInt _sin_tbl_[__c__] ;
                DGInt _cos_tbl_[__c__] ;
                const DGInt __d__ = (1 / __b__);
        namespace __GLBASIC__ {
ENDINLINE

FUNCTION init_SC:
        INLINE
                for(int i=0; i < __c__; ++i)
                {
                        _sin_tbl_[i] = SIN( i * __b__ ) ;
                        _cos_tbl_[i] = COS( i * __b__ ) ;
                }
        ENDINLINE
ENDFUNCTION // INIT_SIN_COS_TABLES

// ------------------------------------------------------------- //
// ---  TCOS  ---
// ------------------------------------------------------------- //
FUNCTION tCOS: x        // in degrees
        INLINE
                return _cos_tbl_[ (int)(x * __d__) & __c__ ] ;
        ENDINLINE
ENDFUNCTION // TCOS



// ------------------------------------------------------------- //
// ---  TSIN  ---
// ------------------------------------------------------------- //
FUNCTION tSIN: x  // in degrees
        INLINE
                return _sin_tbl_[ (int)(x * __d__) & __c__ ] ;
        ENDINLINE
ENDFUNCTION // TSIN




 
 

I have an image called player.png, could anyone give me a simple basic program showing how to use this to draw the sprite to the screen. I've tried, but can't get my head around it.

Offline ampos

  • Prof. Inline
  • *****
  • Posts: 1592
    • View Profile
    • AMpostata Website
Code: GLBasic [Select]
initz()
loadsprite "player.png",1
z_drawsprite (1,my_x,my_y)
showscreen
keywait
 

It should work.
check my web and/or my blog :D
http://diniplay.blogspot.com (devblog)
http://www.ampostata.org
http://ampostata.blogspot.com
I own PC-Win, MacBook 13", iPhone 3G/3GS/4G and iPAC-WinCE

sionco

  • Guest
Thank you! that's some great work you've done!
Plays well on my pad and smaller mobile phone

Offline r0ber7

  • Dr. Type
  • ****
  • Posts: 477
    • View Profile
This is perfect. I was thinking of doing the same thing, and now I find it has been done before. I'd like a zoom function in my game. Your work saves me a lot of work.   :good:

Offline ampos

  • Prof. Inline
  • *****
  • Posts: 1592
    • View Profile
    • AMpostata Website
That's the idea  =D
check my web and/or my blog :D
http://diniplay.blogspot.com (devblog)
http://www.ampostata.org
http://ampostata.blogspot.com
I own PC-Win, MacBook 13", iPhone 3G/3GS/4G and iPAC-WinCE

sionco

  • Guest
Hi,

I´m having problems with using the mouse when the screen has been scaled down smaller on my android phone,  the phone is in landscape.   When I run the program and click a part of the screen a little sprite appears there, this works great running from the pc.  but on the android phone, it looks like the mouse hasn´t scaled correctly and the sprite appears much more towards the left of where
I´ve clicked and up. 
I´m using standard code:

Code: GLBasic [Select]

MOUSESTATE mx, my, b1, b2

if b1
   bombX = mx
   bombY = my
   z_drawanim(30,0,bombX,bombY,32,32)
 

sionco

  • Guest
ps, it´s definetly the scaling, because if I use drawanim 30,0,bombX,bombY,  it draws it in the place it´s meant to be.

Offline ampos

  • Prof. Inline
  • *****
  • Posts: 1592
    • View Profile
    • AMpostata Website
The mouse coordinates are not scaled.

The game screen is rendered at 1024x768, but the display (and the mouse coordinates) are, in iphone 3G, 480x320.

The code to read mouse should be something like

Code: GLBasic [Select]
mousestate mx, my, b1,b2
mx=(mx/x_zoom)-x_offset
my=(my/y_zoom)-y_offset
 

(ps: I have not tested this, just typing on the fly, perhaps it is mx*x_zoom).

If you want to check mouse/screen clicks to elements, consider use my other lib, ZONES(), that has a CREATEZONE_RELATIVE that creates zones relatives to target screen size using absolute coordinates.
check my web and/or my blog :D
http://diniplay.blogspot.com (devblog)
http://www.ampostata.org
http://ampostata.blogspot.com
I own PC-Win, MacBook 13", iPhone 3G/3GS/4G and iPAC-WinCE

sionco

  • Guest
Thanks, it worked perfectly

Offline mrplant

  • Mr. Polyvector
  • ***
  • Posts: 232
    • View Profile
Ampos - I am doing some testing here - is there an older version of Z_Print floating about that does not use PolyVectors??

Can't seem to find it but sure I read it somewhere...


Offline ampos

  • Prof. Inline
  • *****
  • Posts: 1592
    • View Profile
    • AMpostata Website
No, there is a single/alone z_print function on another post, but it also uses polyvectors, as it is "necesary" to have zoomed print.

Why do not want to use polyvectors?
check my web and/or my blog :D
http://diniplay.blogspot.com (devblog)
http://www.ampostata.org
http://ampostata.blogspot.com
I own PC-Win, MacBook 13", iPhone 3G/3GS/4G and iPAC-WinCE

Offline mrplant

  • Mr. Polyvector
  • ***
  • Posts: 232
    • View Profile
I am having a small problem with them - when I rescale the graphics there is the faintest of faintest lines around the outer edges of some graphics - when I replace the commands with STRETCHSPRITE instead - it is slower but doesn't have the problem..
This rears its ugly head when I am rescaling from the native resolution of my app 1024x768 up to say my 27" Mac screen of 2560x1440 or on the iPad3. It also occurs when downscaling to 960x480 for the iPhone 4s but is harder to see - text shows it up quite clearly.
I was using Scalesprite to identify what was causing the problem..
If I recompile using Scalesprite the problem does not occur.


   STRETCHSPRITE SpriteNum,X1,Y1,X2,Y2

//   STARTPOLY SpriteNum
//   POLYVECTOR X1,Y1,0,0,0xFFFFFF
//   POLYVECTOR X1,Y1+Y2,0,SY,0xFFFFFF
//   POLYVECTOR X1+X2,Y1+Y2,SX,SY,0xFFFFFF
//   POLYVECTOR X1+X2,Y1,SX,0,0xFFFFFF
//   ENDPOLY

If you take a look at the screenshots attached (and click to expand them) - Scale Graphics.png was taken running my app designed for 1024x768 - running on my iMac - see the file - it looks fine.
now compare that with the output I get replacing Stretchsprite with Polyvector commands above - see file PV Graphics.png - see the faint lines around graphics that aren't in the other version?
The PV text shows how my text is looking.

I am trying to figure out what the cause is as, as I say - it appears when downscaling or upscaling..
Could it just be rounding errors or something?

It is entirely reproducible here and is not limited to say just macs as I have written my code to conditionally compile  for Windows, Mac, iPhone and iPad  - only on the iPad running at native 1024x768 that I designed my graphics at does it look pixel perfect. All other resolutions have this feint line around the graphics ... Very strange..

It is more noticeable on the iPad 3 which is why I was testing using Stretchsprite - which solved the problem...

Would really like to use Polyvectors of course..

stumped.

[attachment deleted by admin]
« Last Edit: 2012-Mar-18 by mrplant »

Offline mrplant

  • Mr. Polyvector
  • ***
  • Posts: 232
    • View Profile
Here is that man - extreme zoomed in using Photoshop to show clearly the unwanted lines alone the top and left side. The graphic itself is clean as you can see from one of my original screenshots.

SMOOTHSHADING TRUE OR FALSE makes no difference by the way. My graphics are all tile based 64x64 pixel sprites with no alpha channel png files. Either black and white or colour.

[attachment deleted by admin]
« Last Edit: 2012-Mar-18 by mrplant »

Offline Ian Price

  • Administrator
  • Prof. Inline
  • *******
  • Posts: 4115
  • On the shoulders of giants.
    • View Profile
    • My Apps
Make sure you are using SMOOTHSHADING FALSE before applying the scaling. That should help.
I came. I saw. I played.