Розмір відео: 1280 X 720853 X 480640 X 360
Показувати елементи керування програвачем
Автоматичне відтворення
Автоповтор
【追記】サンプルを数行だけ改良して、ひよこ？がタイルの裏へ回れるようになりました🐤
数学とプログラミングの基礎が学べる素晴らしい動画です。偶然にも中学生の子供が「JavaScript でゲームを作ってみたい」と言っていたので、丁度よかったです。
このチャンネル好きです
等角図、勉強になります。
9:46 ハッピーバースデーのアレンジのようなBGM
なるほどの連続です！何回も見直して理解を深めます！
見直してもわからない所があれば、遠慮なく質問してくださいね！動画がガバっていることもあるので・・・（1敗）
勉強になります。ありがとうございます。
こんなところにスタジオしまづ！
凄いチャンネルを発見してしまい興奮しています！最後の〆のところで50人登録っておっしゃっていますが、半年ちょっとでもう3万人ですね！凄い凄い！これから全部見ます！仕事で役に立つテクニック満載で非常にためになります！ところで、課題のところで「ガバ」って単語が出てきますが、バグみたいな意味でいいんでしょうか？（ガバガバのガバ？）あと、JavaScriptでゲームを作りながら実はオブジェクト指向プログラミングの概念がわかっちゃいますって感じの講座をお願いしたいです！
ガバは「やらかし」「ミス」を意味するネットスラングです🐤（なお語源をたどっていくと……）しばらくはチャンネルの趣旨である「数学×プログラミング」の動画が主になると思いますが、いずれプログラミング主体の動画も作りたいですね。
@@heron-no-suugaku ご返信ありがとうございます！応援しています！
You are cool. learned alot and reviewed what i learned!!! Thank You
いつも通りBGMが不穏で安心した
素晴らしいですね
原点からの floor(x) + floor(y) が小さい順にタイルを描画して、let max_distance = lengthX + lengthY - 1;for (int dist = 0; dist < max_distance; dist++) { for (int x=0; x= lengthX || dist-x >= lengthY) continue; tile[dist-x][x].draw() if (floor(player.x) === x && floor(player.y) === dist-x) player.draw() }}みたいな感じじゃダメですかね？でも、そうするとひよこの体がタイルからはみ出してる時、隣のタイルの上に描画されたりされなかったり問題があるのか……？ひよこの体の幅を考えて、タイルの当たり判定にある程度マージンがあれば大丈夫かな。難しい
実は数日前にそれに気づいて、サンプルを書き直したのです🐤ご推察の通り、いくつかエッジケースはありますね（影が隠れる、ひよこがはみ出る、etc）
すごくわかりやすい動画ありがとうございます。質問なのですが、クォータービュー上で弓矢のような放物線を描くにはどんなアルゴリズムが考えられますか？学生時代に実装しようとして挫折してしまいました、、、
いったんクォータービューは置いといて、普通の空間（ユークリッド空間）で矢の動きを考えてその座標(x,y,z)を、 11:02 で紹介している式 xa+yb+zc（a,b,cはクォータービューを描くための2次元ベクトル、 8:45 の原点から生えてるやつ）を用いて変換すればいいですね🐤3次元だと話がややこしくなるので、ここではx座標を0に固定します例えば、矢の座標(0,y,z)を求めるには……www.wakariyasui.sakura.ne.jp/p/mech/rakutai/suihei.htmlこの水平投射が使えそうです。そのままでは使えませんが、2つの軸をそれぞれ「矢の向きの軸」「重力の向きの軸」として抽象的に見るとまず重力の向きは-z軸が対応しそうですね。矢の向きは、y軸を対応させるのが一番簡単でしょう。対応を決めたら、↑のページで求めたxをy、yを-zとしてやれば、「y軸に並行に投げた矢の動き」が求まります。あとはいま求めた(0,y,z)を xa+yb+zc に代入すると、クォータービューのどこに矢を描けば良いかが求まります。🐤
@@heron-no-suugaku めっちゃ早い返信ありがとうございます！返信を参考にしながら実装してみようと思います。ありがとうございます！！
BGMの使い方とかドバーッすき
0:44ここカカポ
FFタクティクス思い出しました。こういう動画を見せると、学生の数学への抵抗感も減るんじゃないかと思いました。もっと早く出会いたかった…。
I rlly enjoy this dud
カメラ側からひよこよりも高いパネルがあった場合に、ひよこを消すor半透明にするという処理を入れれば何となくいけそうな気がする。ただ、それだけだと、ひよこがパネルの半分移動したときどうするの？ということにもなるのか・・・難しい。
このプログラムのひよこをキャラチップに置き換えるとなるとどのようなプログラムになるのでしょうか？最近javascriptを始めたてで、、、。無知で申し訳ありません。
ChickenDrawerクラスのdraw関数の中身を全部消して、image関数で画像を描けばできます🐤細かいやり方については、こちら↓が参考になるかと思います。qiita.com/SakaDKyo/items/7c3e766c7cbef7d452ac
@@heron-no-suugaku ご丁寧にありがとうございます！
@@heron-no-suugaku let chicken;let img;function preload() { img = loadImage(ひよこの画像)}class ChickenDrawer{ /** * ひよこ？を描画するコマンド * @param {Vec2} pos 足元の位置ベクトル * @param {number} angle Z軸の角度 * @param {number} animFrame アニメーションの何フレーム目を再生するか * @param {number} depth */ constructor(x, y, image) { this.x = x; this.y = y; this.image = image } draw() { image(this.image, this.x, this.y, this.image.width, this.image.height); } }こういうことでは無いですよね。理解できていなくてすみません。
@@けけ-t7i2clet img;function preload() { img = loadImage(ひよこの画像);}↑を追加するのは合ってます。constructorを弄ってしまっていますが、何も弄らなくて大丈夫です（むしろ弄るとマズいです）上手くいかない理由は、せっかく読み込んだimgを使わずにthis.imageとしてしまっているせいかなと思います。追記：近々勉強会を行います。Zoomでリアルタイムにご相談いただけます。チャットだけでは分かりづらいところですから、ぜひ参加ご検討いただければと思います。🐤heron-no-suugaku.sakura.ne.jp/
@@heron-no-suugaku 一定方向しか向きませんがなんとかキャラクターが動くことができました！ご丁寧にありがとうごさまいました。また機会があれば勉強会参加させて頂きます。
「メインループ」って古いのか…()
ゲームエンジンが普及してから死語になっちゃいましたね・・
裏に回ったらゲーム的に行くと消さなくていい気がしますどっちかというと見せ方を変えたほうがゲームっぽいですねよくあるポケモンの洞窟みたいにプレイヤーの周りを暗くして裏に回ったよって感じで見せたほうがプレイヤー位置もわかるのでユーザーが操作に困らなくて済みそうですね
Çok teşekkürler. Tileset nasıl yapılır hep merak ediyordum. this.video = sugoi;
Qバート作れるじゃん！
どうでもいいけどvertexの複数形はverticesらしい
ぼくには わからないが ゆいいつわかったのは こいつはすごい ということです
ヒヨコちゃんがまさか絵ではなかったと
一応余接は大学の範囲ですね多分数学3まで履修してる人は知ってる人がほとんどだと思いますが
ここまで見てきたけど、イントネーションが気になって笑えてなにも頭に入ってこないw
登録しました宜しくお願いします
なんでプログラミングの世界だけ「矩形（くけい）」という死語で呼ぶのでしょうかね？ 現代の小中学校では「長方形」としか習わないのに。
私が昔先輩から教わったところでは、プログラミング畑では長方形と矩形は別のものだそうです。長方形のうち、水平であるものを矩形と呼ぶ慣習があるとか。ただ検索しても出てこないので真偽はちょっと怪しいです。その職場だけのローカルな慣習か、あるいは先輩が私に嘘を教えて可笑しんでいただけかも知れません。
【追記】サンプルを数行だけ改良して、ひよこ？がタイルの裏へ回れるようになりました🐤
数学とプログラミングの基礎が学べる素晴らしい動画です。
偶然にも中学生の子供が「JavaScript でゲームを作ってみたい」と言っていたので、丁度よかったです。
このチャンネル好きです
等角図、勉強になります。
9:46 ハッピーバースデーのアレンジのようなBGM
なるほどの連続です！何回も見直して理解を深めます！
見直してもわからない所があれば、遠慮なく質問してくださいね！
動画がガバっていることもあるので・・・（1敗）
勉強になります。ありがとうございます。
こんなところにスタジオしまづ！
凄いチャンネルを発見してしまい興奮しています！最後の〆のところで50人登録っておっしゃっていますが、半年ちょっとでもう3万人ですね！凄い凄い！これから全部見ます！仕事で役に立つテクニック満載で非常にためになります！
ところで、課題のところで「ガバ」って単語が出てきますが、バグみたいな意味でいいんでしょうか？（ガバガバのガバ？）
あと、JavaScriptでゲームを作りながら実はオブジェクト指向プログラミングの概念がわかっちゃいますって感じの講座をお願いしたいです！
ガバは「やらかし」「ミス」を意味するネットスラングです🐤（なお語源をたどっていくと……）
しばらくはチャンネルの趣旨である「数学×プログラミング」の動画が主になると思いますが、いずれプログラミング主体の動画も作りたいですね。
@@heron-no-suugaku ご返信ありがとうございます！応援しています！
You are cool. learned alot and reviewed what i learned!!! Thank You
いつも通りBGMが不穏で安心した
素晴らしいですね
原点からの floor(x) + floor(y) が小さい順にタイルを描画して、
let max_distance = lengthX + lengthY - 1;
for (int dist = 0; dist < max_distance; dist++) {
for (int x=0; x= lengthX || dist-x >= lengthY) continue;
tile[dist-x][x].draw()
if (floor(player.x) === x && floor(player.y) === dist-x) player.draw()
}
}
みたいな感じじゃダメですかね？
でも、そうするとひよこの体がタイルからはみ出してる時、隣のタイルの上に描画されたりされなかったり問題があるのか……？
ひよこの体の幅を考えて、タイルの当たり判定にある程度マージンがあれば大丈夫かな。
難しい
実は数日前にそれに気づいて、サンプルを書き直したのです🐤
ご推察の通り、いくつかエッジケースはありますね（影が隠れる、ひよこがはみ出る、etc）
すごくわかりやすい動画ありがとうございます。質問なのですが、クォータービュー上で弓矢のような放物線を描くにはどんなアルゴリズムが考えられますか？学生時代に実装しようとして挫折してしまいました、、、
いったんクォータービューは置いといて、普通の空間（ユークリッド空間）で矢の動きを考えて
その座標(x,y,z)を、 11:02 で紹介している式 xa+yb+zc（a,b,cはクォータービューを描くための2次元ベクトル、 8:45 の原点から生えてるやつ）
を用いて変換すればいいですね🐤
3次元だと話がややこしくなるので、ここではx座標を0に固定します
例えば、矢の座標(0,y,z)を求めるには……
www.wakariyasui.sakura.ne.jp/p/mech/rakutai/suihei.html
この水平投射が使えそうです。
そのままでは使えませんが、2つの軸をそれぞれ「矢の向きの軸」「重力の向きの軸」として抽象的に見ると
まず重力の向きは-z軸が対応しそうですね。矢の向きは、y軸を対応させるのが一番簡単でしょう。
対応を決めたら、↑のページで求めたxをy、yを-zとしてやれば、「y軸に並行に投げた矢の動き」が求まります。
あとはいま求めた(0,y,z)を xa+yb+zc に代入すると、クォータービューのどこに矢を描けば良いかが求まります。🐤
@@heron-no-suugaku めっちゃ早い返信ありがとうございます！返信を参考にしながら実装してみようと思います。ありがとうございます！！
BGMの使い方とかドバーッすき
0:44
ここカカポ
FFタクティクス思い出しました。こういう動画を見せると、学生の数学への抵抗感も減るんじゃないかと思いました。もっと早く出会いたかった…。
I rlly enjoy this dud
カメラ側からひよこよりも高いパネルがあった場合に、
ひよこを消すor半透明にするという処理を入れれば何となくいけそうな気がする。
ただ、それだけだと、ひよこがパネルの半分移動したときどうするの？ということにもなるのか・・・難しい。
このプログラムのひよこをキャラチップに置き換えるとなるとどのようなプログラムになるのでしょうか？最近javascriptを始めたてで、、、。無知で申し訳ありません。
ChickenDrawerクラスのdraw関数の中身を全部消して、image関数で画像を描けばできます🐤
細かいやり方については、こちら↓が参考になるかと思います。
qiita.com/SakaDKyo/items/7c3e766c7cbef7d452ac
@@heron-no-suugaku ご丁寧にありがとうございます！
@@heron-no-suugaku
let chicken;
let img;
function preload() {
img = loadImage(ひよこの画像)
}
class ChickenDrawer{
/**
* ひよこ？を描画するコマンド
* @param {Vec2} pos 足元の位置ベクトル
* @param {number} angle Z軸の角度
* @param {number} animFrame アニメーションの何フレーム目を再生するか
* @param {number} depth
*/
constructor(x, y, image) {
this.x = x;
this.y = y;
this.image = image
}
draw() {
image(this.image, this.x, this.y, this.image.width, this.image.height);
}
}
こういうことでは無いですよね。
理解できていなくてすみません。
@@けけ-t7i2c
let img;
function preload() {
img = loadImage(ひよこの画像);
}
↑を追加するのは合ってます。
constructorを弄ってしまっていますが、何も弄らなくて大丈夫です（むしろ弄るとマズいです）
上手くいかない理由は、せっかく読み込んだimgを使わずにthis.imageとしてしまっているせいかなと思います。
追記：近々勉強会を行います。Zoomでリアルタイムにご相談いただけます。チャットだけでは分かりづらいところですから、ぜひ参加ご検討いただければと思います。🐤
heron-no-suugaku.sakura.ne.jp/
@@heron-no-suugaku 一定方向しか向きませんがなんとかキャラクターが動くことができました！ご丁寧にありがとうごさまいました。また機会があれば勉強会参加させて頂きます。
「メインループ」って古いのか…()
ゲームエンジンが普及してから死語になっちゃいましたね・・
裏に回ったらゲーム的に行くと消さなくていい気がします
どっちかというと見せ方を変えたほうが
ゲームっぽいですね
よくあるポケモンの洞窟みたいに
プレイヤーの周りを暗くして裏に回ったよって感じで見せたほうが
プレイヤー位置もわかるのでユーザーが操作に困らなくて済みそうですね
Çok teşekkürler. Tileset nasıl yapılır hep merak ediyordum. this.video = sugoi;
Qバート作れるじゃん！
どうでもいいけどvertexの複数形はverticesらしい
ぼくには わからないが ゆいいつわかったのは こいつはすごい ということです
ヒヨコちゃんがまさか絵ではなかったと
一応余接は大学の範囲ですね
多分数学3まで履修してる人は知ってる人がほとんどだと思いますが
ここまで見てきたけど、イントネーションが気になって笑えてなにも頭に入ってこないw
登録しました宜しくお願いします
なんでプログラミングの世界だけ「矩形（くけい）」という死語で呼ぶのでしょうかね？ 現代の小中学校では「長方形」としか習わないのに。
私が昔先輩から教わったところでは、プログラミング畑では長方形と矩形は別のものだそうです。長方形のうち、水平であるものを矩形と呼ぶ慣習があるとか。
ただ検索しても出てこないので真偽はちょっと怪しいです。その職場だけのローカルな慣習か、あるいは先輩が私に嘘を教えて可笑しんでいただけかも知れません。