トップページ > 記事閲覧
画像の円弧変形
名前:たろう 日時: 2017/05/24 00:06

画像の円弧変形というのは難しいでしょうか? フォトショップで言うところの「ワープ変形」の「円弧」なのですが 私の作ったソフトは丸い地球に建物が立っているイメージで、 扇状に上に行くほど建物が大きく表示される感じになっています。 普通に四角く描いた建物をフォトショップで円弧変形して DXlibで読み込んでいるのですが、DXlibで変形できれば 作業効率が凄く良くなります。 もちろんフォトショップでなんとかなっていますし 次に作るソフトで使えたら使いたいと思っているだけなので、 もし容易でしたらで結構です。 図々しくてすみません。 失礼します。 m(_ _)m
メンテ

Page: 1 |

Re: 画像の円弧変形 ( No.1 )
名前:管理人 日時:2017/05/24 00:12

すみません、似ているようで別の話題でしたので、専用にスレッドを立てました 円弧変形は実装可能ですが、微妙に需要があるのか不明でしたので、とりあえず既存の 2Dポリゴンを描画する関数で円弧変形を行う関数を組んでみましたので、よろしければ こちらのプログラムの関数 DrawWarpGraph を使ってみてください m(_ _)m プログラムの内容としては「MakeScreen で作成した仮画面に『上下左右に跳ね回る四角形』を 大量に描画して、その仮画面を DrawWarpGraph で扇形に変形して画面に描画する」 といったものとなっています #include "DxLib.h" #include <math.h> // 変形描画用の頂点の横方向の数 #define WVERTNUM 64 // 変形描画用の頂点の縦方向の数 #define HVERTNUM 16 // 変形描画用の頂点の配列 VERTEX2D Vertex[ WVERTNUM ][ HVERTNUM ] ; // 変形描画用の頂点インデックスの配列 unsigned short Index[ ( WVERTNUM - 1 ) * ( HVERTNUM - 1 ) * 6 ] ; // 扇形変形描画を行う関数 void DrawWarpGraph( float CenterX, float CenterY, // 扇の円の中心座標 float Angle, // 扇を描く角度の範囲( 単位:ラジアン ) float NearR, float FarR, // 扇を描く円の内側の半径と外側の半径 int GrHandle ) // 扇状に描くグラフィックハンドル { float VSize ; int GraphW, GraphH ; int TextureW, TextureH ; unsigned short *ind ; int i, j ; float r ; float ang ; float Cos, Sin ; COLOR_U8 white = GetColorU8( 255,255,255,255 ) ; // 扇の縦幅を算出 VSize = FarR - NearR ; // 内側の半径の値の方が外側の半径の値より大きかったらエラー if( VSize <= 0.0f ) { return ; } // グラフィックハンドルの画像のサイズを取得 GetGraphSize( GrHandle, &GraphW, &GraphH ) ; // グラフィックハンドルのテクスチャのサイズを取得 GetGraphTextureSize( GrHandle, &TextureW, &TextureH ) ; // 扇状に描くための頂点の準備 for( i = 0 ; i < WVERTNUM ; i ++ ) { // 頂点を配置する角度を計算 ang = -DX_PI_F / 2 - Angle / 2.0f + Angle / ( WVERTNUM - 1 ) * i ; Cos = cos( ang ) ; Sin = sin( ang ) ; for( j = 0 ; j < HVERTNUM ; j ++ ) { // 半径の計算 r = FarR - VSize / ( HVERTNUM - 1 ) * j ; // 座標の計算、扇状に頂点が並ぶようにする Vertex[ i ][ j ].pos.x = Cos * r + CenterX ; Vertex[ i ][ j ].pos.y = Sin * r + CenterY ; // 固定値 Vertex[ i ][ j ].pos.z = 0.0f ; Vertex[ i ][ j ].rhw = 1.0f ; // 頂点カラーは真っ白 Vertex[ i ][ j ].dif = white ; // UV値の計算 Vertex[ i ][ j ].u = ( float )GraphW / ( WVERTNUM - 1 ) * i / ( float )TextureW ; Vertex[ i ][ j ].v = ( float )GraphH / ( HVERTNUM - 1 ) * j / ( float )TextureH ; } } // 頂点インデックスの準備 ind = Index ; for( i = 0 ; i < WVERTNUM - 1 ; i ++ ) { for( j = 0 ; j < HVERTNUM - 1 ; j ++ ) { // 各ポリゴンの頂点番号をセット ind[ 0 ] = j + i * HVERTNUM ; ind[ 1 ] = j + ( i + 1 ) * HVERTNUM ; ind[ 2 ] = j + 1 + i * HVERTNUM ; ind[ 3 ] = j + 1 + ( i + 1 ) * HVERTNUM ; ind[ 4 ] = ind[ 2 ] ; ind[ 5 ] = ind[ 1 ] ; ind += 6 ; } } // 扇状に描くためのポリゴン群を描画 DrawPolygonIndexed2D( &Vertex[ 0 ][ 0 ], WVERTNUM * HVERTNUM, Index, ( WVERTNUM - 1 ) * ( HVERTNUM - 1 ) * 2, GrHandle, FALSE ) ; } // 画面を飛び回るオブジェクトの数 #define OBJNUM 1000 // 画面を飛び回るオブジェクトの情報 struct Obj { int x, y ; int xadd, yadd ; int size ; int color ; } ; // 画面を飛び回るオブジェクトの情報の配列 Obj obj[ OBJNUM ] ; int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow ) { int ScreenHandle ; int i ; // ウインドウモードで起動 ChangeWindowMode( TRUE ); // DXライブラリの初期化 if( DxLib_Init() < 0 ) return -1 ; // 仮画面を作成 ScreenHandle = MakeScreen( 640, 480, 32 ) ; // 画面を飛び回るオブジェクトの情報を準備 for( i = 0 ; i < OBJNUM ; i ++ ) { obj[ i ].x = GetRand( 640 ) ; obj[ i ].y = GetRand( 480 ) ; obj[ i ].xadd = GetRand( 3 ) + 1 ; if( GetRand( 100 ) < 50 ) obj[ i ].xadd = -obj[ i ].xadd ; obj[ i ].yadd = GetRand( 3 ) + 1 ; if( GetRand( 100 ) < 50 ) obj[ i ].yadd = -obj[ i ].yadd ; obj[ i ].size = GetRand( 8 ) + 8 ; obj[ i ].color = GetColor( GetRand( 255 ), GetRand( 255 ), GetRand( 255 ) ) ; } // メインループ while( ProcessMessage() == 0 ) { // 描画先を仮画面に設定 SetDrawScreen( ScreenHandle ) ; // 画面クリア ClearDrawScreen() ; // オブジェクトを動かす+描画 for( i = 0 ; i < OBJNUM ; i ++ ) { obj[ i ].x += obj[ i ].xadd ; if( obj[ i ].x < 0 || obj[ i ].x > 640 ) obj[ i ].xadd = -obj[ i ].xadd ; obj[ i ].y += obj[ i ].yadd ; if( obj[ i ].y < 0 || obj[ i ].y > 480 ) obj[ i ].yadd = -obj[ i ].yadd ; DrawBox( obj[ i ].x - obj[ i ].size, obj[ i ].y - obj[ i ].size, obj[ i ].x + obj[ i ].size, obj[ i ].y + obj[ i ].size, obj[ i ].color, TRUE ) ; } // 描画先を裏画面にする SetDrawScreen( DX_SCREEN_BACK ) ; // 仮画面に描画した内容を扇状に描画 DrawWarpGraph( 320.0f, 680.0f, DX_PI_F / 2.0f, 270.0f, 600.0f, ScreenHandle ) ; // 裏画面の内容を表画面に反映する ScreenFlip() ; } // DXライブラリの後始末 DxLib_End(); // ソフトの終了 return 0; }
メンテ
Re: 画像の円弧変形 ( No.2 )
名前:たろう(解決) 日時:2017/05/24 03:08

ありがとうございます!! たろうです。 早速試しました。完全にフォトショップの円弧変形と同じ変形を再現できました。 というより使い勝手はむしろ上かもしれません。ありがたく使わせていただきます!! 完璧なので、私としては専用のものを実装していただかなくても大丈夫です。 すでにあるもので再現できるとは思いもよらず 何度目でしょうか、またお手数をおかけしてしまいました。いつもすみませんm(_ _)m ありがとうございました!!
メンテ

Page: 1 |

題名
名前
コメント
パスワード (記事メンテ時に使用)

   クッキー保存