ひろひろの生活日記(LIFE Of HIROHIRO)

パソコン講習とソフト開発をしています。自作小説も掲載しています。ネット情報発信基地(上野博隆)Hirotaka Ueno

ロボットの描画、コーディングの修正。(4)

2022年04月13日 10時07分20秒 | ゲーム開発(Game development)

接合点の角度を変えるだけで描画は変わります。

モジュールの修正。

・コメントをつけました。

//
//多角形の描画(座標指定)座標をそのまま描画(回転考慮あり)
//
function polygon_draw(){

        shapetype = robotcode[idy][4];
        polygonno = parseInt(robotcode[idy][5])-1;
//      接合点テーブルから中点の座標xの取得
       if(robotcode[idy][9].substr(0,1) === "S") {
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === robotcode[idy][9]){
                  midpointx = jointbl[i].realadx;
                  break;
              }
           }
       } else {
//         多角形の中心座標x
           midpointx = parseInt(robotcode[idy][9]);
       }

//      接合点テーブルから中点の座標yの取得
       if(robotcode[idy][10].substr(0,1) === "S") {
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === robotcode[idy][10]){
                  midpointy = jointbl[i].realady;
                  break;
              }
           }
       } else {
//         多角形の中心座標y
           midpointy = parseInt(robotcode[idy][10]);
       }

        polysax = 0; polysay = 0;
        if(robotcode[idy][11].substr(0,1) === "(") {
//         差分データとして保存
           polysax = parseInt(robotcode[idy][11].substr(1,4));
           polysay = parseInt(robotcode[idy][11].substr(6,4));
        } else {
           if((robotcode[idy][11].substr(0,1) != "△") && (robotcode[idy][11].substr(0,1) != "(")) {
//            回転角度データをして保存。
              dr = parseInt(robotcode[idy][11]);
              if((robotcode[idy][1].substr(0,1) === "2") || (robotcode[idy][1].substr(0,1) === "4")) {
                 dr = 360 - dr;
              }
              if(dr >= 360) dr - 360;
           } else {
                dr = 0;
           }

        }
        y1sv = 0; x1sv =0;

//      差異が0でない場合は、中点に差異を加味する。
        if(polysay != 0) y1sv = midpointy + polysay;
        if(polysax != 0) x1sv = midpointx + polysax;
//      角度が設定されているなら回転させる。
        if(dr != 0) {
//          回転する変数を計算
            vBase1_c = Math.cos(dr*(Math.PI/180));
            vBase1_s = Math.sin(dr*(Math.PI/180));
        }

        fsw = 1;
        for(j=0;j<bw;j++){
            if(polygonzh[polygonno][j].flag === 1){
                if(dr !=0){
//                座標を回転させる。
                  xx = polygonzh[polygonno][j].polyx+x1sv - midpointx;
                  yy = polygonzh[polygonno][j].polyy+y1sv - midpointy;
                  px =  parseInt(xx * vBase1_c - yy * vBase1_s)+midpointx;
                  py =  parseInt(xx * vBase1_s + yy * vBase1_c)+midpointy;
                } else {
//                多角形テーブルよりデータと差分を計算し座標を算出
                  px = polygonzh[polygonno][j].polyx+x1sv;
                  py = polygonzh[polygonno][j].polyy+y1sv;
                }
//                座標を描画する。
                  if(fsw === 1){
                       //     カラーナンバーをワークに編集する。
                       wkcolor = parseInt(robotcode[idy][8]);
                       ctx.beginPath();
                       ctx.moveTo(px*mgf+dfsx,py*mgf+dfsy);
                       fsw = 0;
                  } else { 
                       ctx.lineTo(px*mgf+dfsx,py*mgf+dfsy);
                  }
              }
         }
//       多角形を描画出力
         if(fsw === 0){
             ctx.closePath();
             ctx.fillStyle = bordcolor[ocolno][wkcolor];
             ctx.fill();
         }

 

}

 

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

テーブルデータからロボットの描画(テスト済みコーディング掲載)(3)

2022年04月13日 09時22分29秒 | ゲーム開発(Game development)

ー-多角形データ--

(多角形)        
1 4 035,040 065,040 060,080 040,080    
2 0        
3 5 040,080 060,080 055,100 050,105 045,100   
4 6 041,080 046,100 045,105 030,105 030,100 032,090  
5 6 059,080 054,100 055,105 070,105 070,100 068,090  
6 7 -06,000 005,000 006,004 006,010 -04,010 -07,006 -07,004 
7 7 -05,000 005,000 006,004 006,006 003,010 -06,010 -06,004 
8 6 -07,000 007,000 008,006 008,008 -10,008 -10,005  
9 6 007,000 -07,000 -08,006 -08,008 010,008 010,005  
(終わり)

 

ー-ロボット・データ--

MM種別 種別内No 描画タイミング 座標数 図形種別 多角形No 接合S 接合E 色No 中点x 中点y 角度(前)差 半径 減少角度 幅(前長さ) 長さ
MM1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
MM2 2 2 2 2 1 2 2 2 3 3 3 2 3 3 3
01 00 01 01 10 2 00 00 00 040 012 △ △ △ 022 028
DD               
02 01 01 04 40 1 01 51 04 050 060 0 20 0 30 40
DD               
03 03 01 05 40 3 51 00 04 050 093 0 13 0 20 25
DD               
05 11 02 01 53 0 11 12 01 035 045 30 6 3 12 25
05 12 02 02 23 0 12 13 01 S12 S12 0 △ △ 6 30
DD               
06 10 01 06 40 4 81 31 04 038 090 0 38 0 16 25
06 20 01 06 40 5 82 41 04 062 090 0 38 0 16 25
DD               
07 11 02 01 53 0 31 32 04 S31 S31 0 9 6 15 35
07 12 02 02 23 0 32 33 04 S32 S32 0 △ △ 10 50
DD               
05 30 04 07 41 6 13 00 02 S13 S13 (-017,-110) △ △ △ △
08 31 04 02 23 0 13 00 03 S13 S13 (-004,+005) △ △ 3 9
08 32 04 02 23 0 13 00 02 S13 S13 (-001,+009) △ △ 2 10
08 33 04 02 23 0 13 00 03 S13 S13 (+001,+009) △ △ 2 10
08 34 04 02 23 0 13 00 02 S13 S13 (+003,+009) △ △ 2 10
08 35 04 02 23 0 13 00 03 S13 S13 (+005,+009) △ △ 2 8
DD               
09 70 05 06 41 8 33 00 01 S33 S33 (+008,+005) △ △ △ △
DD               
05 21 02 01 53 0 21 22 01 065 045 30 6 3 12 25
05 22 02 02 23 0 22 23 01 S22 S22 0 △ △ 6 30
DD               
07 21 02 01 53 0 41 42 04 S41 S41 0 9 6 15 35
07 22 02 02 23 0 42 43 04 S42 S42 0 △ △ 10 50
DD               
05 40 04 07 41 7 23 00 02 S23 S23 (-085,-110) △ △ △ △
08 41 04 02 23 0 23 00 03 S23 S23 (+005,+005) △ △ 3 9
08 42 04 02 23 0 23 00 02 S23 S23 (+002,+009) △ △ 2 10
08 43 04 02 23 0 23 00 03 S23 S23 (+000,+009) △ △ 2 10
08 44 04 02 23 0 23 00 02 S23 S23 (-002,+009) △ △ 2 10
08 45 04 02 23 0 23 00 03 S23 S23 (-004,+009) △ △ 2 8
DD               
09 80 05 06 41 9 43 00 01 S43 S43 (+008,+000) △ △ △ △
DD               
10 11 01 01 30 0 52 00 05 040 055 △ 10 0 20 20
10 11 01 01 30 0 52 00 05 060 055 △ 10 0 20 20
DD               
11 11 03 01 30 0 11 11 02 035 045 △ 6 0 12 12
11 12 03 01 30 0 12 12 02 S11 S11 F30 5 0 25 10
11 13 03 01 30 0 13 13 02 S12 S12 F00 4 0 30 8
DD               
11 31 03 01 30 0 31 31 02 040 105 △ 9 0 18 18
11 32 03 01 30 0 32 32 02 S31 S31 F00 6 0 35 12
11 33 03 01 30 0 33 33 02 S32 S32 F00 5 0 50 10
DD               
11 21 03 01 30 0 21 21 02 065 045 △ 6 0 12 12
11 22 03 01 30 0 22 22 02 S21 S21 F30 5 0 25 10
11 23 03 01 30 0 23 23 02 S22 S22 F00 4 0 30 8
DD               
11 41 03 01 30 0 41 41 02 060 105 △ 9 0 18 18
11 42 03 01 30 0 42 42 02 S41 S41 F00 6 0 35 12
11 43 03 01 30 0 43 43 02 S42 S42 F00 5 0 50 10
EE

 

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

テーブルデータからロボットの描画(テスト済みコーディング掲載)(2)

2022年04月13日 09時17分56秒 | ゲーム開発(Game development)

テーブルデータからロボットの描画(テスト済みコーディング掲載)(2)

 

 

//
//ロボットの描画
//

function robotdraw(){


//接合部を描画する
    join_draw();

//ロボットテーブルからデータを呼び出し描画する。
    for(y=0; y<robotsu; y++){
        //テーブル(配列)から図形種別のワークに入れる。

        shapetype = robotcode[y][4];
        idy = y;

        //値によって処理を分ける。
        switch(shapetype) {
          case "10":
              //イメージデータの描画処理
              image_draw();
              break;
          case "23":
              //線の描画処理(接合点(始点、終点))
              line3_draw();
              break;
          case "30":
              //円の描画処理
              if(robotcode[y][0] !="11") circle_draw();
              break;
          case "40":
              //多角形の描画処理
              polygon_draw();
              break;
          case "41":
              //多角形の描画処理(接合点)
              polygon2_draw();
              break;
          case "53":
              //逆台形の描画処理
              invtrapezoid3_draw();
              break;
          default:
              //その他(考え中)
              etc_syori();
       }
    }


}
//接合部の座標を計算する。
function join_calculate(){

    jointbl[joinsu].kinds = "S" + robotcode[idy][1];          //種別
    jointbl[joinsu].timing = robotcode[idy][2];         //描画タイミング
    jointbl[joinsu].shapetype = robotcode[idy][4];      //図形種別
    jointbl[joinsu].colorno = parseInt(robotcode[idy][8]);        //色No
    jointbl[joinsu].midpointx = robotcode[idy][9];       //中点x
    jointbl[joinsu].midpointy = robotcode[idy][10];       //中点y
// 前の接合点からの描画角度
    if(robotcode[idy][11] === "△") {
        jointbl[joinsu].fangle = 0;
    } else {
        jointbl[joinsu].fangle = parseInt(robotcode[idy][11].substr(1,2));          //前角度

    }
    dr = jointbl[joinsu].fangle;
//  左側の接合点の場合、角度を360度回転させる。
    if((robotcode[idy][1].substr(0,1) === "2") || (robotcode[idy][1].substr(0,1) === "4")){
          dr = 360 - dr;
          if(dr >= 360) dr = dr - 360;
    }

    jointbl[joinsu].radius = parseInt(robotcode[idy][12]);          //半径
    jointbl[joinsu].flength = parseInt(robotcode[idy][14]);         //前長さ
    jointbl[joinsu].length = parseInt(robotcode[idy][15]);          //長さ

    sx = 0; sy = 0;
    //中点xの値の頭が”S”であると前にある種別が同一の座標を参照して計算する。
    //リアル座標xの算出
    if(robotcode[idy][9].substr(0,1) === 'S'){
        //一つ前のテーブルの種別が中点xの値と同じならリアル座標xをsxに入れる。
        //以外は0を編集する。
        if(jointbl[joinsu-1].kinds === jointbl[joinsu].midpointx){
           sx = jointbl[joinsu-1].realadx;
        } else {
           sx = 0;
        }
        //cos(コサイン)でx座標を求める。(前の角度+90)ラジアンに直す(パイ/180を乗算する)
        if(dr === 0){
           jointbl[joinsu].realadx = sx;
        } else {
           jointbl[joinsu].realadx = parseInt(jointbl[joinsu].flength*Math.cos((dr+90)*Math.PI/180))+sx;
        }
    } else {
        //実座標が入っている場合、そのまま編集する。
        jointbl[joinsu].realadx = parseInt(robotcode[idy][9]);         //リアル座標x
    }
    
    //中点yの値の頭が”S”であると前にある種別が同一の座標を参照して計算する。
    //リアル座標yの算出
    if(robotcode[idy][10].substr(0,1) === 'S'){
        //一つ前のテーブルの種別が中点yの値と同じならリアル座標yをsyに入れる。
        //以外は0を編集する。
        if(jointbl[joinsu-1].kinds === jointbl[joinsu].midpointy){
           sy = jointbl[joinsu-1].realady;
        } else {
           sy = 0;
        }
        if(dr === 0){
            jointbl[joinsu].realady = jointbl[joinsu].flength + sy;
        } else  {
            //sin(サイン)でy座標を求める。(前の角度+90)ラジアンに直す(パイ/180を乗算する)
            jointbl[joinsu].realady = parseInt(jointbl[joinsu].flength*Math.sin((dr+90)*Math.PI/180))+sy;
        }
    } else {
        //実座標が入っている場合、そのまま編集する。
        jointbl[joinsu].realady = parseInt(robotcode[idy][10]);         //リアル座標y
    }


    joinsu = joinsu + 1;

}

//イメージデータの描画処理
function image_draw(){
        //イメージテーブルの印字するイメージの番号
        imgno = parseInt(robotcode[idy][5])-1;
        //印字位置
        icenterx = parseInt(robotcode[idy][9]);
        icentery = parseInt(robotcode[idy][10]);
        //印字するサイズ 幅と高さ
        iwidth   = parseInt(robotcode[idy][14]);
        ilong    = parseInt(robotcode[idy][15]);

        ctx.drawImage(img_robot[imgno],icenterx*mgf+dfsx,icentery*mgf+dfsy,iwidth*mgf,ilong*mgf);


}


//線の描画処理
//
//線の描画処理(接合点(始点、終点)のからの表示)
//
function line3_draw(){
//   図形タイプをセーブする。
        shapetype = robotcode[idy][4];
//      接合点(始点)
        linestratx = 0; linestarty = 0;
    if(robotcode[idy][6] != "00"){
          linestart = "S" + robotcode[idy][6];
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === linestart){
                  linestartx = jointbl[i].realadx;
                  linestarty = jointbl[i].realady;
                  break;
              }
           }
       }
//      接合点(終点)
        lineendx = 0; lineendy = 0;
    if(robotcode[idy][7] != "00"){
          lineend = "S" + robotcode[idy][7];
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === lineend){
                  lineendx = jointbl[i].realadx;
                  lineendy = jointbl[i].realady;
                  break;
              }
           }
       }

//      (の中は、減算、加算する差異数値
        polysax = 0; polysay = 0;
        if(robotcode[idy][11].substr(0,1) === "(") {
           polysax = parseInt(robotcode[idy][11].substr(1,4));
           polysay = parseInt(robotcode[idy][11].substr(6,4));
        }
        y1sv = 0; x1sv =0;
//      始点を差異で修正する
        y1sv = linestarty + polysay;
        x1sv = linestartx + polysax;
//     線の幅
       linewidth = parseInt(robotcode[idy][14]);
//     線の長さ
       linelength = parseInt(robotcode[idy][15]);

//     線の角度
       lineangle = 0;
//     終点が無い場合は、角度と長さより終点を算出する。
       if(lineendx === 0){
           if((robotcode[idy][11].substr(0,1) != "△") && (robotcode[idy][11].substr(0,1) != "(")) {
              lineangle = parseInt(robotcode[idy][11]) + 90;
              if((robotcode[idy][1].substr(0,1) === "2") || (robotcode[idy][1].substr(0,1) === "4")) {
                 dr = 360 - lineangle;
              }
           } else {
                lineangle = 0;
           }
           if(lineangle === 0) {
              lx = 0 + x1sv;
              ly = linelength + y1sv;
           } else {
             lx = parseInt(linelength*Math.cos((lineangle)*(Math.PI/180))) + x1sv;
             ly = parseInt(linelength*Math.sin((lineangle)*(Math.PI/180))) + y1sv;
           }
       } else {
           lx = lineendx;
           ly = lineendy;
       }

//     線の角度によるlx(cos)とly(sin)で計算する。

//     線の開始座標
       xx = x1sv;
       yy = y1sv;
//     線の終点座標
       x1 = lx;
       y1 = ly;
//     カラーナンバーをワークに編集する。
        wkcolor = parseInt(robotcode[idy][8]);

        ctx.beginPath();
        ctx.lineWidth = linewidth*mgf;
        ctx.moveTo(xx*mgf+dfsx,yy*mgf+dfsy);
        ctx.lineTo(x1*mgf+dfsx,y1*mgf+dfsy);

//      カラーテーブル(配列)からカラーナンバーのレコードを編集する。
        ctx.strokeStyle = bordcolor[ocolno][wkcolor];
//      線を描画する。
        ctx.stroke();

}


function circle_draw(){

        shapetype = robotcode[idy][4];

        cradius   = parseInt(robotcode[idy][12]);
//     描画位置(x座標)を接合点テーブルより取得。
       if(robotcode[idy][9].substr(0,1) === "S") {
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === robotcode[idy][9]){
                  midpointx = jointbl[i].realadx;
                  break;
              }
           }
       } else {
           midpointx = parseInt(robotcode[idy][9]);
       }

//     描画位置(y座標)を接合点テーブルより取得。
       if(robotcode[idy][10].substr(0,1) === "S") {
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === robotcode[idy][10]){
                  midpointy = jointbl[i].realady;
                  break;
              }
           }
       } else {
           midpointy = parseInt(robotcode[idy][10]);
       }

//     カラーナンバーをワークに編集する。
        wkcolor = parseInt(robotcode[idy][8]);

        ctx.beginPath();
        ctx.fillStyle = bordcolor[ocolno][wkcolor];
        ctx.arc(midpointx*mgf+dfsx,midpointy*mgf+dfsy,cradius*mgf,0,Math.PI*2,false);
//      中心座標を指定(円)
        ctx.fill();


}
function polygon_draw(){

        shapetype = robotcode[idy][4];
        polygonno = parseInt(robotcode[idy][5])-1;
//      接合点テーブルから中点の座標xの取得
       if(robotcode[idy][9].substr(0,1) === "S") {
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === robotcode[idy][9]){
                  midpointx = jointbl[i].realadx;
                  break;
              }
           }
       } else {
           midpointx = parseInt(robotcode[idy][9]);
       }

//      接合点テーブルから中点の座標yの取得
       if(robotcode[idy][10].substr(0,1) === "S") {
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === robotcode[idy][10]){
                  midpointy = jointbl[i].realady;
                  break;
              }
           }
       } else {
           midpointy = parseInt(robotcode[idy][10]);
       }

        polysax = 0; polysay = 0;
        if(robotcode[idy][11].substr(0,1) === "(") {
           polysax = parseInt(robotcode[idy][11].substr(1,4));
           polysay = parseInt(robotcode[idy][11].substr(6,4));
        } else {
           if((robotcode[idy][11].substr(0,1) != "△") && (robotcode[idy][11].substr(0,1) != "(")) {
              dr = parseInt(robotcode[idy][11]);
              if((robotcode[idy][1].substr(0,1) === "2") || (robotcode[idy][1].substr(0,1) === "4")) {
                 dr = 360 - dr;
              }
           } else {
                dr = 0;
           }

        }
        y1sv = 0; x1sv =0;

//      差異が0でない場合は、中点に差異を加味する。
        if(polysay != 0) y1sv = midpointy + polysay;
        if(polysax != 0) x1sv = midpointx + polysax;
//      角度が設定されているなら回転させる。
        if(dr != 0) {
            vBase1_c = Math.cos(ANGLE*(Math.PI/180));
            vBase1_s = Math.sin(ANGLE*(Math.PI/180));
        }

        fsw = 1;
        for(j=0;j<bw;j++){
            if(polygonzh[polygonno][j].flag === 1){
                if(dr !=0){
                  xx = polygonzh[polygonno][j].polyx+x1sv - midpointx;
                  yy = polygonzh[polygonno][j].polyy+y1sv - midpointy;
                  px =  parseInt(xx * vBase1_c - yy * vBase1_s)+midpointx;
                  py =  parseInt(xx * vBase1_s + yy * vBase1_c)+midpointy;
                } else {
                  px = polygonzh[polygonno][j].polyx+x1sv;
                  py = polygonzh[polygonno][j].polyy+y1sv;
                }
                  if(fsw === 1){
                       //     カラーナンバーをワークに編集する。
                       wkcolor = parseInt(robotcode[idy][8]);
                       ctx.beginPath();
                       ctx.moveTo(px*mgf+dfsx,py*mgf+dfsy);
                       fsw = 0;
                  } else { 
                       ctx.lineTo(px*mgf+dfsx,py*mgf+dfsy);
                  }
              }
         }
         if(fsw === 0){
             ctx.closePath();
             ctx.fillStyle = bordcolor[ocolno][wkcolor];
             ctx.fill();
         }

 


}
//接合点からの多角形の描画(差異の計算なし)
function polygon2_draw(){

        shapetype = robotcode[idy][4];
        polygonno = parseInt(robotcode[idy][5])-1;
//      接合点テーブルから中点の座標xの取得
       if(robotcode[idy][9].substr(0,1) === "S") {
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === robotcode[idy][9]){
                  midpointx = jointbl[i].realadx;
                  break;
              }
           }
       } else {
           midpointx = parseInt(robotcode[idy][9]);
       }

//      接合点テーブルから中点の座標yの取得
       if(robotcode[idy][10].substr(0,1) === "S") {
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === robotcode[idy][10]){
                  midpointy = jointbl[i].realady;
                  break;
              }
           }
       } else {
           midpointy = parseInt(robotcode[idy][10]);
       }


        fsw = 1;
        for(j=0;j<bw;j++){
            if(polygonzh[polygonno][j].flag === 1){
                  px = polygonzh[polygonno][j].polyx + midpointx;
                  py = polygonzh[polygonno][j].polyy + midpointy;
                  if(fsw === 1){
                       //     カラーナンバーをワークに編集する。
                       wkcolor = parseInt(robotcode[idy][8]);
                       ctx.beginPath();
                       ctx.moveTo(px*mgf+dfsx,py*mgf+dfsy);
                       fsw = 0;
                  } else { 
                       ctx.lineTo(px*mgf+dfsx,py*mgf+dfsy);
                  }
              }
         }
         if(fsw === 0){
             ctx.closePath();
             ctx.fillStyle = bordcolor[ocolno][wkcolor];
             ctx.fill();
         }

 


}

//
//逆台形(接合点(始点、終点)描画
//
function invtrapezoid3_draw(){

        shapetype = robotcode[idy][4];
//      接合点(始点)の座標を取得する。
        invstratx = 0; invstarty = 0;
    if(robotcode[idy][6] != "00"){
          invstart = "S" + robotcode[idy][6];
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === invstart){
                  invstartx = jointbl[i].realadx;
                  invstarty = jointbl[i].realady;
                  break;
              }
           }
        }
//      接合点(終点)の座標を取得する。
        invendx = 0; invendy = 0;
    if(robotcode[idy][7] != "00"){
          invend = "S" + robotcode[idy][7];
           for(i=0; i<joinsumax; i++){
              if(jointbl[i].kinds === invend){
                  invendx = jointbl[i].realadx;
                  invendy = jointbl[i].realady;
                  break;
              }
           }
       }

 

 

        inradius = parseInt(robotcode[idy][12]);
        inmdr = parseInt(robotcode[idy][13]);
        inlong = parseInt(robotcode[idy][15]);
//      角度を算出(右は、(360度)反転させる)
        dr = parseInt(robotcode[idy][11]);
        if((robotcode[idy][1].substr(0,1) === "2") || (robotcode[idy][1].substr(0,1) === "4")){
              dr = 360 - dr;
        }
//      始点、終点から両端の座標を算出する。
        yp = Math.sin(dr*(Math.PI/180));
        xp = Math.cos(dr*(Math.PI/180));
        yp1 = Math.sin((dr+180)*(Math.PI/180));
        xp1 = Math.cos((dr+180)*(Math.PI/180));

        sy = (inradius*yp1+invstarty);
        sx = (inradius*xp1+invstartx);
        sy1 = (inradius*yp+invstarty);
        sx1 = (inradius*xp+invstartx);

        y1 = (inmdr*yp1+invendy);
        x1 = (inmdr*xp1+invendx);
        y2 = (inmdr*yp+invendy);
        x2 = (inmdr*xp+invendx);


//     カラーナンバーをワークに編集する。
        wkcolor = parseInt(robotcode[idy][8]);
        ctx.beginPath();
        ctx.moveTo(sx*mgf+dfsx,sy*mgf+dfsy);
        ctx.lineTo(sx1*mgf+dfsx,sy1*mgf+dfsy);
        ctx.lineTo(x2*mgf+dfsx,y2*mgf+dfsy);
        ctx.lineTo(x1*mgf+dfsx,y1*mgf+dfsy);

//全て座標を指定 逆多角形

        ctx.closePath();
        ctx.fillStyle = bordcolor[ocolno][wkcolor];
        ctx.fill();

        wcol = bordcolor[ocolno+1][wkcolor];


//     影の描画(色の数値を減らして影をつける)
        s1col = parseInt(wcol.substr(1,2),16);
        s2col = parseInt(wcol.substr(3,2),16);
        s3col = parseInt(wcol.substr(5,2),16);

        for(i=5;i > 0; i--){

          so1col = s1col - i*5;
          so2col = s2col - i*5;
          so3col = s3col - i*5;
          wkcolor = "rgb(" + so1col + "," + so2col + "," + so3col + ")";


          sax = 5 - i; say = 0;
          ctx.beginPath();
          ctx.lineWidth = 1*mgf;
          ctx.moveTo(sx*mgf+dfsx+sax,sy*mgf+dfsy+say);
          ctx.lineTo(x1*mgf+dfsx+sax,y1*mgf+dfsy-say);
//全て座標を指定(腕下・影)

          ctx.strokeStyle = wkcolor;
          ctx.stroke();
        }


}

function join_draw(){

       for(i = 0; i          ccenterx = jointbl[i].realadx;
          ccentery = jointbl[i].realady;
          cradius  = jointbl[i].radius;

          ctx.beginPath();
          ctx.fillStyle = bordcolor[ocolno][jointbl[i].colorno];
          ctx.arc(ccenterx*mgf+dfsx,ccentery*mgf+dfsy,cradius*mgf,0,Math.PI*2,false);
//        中心座標を指定(接合点)
          ctx.fill();
       }
}


function etc_syori(){

//    element = document.getElementById("idresult");
//    displayarea = " polayarea=" + polytext[0].substr(1,3);
//    element.innerHTML = displayarea;


}

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

テーブルデータからロボットの描画(テスト済みコーディング掲載)(1)

2022年04月13日 09時08分53秒 | ゲーム開発(Game development)

 

テキストエリア:myTEXT(ロボットデーター)
テキストエリア:myTEXTP(多角形座標)

描画2(ボタン:robotdraw())
LOAD (ボタン:polygontbl_load())
LOAD2 (ボタン:robot_load())

javascript(wrobotV303.js)

ロード時の実行(init())

 

----wrobotV303.js---

//図形を描画するキャンパスのエリア(領域)を確保する。
var canvas;

//キャンパスの幅と高さの値を保存する定数
WIDTH  = 640;
HEIGHT = 480;

VIEW_WIDTH  = 0;
VIEW_HEIGHT = 0;


var robotid = ["Robot101.png", "wFace101.png", "wRobot101.png"];
ROBOTS = 3;
var img_robot = []; //ロボットの顔や、その他、表示したいイメージのテーブル


//img_robotのテーブル(配列)をimageで定義し、
//robotidテーブル(配列)で指定した名前の画像を読込む。

    for(i=0;i
       img_robot[i] = new Image();
       img_robot[i].src = robotid[i];
    }


//描画するカラーの値を保存するテーブル領域(2次元)
var bordcolor = [
//ピンク系
 ["peachpuff", "bisque", "moccasin", "navajowhite", "wheat", "plum", "thistle"],
//ピンク系(16進数表示)
 ["#ffdab9", "#ffe4c4", "#ffe4b5", "#ffdead", "#f5deb3", "#dda0dd", "#d8bfd8"],
//灰色系
 ["lightgrey", "silver", "darkgray", "slategray", "gray", "dimgray", "black"],
//灰色系(16進数表示)
 ["#d3d3d3", "#c0c0c0", "#a9a9a9", "#708090", "#808080", "#696969", "#000000"],
//ピンク一色
 ["peachpuff", "peachpuff", "peachpuff", "peachpuff", "peachpuff", "peachpuff", "wheat"],
 ["#ffdab9", "#ffdab9", "#ffdab9", "#ffdab9", "#ffdab9", "#ffdab9", "#f5deb3"],
//灰色一色
 ["gray", "gray", "gray", "gray", "gray", "gray", "dimgray"],
 ["#808080", "#808080", "#808080", "#808080", "#808080", "#808080", "#696969"],
];

//カラーテーブルナンバー
var ocolno = 2;     //灰色

var username = ["ipad","iphone","android"];         //端末の名前


//描画位置のオフセット
var ofsx = 200,ofsy = 0;
var dfsx = 0,dfsy = 0;
var wofsx = 250,wofsy = 0;
//描画のサイズの倍数を指定
var mgf = 2;
var fmgf = 1;


var robotcode = [];                //ロボットデータテーブル
var bwr = 16,bhr = 70;               //ロボットデータテーブル(サイズ、横、縦)
var idy = 0;                       // 連携用インデックスy
var robotsu = 0;
var robotarea = " ";               //テキストエリアからの読込用
var robottext = [];                //テキストエリアの第一次分割エリア(行)
var robotitem = [];                //テキストエリアの第二次分割エリア(項目)
var robotitem2 = [];


//多角形読込エリア
var polyarea = " ";               //テキストエリアからの読込用
var polytext = [];                //テキストエリアの第一次分割エリア(行)
var polyitem = [];                //テキストエリアの第二次分割エリア(項目)
var polyitem2 = [];
var bw = 10,bh = 15; 
var polygonzh = [];
var polyysu = 0;
var polysu = 0;

//多角形テーブルレコードレイアウト
function polypiece() {
    this.flag  = 0;         //フラッグ 0:無効 1:有効
    this.polyx = 0;         //多角形x座標
    this.polyy = 0;         //多角形y座標
}

//接合点テーブル(配列)にプロパティを付与する関数
//接合点は、描画されるものは円です。
var jointbl = [];
var joinsumax = 30;
var joinsu = 0;

//接合点テーブルの項目
function piece() {
    this.kinds = "";          //種別
    this.timing = "";         //描画タイミング
    this.shapetype = "";      //図形種別
    this.colorno = "";        //色No
    this.midpointx = "";       //中点x
    this.midpointy = "";       //中点y
    this.fangle = 0;          //角度(前)
    this.radius = 0;          //半径
    this.flength = 0;         //前長さ
    this.length = 0;          //長さ
    this.realadx = 0;         //リアル座標x
    this.realady = 0;         //リアル座標y
}


//初期処理
function init(){
//HTMLで指定したキャンパスをJavaScriptで使用する領域と結び付けて定義する。
    canvas = document.getElementById('world');
//キャンパスの幅と高さの指定
    canvas.width  = WIDTH;
    canvas.height = HEIGHT;
//2Dのグラフィックコントロールを取得
    ctx = canvas.getContext('2d');
//2Dのグラフィックコントロールで使用する文字のフォントを指定する。
    ctx.font = "24px 'MS Pゴシック'";
//このHTMLを使用しているユーザを判別する。
    user = window.navigator.userAgent.toLowerCase();
    for(i=0; i
        if(user.indexOf(username[i]) > 0)break;
    }
//ウィンドウのユーザ名が入つているならPCと判別する。(マウス)
//以外(ヌルー)ならスマホと判断する。(タッチ)
    if(i
        document.addEventListener("touchstart", touchstart);
    }else{
        document.addEventListener("mousedown", mousedown);
    }
//多角形テーブルエリアを定義して確保する。
     polygonzh = new Array(bh);
     for(y=0; y
        polygonzh[y] = new Array(bw);
    //行を項目に分ける。(¥t)タブで分ける。
        for(x=0; x
      //2次元の配列(テーブル)に収納する。
            polygonzh[y][x] = new polypiece;
        }
    }


}


//スマホ/タブレットのタッチイベントで起動する関数
function touchstart(e){
    if  (e.targetTouches.length == 1){
        touch = e.targetTouches[0];
        touchpice(touch.pageX ,touch.pageY);
    }
}

//pcのマウスクリックイベントで起動する関数
function mousedown(e){
    touchpice(e.clientX ,e.clientY);
}

//取得座標が移動したときの処理。
function touchpice(tx,ty){
    element = document.getElementById("idselect");
}

function polygontbl_load(){
//テキストエリアからロボットデータを取り込む。
    polyarea = document.myFORM.myTEXTP.value;
//ロボットエリアのデーターを改行(¥n)で分ける。
//行ごとにテーブルに入る。
    polytext = polyarea.split("\n");
    polyysu = 0;
    if(polytext[0].substr(1,3) === "多角形"){
        for(y=1; y
           if(polytext[y].substr(1,3) === "終わり") break;
        //行を項目に分ける。(¥t)タブで分ける。


              polyitem = polytext[y].split("\t");
//              タブで分割出来ないときはスペースで分割する。
//              現在はコメント
//              if(polyitem[1] === "") {
//                 polyitem2 = polytext[y].split(" ");
//                 polyitem  = polyitem2;
//              }

        //2次元の配列(テーブル)に収納する。
            polyno = parseInt(polyitem[0]);
            polysu = parseInt(polyitem[1]);
            for(x=0; x
               polygonzh[polyno-1][x].flag = 1;
               polygonzh[polyno-1][x].polyx = parseInt(polyitem[x+2].substr(0,3));
               polygonzh[polyno-1][x].polyy = parseInt(polyitem[x+2].substr(4,3));
            }
            polyysu = polyysu + 1;
        }
     }
}


//ロボットデータの読込
function robot_load(){


//テキストエリアからロボットデータを取り込む。
    robotarea = document.myFORM.myTEXT.value;

//ロボットエリアのデーターを改行(¥n)で分ける。
//行ごとにテーブルに入る。
    robottext = robotarea.split("\n");


//bhの数だけテーブル(配列)にする。(ちなみにhはハイ(高さ)です)
    robotcode = new Array(bhr);
    for(y=0; y

        if(robottext[y].substr(0,2) === "EE") break;
    //bwの数だけテーブル(配列)にする。(ちなみにwはワイド(幅)です)
    //行を項目に分ける。(¥t)タブで分ける。

        if((robottext[y].substr(0,2) != "DD") && (robottext[y].substr(0,2) != "MM")){
            robotsu = robotsu + 1;
            robotcode[robotsu-1] = new Array(bwr);
//           タブで分割出来ないときはスペースで分割する。
//           現在はコメント
//            if(robottext[y].index0f("\t") === -1){
//                robotitem = robottext[y].split(" ");
//            } else {
//                robotitem = robottext[y].split("\t");
//            }
            robotitem = robottext[y].split("\t");
            for(x=0; x
          //2次元の配列(テーブル)に収納する。

                robotcode[robotsu -1][x] = robotitem[x];
          //lengthは、テーブル(配列)の数です。
          //ー1は、0から数えるので-1します。
            }
        }
    }

//接合部の座標を計算する。
    //接合点テーブルの初期定義
    jointbl = new Array(joinsumax);
    for(y=0; y
        jointbl[y] = new piece;
    }

    for(y=0; y
        //テーブル(配列)から接合点テーブルを編集する。
        //リアルの接合点の位置を算出する
       if(robotcode[y][0] === "11") {
          idy = y;
          join_calculate();
       }
    }

}

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする