Z Project - universal screen size scaling system

[ampos]

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"

[sionco]

I'm not sure how to get this working,

I've pasted this, in a new source file in the project, 

Code (glbasic) Select Expand


// --------------------------------- //
// 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.

[ampos]

Code (glbasic) Select Expand

initz()
loadsprite "player.png",1
z_drawsprite (1,my_x,my_y)
showscreen
keywait


It should work.

[sionco]

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

[r0ber7]

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.   

[ampos]

That's the idea 

[sionco]

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 Expand



MOUSESTATE mx, my, b1, b2

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


[sionco]

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.

[ampos]

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 Expand

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.

[sionco]

Thanks, it worked perfectly

[mrplant]

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...

[ampos]

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?

[mrplant]

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]

[mrplant]

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]

[Ian Price]

Make sure you are using SMOOTHSHADING FALSE before applying the scaling. That should help.