HSPポータル
サイトマップ お問い合わせ


HSPTV!掲示板


未解決 解決 停止 削除要請

2015
0331
teruchi複数のドラッグについて16解決


teruchi

リンク

2015/3/31(Tue) 19:36:01|NO.68240

まだ半年未満の初心者です。例として直径50の円をX軸は同じでY軸に100のピッチで3個並べて、それぞれを別々にマウスでドラッグして動かせるようにできるスクリプトを教えてください。
過去ログなど調べたのですが見つからなかったのでよろしくお願いします。



この記事に返信する


科学太郎

リンク

2015/3/31(Tue) 20:07:54|NO.68241

> それぞれを別々にマウスでドラッグして動かせるようにできるスクリプトを教えてください。
まず最初に1つの円のドラッグ移動はできていますか?
ここを知りたいです。



teruchi

リンク

2015/3/31(Tue) 20:20:47|NO.68242

科学太郎様ありがとうございます。1個はいろいろ調べて分かりましたが、配列の部分が良く理解できていないので複数がうまくいきません。



kanahiron

リンク

2015/3/31(Tue) 20:53:16|NO.68245

その1個動かせるソースをここに載せれば改良してくれる方が居ると思いますよ
質問者さんの文章でそれぞれの人が一から作るとみんな違ったソースになり混乱していまうと思います



teruchi

リンク

2015/3/31(Tue) 21:07:59|NO.68246

過去ログにあったのをちょっと変えてみただけですが以下のようなスクリプトです。
myの部分で配列変数を使えばいいのかと思うのですが。

gx=50 : gy=50 ;原点
siz=50 ;サイズ
mx=0
my=0
*main
redraw 0
color 255,255,255 :boxf
stick stk,256
if stk&256 {
if mousex>=gx & mousex<=gx+siz & mousey>=gy & mousey<=gy+siz & drag=0{
drag=1

mx=mousex-gx : my=mousey-gy
}
}else{

drag=0
}
if drag {
gx=mousex-mx
gy=mousey-my
}
color
circle gx,gy,gx+siz,gy+siz
redraw
await 0
goto *main



科学太郎

リンク

2015/3/31(Tue) 22:15:05|NO.68250

> myの部分で配列変数を使えばいいのかと思うのですが。
ここではないですね。
配列にすべき点は、図形の座標ですから gx、gy を配列にすれば良いのです。
また、矩形の範囲調査も図形の数だけ行います。
もちろん描画部分でも図形の数だけ行います。

//------------------------------------------------------------------------------ // 科学太郎のサンプル for HSP(Ver.3.3.2) //============================================================================== // テーマ:ドラッグ移動 //------------------------------------------------------------------------------ //-------------------------------------- // 記号定数 //-------------------------------------- #const MAX_FACE (3) //-------------------------------------- // メイン部 //-------------------------------------- *Init dim FaceX,MAX_FACE dim FaceY,MAX_FACE dim FaceSize dim DragSw dim DragNo *Main screen 0,640,480,SCREEN_NORMAL title "ドラッグ移動" DragInit repeat redraw 0 DragFace DrawFace redraw 1 await(1000/60) loop stop //-------------------------------------- // 図形の初期化 //-------------------------------------- #deffunc DragInit DragSw=0 DragNo=0 FaceSize=50 foreach FaceX FaceX(cnt)=(ginfo_winX-FaceSize)/2 FaceY(cnt)=(ginfo_winY/MAX_FACE)*cnt+(ginfo_winY/MAX_FACE/2)-(FaceSize/2) loop return //-------------------------------------- // 図形のドラッグ移動 //-------------------------------------- #deffunc DragFace stick key,$100 if(key & $100){ if(DragSw==0){ x=mouseX y=mouseY foreach FaceX if(FaceX(cnt)<=x)and(x<=FaceX(cnt)+FaceSize){ if(FaceY(cnt)<=y)and(y<=FaceY(cnt)+FaceSize){ DragSw=1 DragNo=cnt mx=mouseX-FaceX(cnt) my=mouseY-FaceY(cnt) break } } loop } } else:if(DragSw){ DragSw=0 } if(DragSw){ FaceX(DragNo)=mouseX-mx FaceY(DragNo)=mouseY-my } if(DragSw):title strf("DragNo=%d",DragNo):else:title "" return //-------------------------------------- // 図形の描画 //-------------------------------------- #deffunc DrawFace color $FF,$FF,$FF:boxf foreach FaceX switch(cnt\3) case 0:color $FF,$00,$00:swbreak case 1:color $00,$FF,$00:swbreak case 2:color $00,$00,$FF:swbreak swend circle FaceX(cnt),FaceY(cnt),FaceX(cnt)+FaceSize,FaceY(cnt)+FaceSize,1 loop return //------------------------------------------------------------------------------ // End of newSample012.hsp //------------------------------------------------------------------------------
記号定数の MAX_FACE の値を 7 にすると 7 個になります。
とりあえず動かしてみて下さい。

なお、mx、my はドラッグするときの図形座標とマウス座標の差分を意味してます。
この変数はドラッグ中で1組しか必要がありません。
よって gx、gy の図形の座標を配列にするのです。
上記のサンプルでは FaceX、FaceY と名付けてます。



teruchi

リンク

2015/3/31(Tue) 22:51:36|NO.68252

ばっちりイメージしていたとおりの結果でした。ここまでとなるとやはり今のキャリアでは無理でした。
実はここからパズルゲームを作りたいと思っているのですがいつのことになるか。
でもじっくりとこのスクリプトを見て少しずつ理解していきたいと思います。
科学太郎様、kanahiron様、本当にありがとうございました。
また何か分からないことがあったらご指導ください。



_end

リンク

2015/4/1(Wed) 02:15:29|NO.68259

通りすがりの者です。
既に解決済みですが、ちょっと気になったので作ってみました。
参考に慣れれば幸いです。


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━・ 円ドラッグサンプル ──────────────────────────────  製作者   :_end  作成日   :2015/04/01  利用規約  :再配布、改造、改造配布自由です! ──────────────────────────────  ●使い方   円をマウスでドラッグします。   それだけですっ ( ・`ω・´) ──────────────────────────────・*/ #module /*━━━━━━━━━━ キー入力設定(簡単に取得できるようにするためのもの) v1=キーを取得する変数 v1(キーコード)=状態(0以下=押されていない 0以上=押されている) ──────────*/ #deffunc _getkey array v1 , local Key repeat 200 ;とりあえず20まで getkey Key,cnt ;キーの取得 if Key{ ;キーが押されている if v1(cnt)<0 :v1(cnt)=0 v1(cnt)++ ;増加 } else{ ;キーが押されていない if v1(cnt)>0 :v1(cnt)=0 v1(cnt)-- ;減少 } loop return ;戻る /*━━━━━━━━━━ 初期化 ────────── Dataフラグ内容 0=位置X 1=位置Y 2=サイズ(半径) 3=色R 4=色G 5=色B ──────────*/ #deffunc Init_main //----変数初期化 MAX_Circle=4 ;円の最大数 dim Data,MAX_Circle,10 ;Data(ID,フラグ) dim Key,200 ;キー入力 DragId=-1 ;ドラッグしているID(-1=選択されていない 0以上=選択されている) OfsetX=0 ;選択位置のオフセットX(円からマウスまでの距離) OfsetY=0 ;選択位置のオフセットY //----円の作成 ;位置X :位置Y :サイズ(半径) :色R :色G :色B Data(0,0)=100 :Data(0,1)=100 :Data(0,2)=50+rnd(50) :Data(0,3)=rnd(256) :Data(0,4)=rnd(256) :Data(0,5)=rnd(256) Data(1,0)=300 :Data(1,1)=100 :Data(1,2)=50+rnd(50) :Data(0,3)=rnd(256) :Data(1,4)=rnd(256) :Data(1,5)=rnd(256) Data(2,0)=100 :Data(2,1)=300 :Data(2,2)=50+rnd(50) :Data(0,3)=rnd(256) :Data(2,4)=rnd(256) :Data(2,5)=rnd(256) Data(3,0)=300 :Data(3,1)=300 :Data(3,2)=50+rnd(50) :Data(0,3)=rnd(256) :Data(3,4)=rnd(256) :Data(3,5)=rnd(256) return ;戻る /*━━━━━━━━━━ 処理 ──────────*/ #deffunc Prcs_main _getkey Key ;キーの取得 //----クリックした直前 if Key(1)=1{ DragId=-1 ;初期化 repeat MAX_Circle ;円の数だけループ if sqrt(powf(mousex-Data(cnt,0),2) + powf(mousey-Data(cnt,1),2)) < Data(cnt,2) { DragId=cnt ;IDの指定 OfsetX=Data(cnt,0)-mousex ;オフセットX OfsetY=Data(cnt,1)-mousey ;オフセットY ;break } loop } //----クリック長押し if Key(1)>0{ if DragId>-1{ ;IDが選択されてる場合 Data(DragId,0)=mousex+OfsetX ;円の移動X Data(DragId,1)=mousey+OfsetY ;円の移動Y } } return ;戻る /*━━━━━━━━━━ 描画 ──────────*/ #deffunc View_main redraw 0 ;描画停止 //----円の描画 color 255,255,255 :boxf ;画面初期化 repeat MAX_Circle ;円の数だけループ color Data(cnt,3) , Data(cnt,4) , Data(cnt,5) ;カラー指定 circle Data(cnt,0)-Data(cnt,2) , Data(cnt,1)-Data(cnt,2) , Data(cnt,0)+Data(cnt,2) , Data(cnt,1)+Data(cnt,2),1 ;円の描画 loop //----ゲージ? pos 10,11 :color 255,255,255 :font "",36 :mes "円をドラッグしてみてね(^^)" pos 11,10 :color :font "",36 :mes "円をドラッグしてみてね(^^)" //----タイトルバー(一応表示処理なので、とりあえず描画と一緒にしてます。) if DragId>-1{ ;IDが選択されてる場合 if Key(1)>0 :title "ドラッグ中 ID="+DragId if Key(1)<0 :title "ドラッグしていません" } redraw 1 ;描画再開 return ;戻る #global ;モジュール終了 /*━━━━━━━━━━ メイン処理 ──────────*/ randomize ;乱数発生用 Init_main ;初期化 repeat Prcs_main ;処理 View_main ;描画 await 16 loop



teruchi

リンク

2015/4/1(Wed) 09:56:49|NO.68261

_end様ありがとうございます。初心者なので前のスクリプトとどこが同じでどこが違うのか
まだ良く理解できません。時間をかけて勉強してみます。お手数かけて申し訳ありませんでした。



科学太郎

リンク

2015/4/1(Wed) 17:41:34|NO.68273

追記。

> ばっちりイメージしていたとおりの結果でした。ここまでとなるとやはり今のキャリアでは無理でした。
ばっちりでしたか?
今日になり不具合があることに気づきましたが…。

> _end様ありがとうございます。初心者なので前のスクリプトとどこが同じでどこが違うのか
> まだ良く理解できません。時間をかけて勉強してみます。お手数かけて申し訳ありませんでした。
私の提示したサンプルは、モジュールの書き方をしてません。
HSPを入門したばかりなので配列とユーザ定義命令のみです。

_endさんのは、私の書いたユーザ定義命令をモジュールにしたのでしょう。
あと円形キャラクタの半径、赤色、緑色、青色の情報を個々に管理できるように拡張してますね。
私のサンプルに FaceX、FaceY のほかに FaceR、FaceG、FaceB とか、FaceSize を配列にしてもいいでしょう。

*Init dim FaceX,MAX_FACE dim FaceY,MAX_FACE dim FaceR,MAX_FACE dim FaceG,MAX_FACE dim FaceB,MAX_FACE dim FaceSize,MAX_FACE dim DragSw dim DragNo *Main
こんな感じにすれば、円形キャラクタ1個ずつに色の指定と半径を管理できます。
あと私のサンプルの不具合が改善されてますね。

●バグ1
円形以外の場所でマウスの左ボタンを押しながら円形に近づくと円形がドラッグしてしまう不具合があるようです。
どうやら「背景がドラック中」かどうかを何らかの方法でチェックして、処理する必要があるようです。

●バグ2
円形の重なり具合で手前の緑丸を移動しようとしても、隠れてた赤丸がドラッグ移動してしまう不具合もあるようです。
円形の重なり具合は、配列の先頭からチェックしてるので、配列の先頭に位置する赤丸が移動するのでしょうね。

・ドラッグ移動のソース(1)…配列タイプ
http://blog.goo.ne.jp/masaki_goo_2006/e/650a67bf32abddad83f9a7e25a070e6c

・ドラッグ移動のソース(2)…モジュール型変数
http://blog.goo.ne.jp/masaki_goo_2006/e/da024d5c0250ca5474ea60e91203b4ff

・ドラッグ移動のソース(3)…モジュール型変数+クリッピング
http://blog.goo.ne.jp/masaki_goo_2006/e/392e6640e5ae4717a18ef5a63843ba9c

ちょっと新しいサンプルを作ってみました。
_endさんがモジュールを使ったサンプルを提示していたので、私はモジュール型変数で改良してみました。
ソースが長くなるので私のブログに載せてます。

実行するときは modBallClass.as、modDragManager.as、newSample013.hsp の3つに保存するか、
newSample013.hsp のソースにある
「#include "modBallClass.as"」部分に直接 modBallClass.as の内容を挿入したり、
「#include "modDragManager.as"」部分にも直接 modDragManager.as の内容を挿入します。

分かれば良いのですが?



teruchi

リンク

2015/4/1(Wed) 19:53:26|NO.68275

科学太郎様 遅くなりましたが重ね重ねありがとうございます。
いただいたスクリプトの分からないコマンドをマニュアルで確認していました。
指摘されたバグには全然気がつきませんでした。それとモジュール型変数と言われても良く分かりません。
ネットで検索したら初心者にはまだ早いようなことが書いてありました。
今はまずお二人に頂いたスクリプトを完全に理解することが先決だと思います。
お忙しいところご丁寧に指導していただきありがとうございました。



科学太郎

リンク

2015/4/2(Thu) 10:49:36|NO.68307

> ネットで検索したら初心者にはまだ早いようなことが書いてありました。
はい。
その通りです。

> 今はまずお二人に頂いたスクリプトを完全に理解することが先決だと思います。
そうですね。
HSPのsampleフォルダに大量のソースがありますので、
マニュアルで確認したらソースを覗いてみると良いでしょう。

・HSP3.0 プログラミング・テキスト
http://masudahp.web.fc2.com/hsp3/index.html

このサイトの「プログラミングの基礎」を参考に。
HSPのマニュアルだけでは不明な点が多いので。



_end

リンク

2015/4/2(Thu) 12:13:02|NO.68311

あと、円のドラッグの判定について、少しアドバイスします。
※あくまで私が思ったことです。

科学太郎さんが作っていただいた範囲判定ですが、円の判定をする場合は
結果^2 = x^2 + y^2

で求めた方が良いかと思います。 ※[^2]は二乗です。 また、移行すると
結果 = √(x^2 + y^2)
このようになります。
結果が円のサイズ(半径)よりも小さければ、マウスは円に当たっている事になります。


/*━━━━━━━━━━ 変数初期化 ──────────*/ posx=200 ;位置X(円の中心) posy=200 ;位置Y size=100 ;円のサイズ(半径) /*━━━━━━━━━━ メインループ ──────────*/ repeat ;ループ redraw 0 ;メイン画面への描画を一時停止 color 255,255,255 :boxf ;背景を初期化 //----線をマウスの動きに合わせて描画 color ;色の指定 line 0,mousey,640,mousey line mousex,0,mousex,480 //----円の描画 ds=sqrt( (posx-mousex) * (posx-mousex) + (posy-mousey) * (posy-mousey) ) ;円の中心からマウスの位置までの距離を取得 if size<ds{color 255,0,0} ;距離が円のサイズより小さければ赤色にする else{color 0,0,255} ;遠ければ青色にする circle posx-size , posy-size , posx+size , posy+size , 1 ;円の描画 title "マウス位置X="+mousex+" マウス位置Y="+mousey+" 円とマウスの距離="+ds //----後処理 redraw 1 ;メイン描画への描画を再開 await 16 loop ;ループ終了



科学太郎

リンク

2015/4/2(Thu) 13:26:56|NO.68313

_endさんへ
> 結果^2 = x^2 + y^2
とか
> 結果 = √(x^2 + y^2)
は左辺に記述すべきというアドバイスでしょうか。

if(半径*半径)>(横差分×横差分+縦差分×縦差分):mes "円形内"
つまり

if(m_n*m_n)>(x*x+y*y):mes "円形内"



ds=sqrt( (posx-mousex) * (posx-mousex) + (posy-mousey) * (posy-mousey) ) ;円の中心からマウスの位置までの距離を取得 if size<ds{color 255,0,0} ;距離が円のサイズより小さければ赤色にする else{color 0,0,255} ;遠ければ青色にする
これは

ds=sqrt( (posx-mousex) * (posx-mousex) + (posy-mousey) * (posy-mousey) ) ;円の中心からマウスの位置までの距離を取得 if size>ds{color 255,0,0} ;距離が円のサイズより小さければ赤色にする else{color 0,0,255} ;遠ければ青色にする
ですよね。



_end

リンク

2015/4/2(Thu) 14:30:37|NO.68314

>>if(半径*半径)>(横差分×横差分+縦差分×縦差分):mes "円形内"
もちろんこれでもOKです。
わざわざ√を使った理由は、距離について分かりやすく解説しようと思ったからです。

>>は左辺に記述すべきというアドバイスでしょうか。
いいえ。
ちなみに私が伝えたかったことは、円の当たり判定について、詳しく知ってほしかったからです。

>>これは〜ですよね。
すみません。間違っていました。
その通りです。


勘違いしていたら申し訳ないです。



科学太郎

リンク

2015/4/2(Thu) 15:57:37|NO.68319

> わざわざ√を使った理由は、距離について分かりやすく解説しようと思ったからです。
そうでしたか。
それで sqrt を使っていたのですね。
なるほど。



teruchi

リンク

2015/4/2(Thu) 17:24:32|NO.68321

はるか雲の上のことですが盛り上がっているようでなんか嬉しいような。
いつになったらその会話に加わることができるのか…。
でも一つ分かったのは矩形と円とでは大きな違いがあることです。
矩形だったらこんなにややこしくはならなかったですよね。
科学太郎様 ブログのスクリプトを確認できました。色々とやられているようで驚きました。
これからも頑張ってください。
_end様もありがとうございました。



ONION software Copyright 1997-2021(c) All rights reserved.