(GAME RELEASE) Pueblo

 

Ein kleiner Top-Down-Shooter für euch um unser Firmenkonto aufzubessern.

Veröffentlicht am 9.Dezember 2022

Entwickelt von Benedict Jäggi

https://store.steampowered.com/app/2219910/Pueblo/

Nur 2.50 CHF auf Steam.

Have Fun!

(GAME RELEASE) Exit Trip

Das ist mein erstes wirklich veröffentlichtes Game. Ein kleines Roguelike Game im Browser. 

https://ben0bi.github.io/ExitTrip/ 

Das Spiel ist schon seit 2019 online doch erst jetzt gibts den "Release" dazu.

Viel Spass!

Hier ist der Source Code, das Spiel wird direkt aus dem Github Account heraus geladen.

GODOT: HearthBar

Eine Lebensleiste aus Herzen ist in fast jedem Zelda vorhanden. Hier erkläre ich, wie ich das in Godot gelöst habe. Es hat pro Herz fünf Einstellungen: Empty, Quarter, Half, FourQuarter und Full. Im Bild siehst du Full, Half und Empties.

Erstmal solltest du das folgende Spritesheet mit all den Herzen herunterladen und in deinem Assets-Ordner einfügen. In Godot, klicke das Bild an und dann oben links neben "Szene" auf "Importieren". Deaktiviere das Filter-Flag und reimporte das Bild.

Dieses Tutorial ist eine "Erweiterung" von diesem Tutorial. (Auf Englisch)

Rechtsklick & Speichern bitte...

Nun brauchen wir ein Objekt, welches ein Herz enthält. Klicke auf "Szene"->"Neue Szene" und stelle ein "Sprite" als Root-Node ein.

Ich habe es "Sprite_Hearth" genannt.

Lade das heruntergeladene Spritesheet als Textur von Sprite_Hearth (Bild im Inspektor auf "Textur" ziehen)

Das Spritesheet hat 5 12x12Pixel Bilder.

Stelle im Inspektor unter "Region" die Werte "w" und "h" auf jeweils 12 und "Region enabled" auf true.

Speichere die Szene als "HearthContainer.tscn" ab.

In deiner Main-Szene:

(Du hast hoffentlich ein CanvasLayer für dein GUI)

Hänge eine Node ("Node") an dein CanvasLayer. Positioniere die Node oben links im Bildschirm.

Hänge daran ein Script mit folgendem Inhalt:

extends Node

# wir laden die vorher erstellte Szene in eine Variable
var hearthTile = preload("res://Assets/GUI/HearthPack/HeartContainer.tscn")

# deletes all child nodes from that node
func delete_all_child_nodes():
  for n in self.get_children():
    self.remove_child(n)
    n.queue_free()

# erstelle alle herzcontainer und fülle sie
func add_hearts(var player):
  # erstmal werden alle child-nodes gelöscht und danach neu aufgebaut
  delete_all_child_nodes()

  # damit herz nicht aus dem bildschirm herausragt gibt
  # es initial die position 6,6 statt 0,0
  var xpos=6
  var ypos=6
  # q braucht es für die y-linien
  var q=0
  # volle herzen sind multiplikanten von 4
  var healthdivided = int(player.health*0.25)

  # welchen status hat das letzte gefüllte herz?
  var healthmod= int(player.health) % 4

  for i in player.max_health*0.25:
    var hc= hearthTile.instance() # erstelle eine neue herzcontainer instanz
    self.add_child(hc) # hänge sie an die eigene node an.
    # setze die position
    hc.position.x=xpos
    hc.position.y = ypos
    # fülle die das aktuelle herz
    if i<healthdivided:
      # full hearts
      hc.region_rect.position.x=4*12.0 # letzte position
    elif i==healthdivided:
      hc.region_rect.position.x=healthmod*12 # mit mod herausgefundene position
    else:
      # empty hearts
      hc.region_rect.position.x=0

    q+=1
    xpos+=12 #setze die neue x position
    # reset a line down
    if q>=10:
      q=0
      xpos=6
      ypos+=12

Es geschieht folgendes: Jedes mal, wenn das Signal "on_stats_changed" mit dem Player als Parameter emittiert wird, werden erstmal alle Herzen in der Node (mit dem Skript) gelöscht. Danach wird auf einer Linie durchgegangen und maximal 10 (zehn) Herzen erstellt. Wenn es mehr als 10 Herzen hat, wird danach eine Linie runtergegangen.
Bei der Erstellung der Herzen wird geprüft, ob das Herz gefüllt oder leer ist. Wenn es das letzte Herz nach den Gefüllten ist, wird noch geprüft, welche Region des Spritesheets benutzt wird, ansonsten ist die Region xy = 0,0 für ein leeres Herz oder 4*12,0 für ein volles Herz.
Die Funktion add_hearts muss nun nur noch bei jeder Änderung des Health-Statuses aufgerufen werden. Das macht man am besten mit Signalen.

Dein Player Script sollte noch folgendes enthalten:

var health = 12 # 3*4 = 3 hearts
var max_health = 12 ...
signal on_stats_changed

Und in allen Funktionen des Players, welche die die health-Variable verändern am Ende noch:

emit_signal("on_stats_changed", self)

Mit self wird der Player an das Signal übergeben, so dass man die Health-Variable auslesen kann. Konnekte nun noch das Signal on_stats_changed im Inspektor mit dem Hearts-Script in der (unbenannten) Node und schreibe dazu diese eine Linie Code (der Funktionsname wird automatisch generiert):

# the player emits a signal when the stats change.
func _on_Player_player_stats_changed(var player):
  add_hearts(player)

Fertig.
Also, bei mir gehts... ;)

GODOT: Konsole

In diesem Post wird in der Godot Engine eine Konsole erstellt. Sie wird automatisch an die Bildschirmgrösse angepasst.

1. Erstelle eine neue Szene "Console" in deinem Projekt mit einem CanvasLayer namens Console als Root Node. Stelle im Inspektor bei Node die Pause-Mode auf "process". Hänge daran ein "Panel"

    Das Panel sollte auf der Position 0,0 sein und ein bisschen vergrössert werden für die Übersicht.

2. Erstelle unter dem Panel folgende Dinge - du musst sie NICHT anordnen, da wir das im Code machen:     
    2.1. Ein Label "LabelConsole" mit dem Text "Console" Dieses ist der Titel des Fensters. Bitte ordne dieses Label in der linken oberen Ecke des Panels an. Nur dieses Label muss angeordnet werden.

    2.2 Einen Button "BtnExit" mit einem "X" als Text.

    2.3 Einen Button "BtnClear" mit "Clr" als Text.

    2.4 Ein TextEdit-Node namens "ConsoleText": Hier kommt der Text von der Konsole rein.

    2.5 Ein LineEdit-Node namens "EditText": Hier schreibt der User seinen Text rein.

3. Hänge an das Root-Node ("Console"-Panel) ein Skript namens "Console.gd" an. 

Hier ist der Script Code:

Erstmal ein paar Variablen und überall genutzte Komponenten:

Mit den Variablen kann man im Editor einstellen, wie gross das Fenster relativ zur Applikationsgrösse ist und ob es zentriert werden soll. Die Signale sind dazu da, um einige Sachen vom Game einzustellen, wenn die Konsole hervorgeholt oder versteckt wird, wie zum Beispiel den GameState auf Pause zu setzen.

# multipliers for the size.
# its x times screensize so the multipliers should
# be between 0.0 and 1.0
export var hSize_Multiplier: float = 1.0
export var vSize_Multiplier: float = 0.75
export var centerHorizontally: bool = false
export var centerVertically: bool = false

# components
onready var TxtEdit = get_node("EditText")
onready var ConsoleTxt = get_node("ConsoleText")
onready var BtnExit = get_node("BtnExit")
onready var BtnClear = get_node("BtnClear")

# signals
signal console_shown
signal console_hidden
signal console_command_given

Die Signale kann man nun im Editor mit dem Code verknüpfen. Das muss man ausserhalb der Konsolen-Szene machen, sonst ändert man nur den Code von der Konsole...

In der ready-Funktion wird die Konsole erstmal angeordnet durch die resize-Funktion:

func _ready():
  resize()

# set size of the console, align all UI elements
# and maybe center it.
func resize()->void:
  # clamp the multiplier
  if vSize_Multiplier<0: vsize_multiplier="0<br">   if vSize_Multiplier>1.0: vSize_Multiplier = 1.0
  if hSize_Multiplier<0: hsize_multiplier="0<br">   if hSize_Multiplier>1.0: hSize_Multiplier = 1.0

  # set resolutions
  # first get the window resolution and multiply it
  var screenRes := Vector2(ProjectSettings.get_setting("display/window/size/width"), ProjectSettings.get_setting("display/window/size/height"))
  var consoleRes := Vector2(screenRes.x * hSize_Multiplier, screenRes.y*vSize_Multiplier)
  print("Console Resolution: ",str(consoleRes.x),"/",str(consoleRes.y))
  # set resolution to the panel
  self.rect_size = Vector2(consoleRes.x, consoleRes.y)

  # set position of the panel
  if screenRes.x != consoleRes.x and centerHorizontally == true:
    var halfx=consoleRes.x*0.5
    self.rect_position.x = screenRes.x*0.5-halfx
  if screenRes.y != consoleRes.y and centerVertically == true:
    var halfy = consoleRes.y*0.5
    self.rect_position.y = screenRes.y*0.5-halfy

  # set resolution to the edit textbox
  TxtEdit.rect_size.x = consoleRes.x
  TxtEdit.rect_position.y = consoleRes.y- TxtEdit.rect_size.y
  # set position of the buttons.
  BtnExit.rect_size=Vector2(20.0,20.0) # there was an error aligning this, it growed
  BtnExit.rect_position = Vector2(consoleRes
.x-BtnExit.rect_size.x,0)
  BtnClear.rect_size.y = BtnExit.rect_size.y
  BtnClear.rect_position = Vector2(consoleRes.x-BtnExit.rect_size.x-BtnClear.rect_size.x,0)
  # set resolution of the console text box
  ConsoleTxt.rect_position = Vector2(0, BtnExit.rect_size.y)
  ConsoleTxt.rect_size = Vector2(consoleRes.x, consoleRes.y-BtnExit.rect_size.y-TxtEdit.rect_size.y)

Nun noch einige Funktionen für die Bedienung der Konsole:

# show the console and set the focus on the text edit.
func show()->void:
  self.visible = true
  TxtEdit.grab_focus()
  emit_signal("console_shown")
  get_tree().paused = true

# hide the console
func hide()->void:
  get_tree().paused=false()
  self.visible=false
  emit_signal("console_hidden")

4. Nun werden die Signale verknüpft. Doppelklicke rechts im Inspektor auf das signal "pressed" vom Button "BtnExit" und wähle das Panel "Console" mit dem Script als Ziel. Dort erscheint nun eine Funktion, in welche du einfach nur hide() reinschreibst:

# event when the exit button was pressed
func _on_BtnExit_pressed():
  hide()

Dasselbe machen wir mit dem Clear-Button:

# event when the clear button was pressed
func _on_BtnClear_pressed():
  ConsoleTxt.text=""
  TxtEdit.grab_focus() # get the focus back to the lineedit.

Für den Konsole-Text brauchen wir eine Funktion, die den Fokus immer wieder auf das LineEdit "EditText" lenkt. Ansonsten könnte man in den Text reinschreiben und das wollen wir nicht. Mit dem Readonly-Flag wird der Text grau und das wollen wir auch nicht. Doppelklicke also auf das "focus_entered()"-Signal des ConsoleText-Nodes (TextEdit) und verknüpfe es wie oben beschrieben. Hier muss man nur TxtEdit.grab_focus() reinschreiben:

# grab the focus on the line edit
# when someone clicks on the console text.
func _on_ConsoleText_focus_entered():
  TxtEdit.grab_focus()

Und schliesslich brauchen wir noch die Funktion, wenn der Benutzer im LineEdit die Enter-Taste drückt. Das Signal heisst "text_entered" im LineEdit-Node.

# enter was pressed on the line edit.
func _on_EditText_text_entered(new_text):
  var txt = TxtEdit.text
  add_line("> "+txt)
  parse(txt)
  TxtEdit.clear()

Mit add_line wird der Text an den Konsolentext angehängt und mit einem \n beendet. Jede Zeile muss also ein \n am Ende haben, sonst funktioniert das Ganze nicht richtig.

func add_line(txt:String)->void:
  print(txt) # gib den text im debugger aus.
  ConsoleTxt.text += txt
  ConsoleTxt.text += "\n"
  # scroll vertical to infinity = to end of text
  ConsoleTxt.scroll_vertical = INF

Um den Text mit dem Programm zu verknüpfen haben wir die parse-Funktion. Hier werden ein paar interne Kommandos ausgewertet und dann das Signal "console_command_given" emittiert. Dieses Signal kann abgefangen und der Text ausgewertet werden. Als Beispielfunktion gibt es hier einfach "exit" um die Konsole zu beenden.

func parse(Txt:String)->void:   Txt = Txt.to_lower() # text auf lowercase.
  if Txt=="":
    return # nothing happens if nothing gets in.   if Txt=="exit":
    hide()
    return
  # command not recognized (no return before)
  emit_signal("console_command_given", Txt, self)

Für komplexere Befehle muss ich noch ein bisschen recherchieren. ;)

Das Signal hat als Parameter den Text und die Konsole selbst. Man kann also einfach eine Funktion in einem anderen Node mit dem Signal verknüpfen und zum Beispiel Cheats einbauen:

# ein cheat für den player
func on_console_command_given(var Txt, var Console)
  if Txt="heileheilesegen":
    health=max_health
      Console.add_line("CHEAT ACTIVATED")

Hiermit hast du eine funktionsfähige Konsole, welche du einfach an deine Mainscene anhängen kannst. Achte darauf, dass sie zu unterst im Nodetree ist, damit sie immer im Vordergrund ist. Setze das visible-flag auf false und erstelle einen Button oder anderen Event mit Console.show() als Funktionscode. Das sollte erstmal reichen. ;)