Original
Shooting Stars
One part that isn’t even defined in my game but I know its a MUST its a shooting mini-game, I mean, if you are in a spaceship and you can’t shoot its a boring game, specially when the main idea of your game its being a rail shooter.
So my approach was easy, I just need to draw on screen the lasers and the ship, nothing hard, for this ill define the position of each shooter and then set the end of the line to the center of the crosshair. With a little of parameters magic and simple math, like really simple. Pium Pium.
Setting up
First I created 3 objects, a ship, a crosshair and a “mini” ship all of them react to the d-pad movement, the ship just rotates and change the asset depending of the button you press, and the crosshair just moves around the screen.
For the crosshair I set simple conditions to make it back to the center of the screen, its literally a counter backwards that change the position to the center, not even when you release the button, its always going back to the center. At this point I was thinking of having a big picture of the ship as part of the UI, so when you receive damage you see it directly in the ship Illustration, cool idea but add a lot of asset creation and took a bunch of screen space just for nothing, maybe I’ll re implement this idea in a different way later. but for this iteration DELETED.
Shooting
In theory making the ship shooting was gonna be easy, for the start wanted something easy so a straight line was going to be more than enough, so, I just grab the center position of the crosshair, each of the shooter positions, and draw a line between each of those points, for making it disappear I took the worst approach ever. the laser its draw every frame, but with a clear color, and when you press the button the color changes, and when the button its released the color changes to clear again. Kinda a smart way to do it but really CPU and RAM consuming. Also the laser was being rendered on top of the ship.
Since the solution wasn’t as easy as just change the Z-index, opted for drawing in a separate image and assign that image to a sprite, which gave me more methods and access to the Z-index, for this just made a test entity were it draws a circle every time I press the button and paint it back to clear on release, here comes more bugs.
Well problem solved, now just need to do the same with the lasers instead of the unfunny sun…
As you can see the lasers weren’t clearing themselves, so new approach, this time with timers, which also allows me to create charging lasers, so this time after a few frames the lasers disappears, problem solved, un solved, and resolved.
Also added some FX to the shooting, but gonna change it cuz you can barely see it. I almost forgot that for the moving shooter starting position had to add some modifiers to the calculation according to the position of the ship. Next step its create a “galaxy” to create movement.
I tend to say a lot of “easy”, when isn’t that “easy” but it’s my toxic trait to simplify everything I do when isn’t that easy or simple.
Estrellas que Disparan
Una parte que ni siquiera está definida en mi juego pero que sé que es OBLIGATORIA es un mini-juego de disparos. Quiero decir, si estás en una nave espacial y no puedes disparar es un juego aburrido, especialmente cuando la idea principal de tu juego es ser un rail shooter.
Así que mi enfoque fue sencillo: solo necesito dibujar en pantalla los lasers y la nave. Nada difícil. Para esto definiré la posición de cada cañón y luego estableceré el final de la línea al centro de la mira. Con un poco de magia de parámetros y matemática simple, en serio muy simple. Pium Pium.
Configuración
Primero creé 3 objetos: una nave, una mira y una nave “mini”. Todos reaccionan al movimiento del d-pad. La nave solo rota y cambia el asset dependiendo del botón que presiones, y la mira solo se mueve por la pantalla.
Para la mira establecí condiciones simples para que vuelva al centro de la pantalla. Es literalmente un contador regresivo que cambia la posición al centro, incluso sin soltar el botón, siempre está volviendo al centro. En ese punto pensé en tener una imagen grande de la nave como parte de la UI, para que cuando recibas daño lo veas directamente en la ilustración de la nave. Buena idea, pero agrega mucha creación de assets y ocupa mucho espacio en pantalla para nada. Quizás reimplementaré esta idea de otra forma más adelante. Pero para esta iteración: ELIMINADO.
Disparos
En teoría hacer que la nave disparara iba a ser fácil. Para empezar quería algo simple, así que una línea recta iba a ser más que suficiente. Agarré la posición central de la mira, la posición de cada cañón, y dibujé una línea entre cada uno de esos puntos. Para hacerla desaparecer tomé el peor enfoque posible: el laser se dibuja en cada frame pero con un color transparente. Cuando presionas el botón el color cambia, y cuando lo sueltas vuelve a transparente. Una manera bastante inteligente de hacerlo, pero realmente consume mucho CPU y RAM. Además el laser se estaba renderizando encima de la nave.
Como la solución no era tan simple como cambiar el Z-index, opté por dibujar en una imagen separada y asignar esa imagen a un sprite. Esto me dio más métodos y acceso al Z-index. Para esto hice una entidad de prueba donde dibuja un círculo cada vez que presiono el botón y lo pinta de transparente al soltarlo. Aquí llegan más bugs.
Bueno, problema resuelto, ahora solo necesito hacer lo mismo con los lasers en lugar del sol sin gracia…
Como pueden ver, los lasers no se estaban borrando solos. Así que nuevo enfoque, esta vez con timers, lo que también me permite crear lasers de carga. Así que esta vez después de algunos frames los lasers desaparecen. Problema resuelto, no resuelto, y resuelto de nuevo.
También agregué algunos FX a los disparos, pero voy a cambiarlo porque apenas se ve. Casi olvidé que para la posición inicial del cañón en movimiento tuve que agregar algunos modificadores al cálculo según la posición de la nave. El siguiente paso es crear una “galaxia” para generar movimiento.
Suelo decir mucho “fácil” cuando no es tan “fácil”, pero es mi rasgo tóxico simplificar todo lo que hago cuando no es tan fácil ni simple.
떨어지는 별들
제 게임에서 아직 정의도 안 됐지만 반드시 있어야 한다는 걸 아는 부분이 슈팅 미니게임이에요. 우주선을 타고 있는데 쏠 수 없다면 지루한 게임이잖아요, 특히 게임의 메인 아이디어가 레일 슈터인 경우에는요.
그래서 제 접근 방식은 간단했어요. 화면에 레이저와 배만 그리면 돼요. 어렵지 않아요. 그러기 위해 각 포대의 위치를 정의하고 선의 끝을 조준경 중앙에 맞추면 되죠. 약간의 파라미터 마법과 정말 간단한 수학으로요. 픔 픔.
설정하기
먼저 3개의 오브젝트를 만들었어요. 배, 조준경, 그리고 “미니” 배. 전부 d-pad 움직임에 반응해요. 배는 누른 버튼에 따라 회전하고 에셋을 바꾸고, 조준경은 화면 주위를 이동해요.
조준경은 화면 중앙으로 돌아오도록 간단한 조건을 설정했어요. 버튼을 놓을 때가 아니라 항상 중앙으로 돌아오는, 위치를 중앙으로 바꾸는 역방향 카운터예요. 이 시점에서 배의 큰 그림을 UI의 일부로 갖고 싶었어요. 데미지를 받을 때 배 일러스트레이션에서 직접 볼 수 있도록요. 멋진 아이디어이지만 에셋 제작이 많이 필요하고 화면 공간을 아무 이유 없이 많이 차지해서, 나중에 다른 방식으로 재구현할 수도 있어요. 하지만 이번 반복에서는 삭제.
슈팅
이론적으로 배가 쏘도록 만드는 건 쉬울 것 같았어요. 처음에는 간단한 걸 원했으니까 직선이면 충분할 거라고 생각해서, 조준경의 중앙 위치와 각 포대 위치를 잡고, 각 점들 사이에 선을 그렸어요. 사라지게 만들기 위해 최악의 접근 방식을 택했어요. 레이저는 매 프레임 그려지는데 투명한 색으로요. 버튼을 누르면 색이 바뀌고, 버튼을 놓으면 다시 _투명_해져요. 꽤 스마트한 방식이지만 CPU와 RAM을 엄청나게 잡아먹어요. 게다가 레이저가 배 위에 렌더링되고 있었어요.
Z-index만 바꾸면 해결되는 게 아니었기 때문에, 별도의 이미지에 그리고 그 이미지를 스프라이트에 할당하는 방법을 선택했어요. 이렇게 하면 Z-index에 대한 더 많은 메서드와 접근이 생기거든요. 이를 위해 테스트 엔티티를 만들어서 버튼을 누를 때마다 원을 그리고 놓으면 _투명_하게 칠하도록 했어요. 여기서 더 많은 버그가 등장해요.
자, 문제 해결. 이제 재미없는 태양 대신 레이저로 같은 걸 하면 되는 거 아닌가요…
보시다시피 레이저가 지워지질 않아요. 새로운 접근 방식, 이번엔 타이머를 사용해요. 이걸로 차징 레이저도 만들 수 있어요. 이번엔 몇 프레임 후에 레이저가 사라져요. 문제 해결, 미해결, 그리고 재해결.
슈팅에 _FX_도 추가했는데, 거의 안 보여서 바꿀 거예요. 움직이는 포대 시작 위치를 위해 배의 위치에 따른 계산에 수정자를 추가해야 했던 것도 잊을 뻔했어요. 다음 단계는 움직임을 만들기 위한 “은하”를 만드는 거예요.
“간단해”를 너무 많이 말하는 경향이 있어요. 그렇게 “간단하지” 않은데도요. 쉽지도 단순하지도 않은 걸 전부 단순화해버리는 게 제 toxic한 특성이에요.
流れ星
ゲームの中でまだ定義されていないのに絶対に必要とわかっている部分が射撃ミニゲームだ。宇宙船に乗っているのに撃てないなんてつまらないゲームだ。特にゲームのメインコンセプトがレールシューターなら。
だから俺のアプローチは_簡単_だった。画面にレーザーと船を描くだけ。難しいことは何もない。そのために各砲台の位置を定義して、線の終点をクロスヘアの中心に合わせる。パラメーターの魔法とシンプルな数学だけで、本当にシンプル。Pium Pium。
セットアップ
最初に3つのオブジェクトを作った。船、クロスヘア、そして「ミニ」船。全てがd-padの動きに反応する。船は押したボタンに応じて回転してアセットを変え、クロスヘアは画面上を動き回る。
クロスヘアには画面の中心に戻るためのシンプルな条件を設定した。ボタンを離したときではなく常に中心に戻っていくような、位置を中心に変える逆カウンターだ。この時点で船の大きな絵をUIの一部として持ちたいと考えていた。ダメージを受けたとき船のイラストに直接それが見えるように。かっこいいアイデアだがアセット作成が大変で、何のためにもなく画面スペースを大量に使う。後で違う形でこのアイデアを再実装するかもしれない。でもこのイテレーションでは削除。
射撃
理論上は船に射撃させるのは簡単なはずだった。まずはシンプルなものにしたかったから、直線で十分だと思って、クロスヘアの中心位置と各砲台の位置を取って、それぞれの点の間に線を引いた。消えるようにするために最悪のアプローチを取った。レーザーは毎フレーム描かれるが_透明_な色で、ボタンを押すと色が変わり、ボタンを離すと_透明_に戻る。かなりスマートなやり方だが、本当にCPUとRAMを食いまくる。しかもレーザーが船の上に描画されていた。
Z-indexを変えるだけでは解決しなかったので、別のイメージに描画してそのイメージをスプライトに割り当てることにした。これでZ-indexへのアクセスとメソッドが増えた。そのために_テスト_エンティティを作って、ボタンを押すたびに円を描いてリリースで_透明_に塗り直す。ここでさらにバグが登場。
まあ問題解決、今度は面白くない太陽の代わりにレーザーで同じことをすればいいだけ…
ご覧のとおりレーザーが自分でクリアされていない。なので新しいアプローチ、今度はタイマーを使う。これで_チャージ_レーザーも作れるようになる。何フレームか後にレーザーが消える。問題解決、未解決、そして解決。
射撃に_FX_も追加したが、ほとんど見えないので変えるつもり。動く砲台の開始位置のために船の位置に応じた計算のモディファイアを追加しなければいけなかったことも忘れるところだった。次のステップは動きを作るための「銀河」を作ること。
「簡単」と言いすぎる癖がある。そんなに「簡単」じゃないのに、簡単でも単純でもないことを全部シンプル化してしまうのが俺のtoxicな特性だ。