Облака, тучи и небо.
Облака будут как наборы эллипсов, вытянутых по горизонтали. Если внутри каждого тайла их можно разложить случайно, то на стыках тайлов нужно иметь одинаковые связующие эллипсы, чтоб тайлы стыковались друг с другом в любых комбинациях.
В Scriptaint записываем скрипт, раскладываем кружки первого кадра. В секциях //linkver и //linkhor связующие облака между тайлами. Элементы горизонтальных и вертикальных линий рамки (//0left, //1left, //2left и //0top, //1top, //2top) сделаем как одинаковые тайлы.
Анимация облаков - их сдвиги по горизонтали и вертикали на 0 или 1/-1 пиксель либо вытягивание облаков (увеличение по горизонтали и уменьшение по вертикали или, наоборот, уменьшение по горизонтали и увеличение по вертикали).
Под низ для контроля вылезания облаков за границы тайлов положим картинку с сеткой (3g.bmp).
Java-скрипт для Scriptaint, рисующий жестко заданный первый кадр и случайные кадры 2-4, получился такой:
Код: Выделить всё
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<div id="content">
<script type="text/javascript">
function _fillrect(x, y, w, h, c) {
codestr += '<div style="position:absolute; left:' + x + 'px; top:' + y + 'px; width:' + w + 'px; height:' + h + 'px; background-color:' + c + '; clip:rect(0,'+w+'px,'+h+'px,0);"><\/div>';
}
function fillrect(x1, y1, x2, y2, c) {
_fillrect(x1,y1,x2-x1+1,y2-y1+1,c);
}
function _fillrecttrans(x, y, w, h, c, tr) {
codestr += '<div style="position:absolute; left:' + x + 'px; top:' + y + 'px; width:' + w + 'px; height:' + h + 'px; background-color:' + c + '; clip:rect(0,'+w+'px,'+h+'px,0); filter: alpha(Opacity='+tr+'); opacity='+(tr/100)+';"><\/div>';
}
function fillrecttrans(x1, y1, x2, y2, c, tr) {
_fillrecttrans(x1,y1,x2-x1+1,y2-y1+1,c,tr);
}
function textout(t, x, y, c, f, s, w, styl) {
codestr += '<div style="position:absolute; left:' + x + 'px; top:' + y + 'px; color:' + c + '; font-family:' + f + '; font-size:' + s + 'px; font-weight:' + w + '; font-style:' + styl + ';">' + t + '<\/div>';
}
function textouttrans(t, x, y, c, f, s, w, styl, tr) {
codestr += '<div style="position:absolute; left:' + x + 'px; top:' + y + 'px; color:' + c + '; font-family:' + f + '; font-size:' + s + 'px; font-weight:'
+ w + '; font-style:' + styl + '; filter: alpha(Opacity='+tr+'); opacity='+(tr/100)+';">' + t + '<\/div>';
}
function textoutframe(t, x1, y1, x2, y2, c, f, s, w, styl, align) {
codestr += '<div style="position:absolute; left:' + x1 + 'px; top:' + y1 + 'px; width:' + (Math.abs(x2-x1)+1) + 'px; height:' + (Math.abs(y2-y1)+1) + 'px; color:' + c + '; font-family:' + f + '; font-size:' + s + 'px; font-weight:'
+ w + '; font-style:'+ styl + '; text-align:'+align+';">' + t + '<\/div>';
}
function textoutframetrans(t, x1, y1, x2, y2, c, f, s, w, styl, align, tr) {
codestr += '<div style="position:absolute; left:' + x1 + 'px; top:' + y1 + 'px; width:' + (Math.abs(x2-x1)+1) + 'px; height:' + (Math.abs(y2-y1)+1) + 'px; color:' + c + '; font-family:' + f + '; font-size:' + s + 'px; font-weight:'
+ w + '; font-style:'+ styl + '; text-align:'+align+'; filter: alpha(Opacity='+tr+'); opacity='+(tr/100)+';">' + t + '<\/div>';
}
function imgout(iurl, x, y) {
codestr += '<div style="position:absolute; left:' + x + 'px; top:' + y + 'px;"><img src="' + iurl + '"><\/div>';
}
function imgouttrans(iurl, x, y,tr) {
codestr += '<div style="position:absolute; left:' + x + 'px; top:' + y + 'px; filter: alpha(Opacity='+tr+'); opacity='+(tr/100)+';"><img src="' + iurl + '"><\/div>';
}
function imgoutframe(iurl, x1, y1, x2, y2, align) {
codestr += '<div style="position:absolute; left:' + x1 + 'px; top:' + y1 + 'px; width:' + (Math.abs(x2-x1)+1) + 'px; height:' + (Math.abs(y2-y1)+1) + 'px; text-align:'+align+';"><img src="' + iurl + '"><\/div>';
}
function imgoutframetrans(iurl, x1, y1, x2, y2, align, tr) {
codestr += '<div style="position:absolute; left:' + x1 + 'px; top:' + y1 + 'px; width:' + (Math.abs(x2-x1)+1) + 'px; height:' + (Math.abs(y2-y1)+1) + 'px; text-align:'
+align+'; filter: alpha(Opacity='+tr+'); opacity='+(tr/100)+';"><img src="' + iurl + '"><\/div>';
}
function setpixel(x,y,c) {
_fillrect(x,y,1,1,c);
}
function rect(x1, y1, x2, y2, c, w) {
line(x1,y1,x2,y1,c,w);
line(x1,y1,x1,y2,c,w);
line(x2,y1,x2,y2,c,w);
line(x1,y2,x2,y2,c,w);
}
function line(x1, y1, x2, y2, c, w) {
var i,ly,fx,lx,fy,cy,t,dx,dy,dw;
dw=Math.floor(w/2);
if ((x1==x2)&(y1==y2)) {_fillrect(x1-dw,y1-dw,w,w,c);return;};
if (x1<=x2) {dx=1;} else {dx=-1;}; if (y1<=y2) {dy=1;} else {dy=-1;};
if (Math.abs(x2-x1)>Math.abs(y2-y1)) {
var cx = x1; var cy = y1; fx = cx; lx = cx;
while (cx!=(x2+dx)) {
ly = cy; cy = Math.floor((cx-x1)*(y2-y1)/(x2-x1)+y1);
if ((cx!=x1)&(ly!=cy)) {if (fx>lx) {t=fx;fx=lx;lx=t;}; _fillrect(fx-dw,ly-dw,Math.abs(lx-fx)+w,w,c); fx=cx;};
lx=cx; cx=cx+dx;
} ly = cy; if (fx>lx) {t=fx;fx=lx;lx=t;}; _fillrect(fx-dw,ly-dw,Math.abs(lx-fx)+w,w,c);
} else {
var cx = x1; var cy = y1; fy = cy; ly = cy;
while (cy!=(y2+dy)) {
lx = cx; cx = Math.floor((cy-y1)*(x2-x1)/(y2-y1)+x1);
if ((cy!=y1)&(lx!=cx)) {if (fy>ly) {t=fy;fy=ly;ly=t;}; _fillrect(lx-dw,fy-dw,w,Math.abs(ly-fy)+w,c); fy=cy;};
ly=cy; cy=cy+dy;
} lx = cx; if (fy>ly) {t=fy;fy=ly;ly=t;}; _fillrect(lx-dw,fy-dw,w,Math.abs(ly-fy)+w,c);}
}
function spiralcircle(x1, y1, x2, y2, c, w, st) {
var t,i,cx,cy,lx,ly,rx,ry,nx,ny,li,im;
if (x2<x1) {t=x2;x2=x1;x1=t;};
if (y2<y1) {t=y2;y2=y1;y1=t;};
var ast = 1;
if (st>0) ast=st;
cx=x1+0.5+(x2-x1)/2; cy=y1+0.5+(y2-y1)/2;
rx=Math.abs(x2-x1)/2; ry=Math.abs(y2-y1)/2; li=0;
for (i=0;i<=720;i=i+ast) {
if (li>=360) break; li=i;
nx = Math.floor(cx+Math.cos(i*Math.PI/180)*rx);
ny = Math.floor(cy-Math.sin(i*Math.PI/180)*ry);
im=i%360; if (i>0) {
if (((im>45)&(im<135))|((im>225)&(im<315))) {if (nx!=lx) line(lx,ly,nx,ny,c,w);} else {if (ny!=ly) line(lx,ly,nx,ny,c,w);};
}; lx=nx;ly=ny;}
}
function fillcircle(x1, y1, x2, y2, c) {
var t,i,dx,dy,cx,cy,rx,ry;
if (x2<x1) {t=x2;x2=x1;x1=t;};
if (y2<y1) {t=y2;y2=y1;y1=t;};
cx=x1+0.5+(x2-x1)/2; cy=y1+0.5+(y2-y1)/2;
rx=Math.abs(x2-x1)/2; ry=Math.abs(y2-y1)/2;
if (Math.floor(ry)!=0)
for (i=0;i<=ry;i++) {
dx=Math.sqrt(rx*rx*(1-i*i/(ry*ry)));
dy=i;
fillrect(Math.floor(cx-dx),Math.floor(cy+dy+0.2),Math.floor(cx+dx),Math.floor(cy+dy+0.2),c);
fillrect(Math.floor(cx-dx),Math.floor(cy-dy-0.2),Math.floor(cx+dx),Math.floor(cy-dy-0.2),c);
}
if (Math.floor(rx)!=0)
for (i=0;i<=rx;i++) {
dy=Math.sqrt(ry*ry*(1-i*i/(rx*rx)));
dx=i;
fillrect(Math.floor(cx+dx+0.2),Math.floor(cy-dy),Math.floor(cx+dx+0.2),Math.floor(cy+dy),c);
fillrect(Math.floor(cx-dx-0.2),Math.floor(cy-dy),Math.floor(cx-dx-0.2),Math.floor(cy+dy),c);
}
}
function circle(x1, y1, x2, y2, c, w) {
var t,i,dx,dy,cx,cy,rx,ry,dw;
if (x2<x1) {t=x2;x2=x1;x1=t;};
if (y2<y1) {t=y2;y2=y1;y1=t;};
dw=Math.floor(w/2);
cx=x1+0.5+(x2-x1)/2; cy=y1+0.5+(y2-y1)/2;
rx=Math.abs(x2-x1)/2; ry=Math.abs(y2-y1)/2;
if (Math.floor(ry)!=0)
for (i=0;i<=ry;i++) {
dx=Math.sqrt(rx*rx*(1-i*i/(ry*ry)));
dy=i;
_fillrect(Math.floor(cx+dx-dw),Math.floor(cy+dy+0.2-dw),w,w,c);
_fillrect(Math.floor(cx-dx-dw),Math.floor(cy+dy+0.2-dw),w,w,c);
_fillrect(Math.floor(cx+dx-dw),Math.floor(cy-dy-0.2-dw),w,w,c);
_fillrect(Math.floor(cx-dx-dw),Math.floor(cy-dy-0.2-dw),w,w,c);
}
if (Math.floor(rx)!=0)
for (i=0;i<=rx;i++) {
dy=Math.sqrt(ry*ry*(1-i*i/(rx*rx)));
dx=i;
_fillrect(Math.floor(cx+dx+0.2-dw),Math.floor(cy+dy-dw),w,w,c);
_fillrect(Math.floor(cx-dx-0.2-dw),Math.floor(cy+dy-dw),w,w,c);
_fillrect(Math.floor(cx+dx+0.2-dw),Math.floor(cy-dy-dw),w,w,c);
_fillrect(Math.floor(cx-dx-0.2-dw),Math.floor(cy-dy-dw),w,w,c);
}
}
function rgb(r,g,b) {
var rs = Math.floor(r).toString(16); if (rs.length<2) rs='0'+rs;
var gs = Math.floor(g).toString(16); if (gs.length<2) gs='0'+gs;
var bs = Math.floor(b).toString(16); if (bs.length<2) bs='0'+bs;
return '#'+rs+gs+bs;
}
function flushcode() {
document.getElementById('content').innerHTML=codestr;
}
function cls() {
codestr='';
flushcode();
}
function req(s) {
document.title=s;
}
//code start
req('setsize w=52 h=208');
codestr='';
cls();
fillrect(0,0,52,52*4,'#FF00FF');
imgout('3g.bmp',0,0);
imgout('3g.bmp',0,52);
imgout('3g.bmp',0,52*2);
imgout('3g.bmp',0,52*3);
var i = 0;
var x1 = [];
var y1 = [];
var w1 = [];
var h1 = [];
var n = 0;
var tw = 13;
//linkver
x1[n]=3; y1[n]=10; w1[n]=7; h1[n]=5; n++;
x1[n]=3; y1[n]=10+tw; w1[n]=7; h1[n]=5; n++;
x1[n]=3; y1[n]=10+tw*2; w1[n]=7; h1[n]=5; n++;
x1[n]=3+tw*1; y1[n]=10; w1[n]=7; h1[n]=5; n++;
x1[n]=3+tw*1; y1[n]=10+tw; w1[n]=7; h1[n]=5; n++;
x1[n]=3+tw*1; y1[n]=10+tw*2; w1[n]=7; h1[n]=5; n++;
x1[n]=3+tw*3; y1[n]=10; w1[n]=7; h1[n]=5; n++;
x1[n]=3+tw*3; y1[n]=10+tw; w1[n]=7; h1[n]=5; n++;
x1[n]=3+tw*3; y1[n]=10+tw*2; w1[n]=7; h1[n]=5; n++;
//linkhor
x1[n]=10; y1[n]=3; w1[n]=6; h1[n]=4; n++;
x1[n]=10+tw; y1[n]=3; w1[n]=6; h1[n]=4; n++;
x1[n]=10+tw*2; y1[n]=3; w1[n]=6; h1[n]=4; n++;
x1[n]=10; y1[n]=3+tw*1; w1[n]=6; h1[n]=4; n++;
x1[n]=10+tw; y1[n]=3+tw*1; w1[n]=6; h1[n]=4; n++;
x1[n]=10+tw*2; y1[n]=3+tw*1; w1[n]=6; h1[n]=4; n++;
x1[n]=10; y1[n]=3+tw*3; w1[n]=6; h1[n]=4; n++;
x1[n]=10+tw; y1[n]=3+tw*3; w1[n]=6; h1[n]=4; n++;
x1[n]=10+tw*2; y1[n]=3+tw*3; w1[n]=6; h1[n]=4; n++;
//0top
x1[n]=3+tw*2; y1[n]=3; w1[n]=6; h1[n]=5; n++;
x1[n]=5+tw*2; y1[n]=2; w1[n]=6; h1[n]=4; n++;
//1top
x1[n]=3+tw*2; y1[n]=3+tw*1; w1[n]=6; h1[n]=5; n++;
x1[n]=5+tw*2; y1[n]=2+tw*1; w1[n]=6; h1[n]=4; n++;
//2top
x1[n]=3+tw*2; y1[n]=3+tw*3; w1[n]=6; h1[n]=5; n++;
x1[n]=5+tw*2; y1[n]=2+tw*3; w1[n]=6; h1[n]=4; n++;
//0left
x1[n]=3+tw*0; y1[n]=2+tw*2; w1[n]=4; h1[n]=4; n++;
x1[n]=2+tw*0; y1[n]=5+tw*2; w1[n]=6; h1[n]=5; n++;
//1left
x1[n]=3+tw*1; y1[n]=2+tw*2; w1[n]=4; h1[n]=4; n++;
x1[n]=2+tw*1; y1[n]=5+tw*2; w1[n]=6; h1[n]=5; n++;
//2left
x1[n]=3+tw*3; y1[n]=2+tw*2; w1[n]=4; h1[n]=4; n++;
x1[n]=2+tw*3; y1[n]=5+tw*2; w1[n]=6; h1[n]=5; n++;
x1[n]=3; y1[n]=2; w1[n]=8; h1[n]=6; n++;
x1[n]=2; y1[n]=5; w1[n]=7; h1[n]=4; n++;
x1[n]=2+tw*3; y1[n]=1; w1[n]=6; h1[n]=4; n++;
x1[n]=2+tw*3; y1[n]=4; w1[n]=7; h1[n]=5; n++;
x1[n]=3+tw*1; y1[n]=2; w1[n]=7; h1[n]=5; n++;
x1[n]=5+tw*1; y1[n]=5; w1[n]=5; h1[n]=4; n++;
x1[n]=1+tw*0; y1[n]=1+tw*1; w1[n]=5; h1[n]=3; n++;
x1[n]=4+tw*0; y1[n]=4+tw*1; w1[n]=6; h1[n]=3; n++;
x1[n]=2+tw*0; y1[n]=7+tw*1; w1[n]=5; h1[n]=4; n++;
x1[n]=2+tw*1; y1[n]=2+tw*1; w1[n]=5; h1[n]=4; n++;
x1[n]=2+tw*1; y1[n]=2+tw*1; w1[n]=9; h1[n]=5; n++;
x1[n]=1+tw*1; y1[n]=5+tw*1; w1[n]=7; h1[n]=4; n++;
x1[n]=2+tw*3; y1[n]=1+tw*1; w1[n]=6; h1[n]=3; n++;
x1[n]=2+tw*3; y1[n]=4+tw*1; w1[n]=8; h1[n]=6; n++;
x1[n]=1+tw*0; y1[n]=2+tw*3; w1[n]=8; h1[n]=6; n++;
x1[n]=3+tw*0; y1[n]=6+tw*3; w1[n]=5; h1[n]=3; n++;
x1[n]=5+tw*0; y1[n]=5+tw*3; w1[n]=6; h1[n]=4; n++;
x1[n]=3+tw*1; y1[n]=4+tw*3; w1[n]=7; h1[n]=5; n++;
x1[n]=1+tw*1; y1[n]=2+tw*3; w1[n]=8; h1[n]=4; n++;
x1[n]=1+tw*3; y1[n]=1+tw*3; w1[n]=6; h1[n]=5; n++;
x1[n]=2+tw*3; y1[n]=4+tw*3; w1[n]=7; h1[n]=4; n++;
var nx = [];
var ny = [];
var nw = [];
var rand1 = Math.floor(Math.random()*3)-1;
var rand2 = Math.floor(Math.random()*3)-1;
var rand3 = Math.floor(Math.random()*3)-1;
var rand4 = Math.floor(Math.random()*3)-1;
for (i=0;i<9;i++) nx[i] = rand1;
for (i=9+0;i<9+9;i++) nx[i] = rand2;
for (i=9+9;i<9+9+6;i++) nx[i] = rand3;
for (i=9+9+6;i<9+9+6+6;i++) nx[i] = rand4;
for (i=9+9+6+6;i<x1.length;i++) nx[i] = Math.floor(Math.random()*3)-1;
rand1 = Math.floor(Math.random()*3)-1;
rand2 = Math.floor(Math.random()*3)-1;
rand3 = Math.floor(Math.random()*3)-1;
rand4 = Math.floor(Math.random()*3)-1;
for (i=0;i<9;i++) ny[i] = rand1;
for (i=9+0;i<9+9;i++) ny[i] = rand2;
for (i=9+9;i<9+9+6;i++) ny[i] = rand3;
for (i=9+9+6;i<9+9+6+6;i++) ny[i] = rand4;
for (i=9+9+6+6;i<x1.length;i++) ny[i] = Math.floor(Math.random()*3)-1;
rand1 = Math.floor(Math.random()*3)-1;
rand2 = Math.floor(Math.random()*3)-1;
rand3 = Math.floor(Math.random()*3)-1;
rand4 = Math.floor(Math.random()*3)-1;
for (i=0;i<9;i++) nw[i] = rand1;
for (i=9+0;i<9+9;i++) nw[i] = rand2;
for (i=9+9;i<9+9+6;i++) nw[i] = rand3;
for (i=9+9+6;i<9+9+6+6;i++) nw[i] = rand4;
for (i=9+9+6+6;i<x1.length;i++) nw[i] = Math.floor(Math.random()*3)-1;
//frame 1
for (i=0;i<x1.length;i++) {
fillcircle(x1[i],y1[i],x1[i]+w1[i],y1[i]+h1[i],'#FFFFFF');
}
//frame 2
for (i=0;i<x1.length;i++) {
if (nw[i]==0) {
x1[i]=x1[i]+nx[i];
y1[i]=y1[i]+ny[i];
} else {
w1[i]=w1[i]+nw[i];
h1[i]=h1[i]-nw[i];
}
fillcircle(x1[i],y1[i]+52,x1[i]+w1[i],y1[i]+52+h1[i],'#FFFFFF');
}
//frame 3
for (i=0;i<x1.length;i++) {
if (nw[i]==0) {
x1[i]=x1[i]-nx[i];
y1[i]=y1[i]-ny[i];
} else {
w1[i]=w1[i]-nw[i];
h1[i]=h1[i]+nw[i];
}
fillcircle(x1[i],y1[i]+52*2,x1[i]+w1[i],y1[i]+52*2+h1[i],'#FFFFFF');
}
//frame 4
for (i=0;i<x1.length;i++) {
if (nw[i]==0) {
x1[i]=x1[i]-nx[i];
y1[i]=y1[i]-ny[i];
} else {
w1[i]=w1[i]-nw[i];
h1[i]=h1[i]+nw[i];
}
fillcircle(x1[i],y1[i]+52*3,x1[i]+w1[i],y1[i]+52*3+h1[i],'#FFFFFF');
}
flushcode();
//code end
</script>
</div>
</body>
</html>
Запуская скрипт много раз - добиваемся облаков нормального вида в каждом из 4 кадров, т.к. иногда получаются облака с множественными дырками, иногда вообще структуры рамки из-за этого не видно.
Дальше добавляем тени на облака, делаем фиолетовые (цвета туч) кнопки и голубое небо в качестве фона. Скин вышел такой (пока без дополнительных элементов, позже можно будет дорисовать, а также изменить цветовую гамму):
Грузим скин в игру. FPS для этого скина уже не 8 или 10 кадров в секунду, а всего 3, т.к. облака летают медленно обычно. На тестовом окне получается вот так:
