HSPTV!掲示板

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

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

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

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

過去ログにあったのをちょっと変えてみただけですが以下のようなスクリプトです。
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

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

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

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

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━・
		円ドラッグサンプル
──────────────────────────────
　製作者　　　：_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

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

追記。

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

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

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

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

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

・ドラッグ移動のソース(３)…モジュール型変数＋クリッピング
http://blog.goo.ne.jp/masaki_goo_2006/e/392e6640e5ae4717a18ef5a63843ba9c
↑
ちょっと新しいサンプルを作ってみました。
_endさんがモジュールを使ったサンプルを提示していたので、私はモジュール型変数で改良してみました。
ソースが長くなるので私のブログに載せてます。

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

分かれば良いのですが？

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

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

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

・HSP3.0 プログラミング・テキスト
http://masudahp.web.fc2.com/hsp3/index.html
↑
このサイトの「プログラミングの基礎」を参考に。
HSPのマニュアルだけでは不明な点が多いので。

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

科学太郎さんが作っていただいた範囲判定ですが、円の判定をする場合は

結果^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	;ループ終了

_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}	;遠ければ青色にする

ですよね。

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

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

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


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

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

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