Voit saavuttaa tämän vaikuttavan visuaalisen tehosteen yksinkertaisesti liikuttamalla esineitä eri nopeuksilla.
Parallaksivieritys on tekniikka, jolla monet 2D-pelit luovat illuusion syvyydestä ja lisäävät visuaalista mielenkiintoa pelin taustoihin. Se saavuttaa vaikutuksen siirtämällä taustan eri kerroksia eri nopeuksilla suhteessa kameran liikkeeseen.
Godot 4 tekee parallaksivierityksen toteuttamisesta helpompaa kuin koskaan. Sen tehokas 2D-moottori tarjoaa sisäänrakennetun tuen parallaksikerroksille, joten voit luoda upeita visuaalisia tehosteita pienellä vaivalla.
Godot-pelin perustaminen
Aloita luomalla uusi 2D-projekti Godot-pelimoottori ja perustaa pelin kohtauksen pelaajahahmolla.
Tässä artikkelissa käytetty koodi on saatavilla tässä GitHub-arkisto ja sen käyttö on ilmaista MIT-lisenssin alaisena.
Lisää tätä esimerkkiä varten a CharacterBody2D solmu pelaajan liikkeelle. Lisää myös a CollisionShape2D suorakaiteen muotoinen ja a Sprite2D edustamaan pelaajan hahmoa.
extends CharacterBody2Dvar speed = 200
func _physics_process(delta):
var velocity = Vector2()if Input.is_action_pressed('ui_right'):
velocity.x += 1if Input.is_action_pressed('ui_left'):
velocity.x -= 1if Input.is_action_pressed('ui_down'):
velocity.y += 1if Input.is_action_pressed('ui_up'):
velocity.y -= 1
velocity = velocity.normalized() * speed
move_and_collide(velocity * delta)
Tällä koodilla pelaajahahmo voi liikkua vasemmalle, oikealle, ylös ja alas käyttämällä nuolinäppäimiä tai vastaavia syötteitä.
Erilaisten kerrosten luominen ParallaxLayer-solmujen avulla
Luo seuraavaksi parallaksitehoste lisäämällä useita ParallaxLayer solmuja tapahtumapaikalle. Jokainen ParallaxLayer edustaa erilaista taustakerrosta. Vakuuttavan parallaksiefektin saavuttamiseksi kamerasta kauempana olevien kerrosten tulisi liikkua hitaammin kuin lähempänä olevien.
Lisätä StaticBody2D solmut CollisionShape2D jokaisessa ParallaxLayer luodaksesi joitain törmäyskelpoisia esineitä taustalle. Nämä törmäävät esineet ovat vuorovaikutuksessa pelaajan ja muiden pelielementtien kanssa, mikä lisää pelin syvyyttä.
Tässä on GDScript-koodi parallaksikerrosten luomiseen törmäyskelpoisilla objekteilla:
extends ParallaxBackgroundfunc _ready():
# Create the first parallax layer
var layer1 = ParallaxLayer.new()
layer1.motion_scale = Vector2(0.2, 0.2)
add_child(layer1)# Add a StaticBody2D with CollisionShape2D to the first layer
var static_body1 = StaticBody2D.new()
layer1.add_child(static_body1)var collision_shape1 = CollisionShape2D.new()
var shape1 = RectangleShape2D.new()
shape1.extents = Vector2(32, 32)
collision_shape1.shape = shape1
static_body1.add_child(collision_shape1)# Create the second parallax layer
var layer2 = ParallaxLayer.new()
layer2.motion_scale = Vector2(0.5, 0.5)
add_child(layer2)# Add a StaticBody2D with CollisionShape2D to the second layer
var static_body2 = StaticBody2D.new()
layer2.add_child(static_body2)var collision_shape2 = CollisionShape2D.new()
var shape2 = RectangleShape2D.new()
shape2.extents = Vector2(64, 64)
collision_shape2.shape = shape2
static_body2.add_child(collision_shape2)# Create the third parallax layer
var layer3 = ParallaxLayer.new()
layer3.motion_scale = Vector2(1.0, 1.0)
add_child(layer3)# Add a StaticBody2D with CollisionShape2D to the third layer
var static_body3 = StaticBody2D.new()
layer3.add_child(static_body3)
var collision_shape3 = CollisionShape2D.new()
var shape3 = RectangleShape2D.new()
shape3.extents = Vector2(128, 128)
collision_shape3.shape = shape3
static_body3.add_child(collision_shape3)
Tällä koodilla jokainen parallaksikerros sisältää nyt a StaticBody2D solmu, jossa on a CollisionShape2D edustavat törmäyskelpoisia esineitä taustalla.
Nämä törmäävät esineet ovat vuorovaikutuksessa pelaajan hahmon ja muiden pelielementtien kanssa, mikä lisää pelin syvyyttä ja monimutkaisuutta.
Eri kerrosten siirtäminen eri nopeudella
Nyt kun parallaksitasosi on asetettu, sinun on päivitettävä niiden paikat pelaajan liikkeen perusteella. Tämä luo parallaksiefektin, jossa kameraa lähempänä olevat kerrokset liikkuvat nopeammin kuin kauempana olevat kerrokset.
Lisää seuraava GDScript-koodi Player-kohtaukseen:
extends CharacterBody2Dfunc _physics_process(delta):
...
move_and_collide(velocity * delta)
# Update parallax layers based on player movement
var parallax_background = get_parent()
var motion = -velocity * delta
parallax_background.set_scroll_offset(parallax_background.scroll_offset + motion)
Tämä koodi laskee parallaksikerrosten liikkeen pelaajan liikkeen perusteella ja päivittää ParallaxBackground-solmun vierityspoikkeaman vastaavasti. Huomaa negatiivisen merkin käyttö varmistaaksesi, että kerrokset liikkuvat vastakkaiseen suuntaan kuin pelaajan liike.
Satunnainen parallaksivieritys tuo yllätyksen ja arvaamattomuuden elementin pelisi taustalle. Luomalla ja sijoittamalla parallaksikerroksia dynaamisesti pelin aikana voit luoda pelaajille kiinnostavamman ja dynaamisemman kokemuksen.
Jos haluat toteuttaa satunnaisen parallaksivierityksen, lisää uusia parallaksikerroksia satunnaisten liikemittojen ja -asemien kanssa.
extends ParallaxBackgroundconst MAX_LAYERS = 5
const MIN_SCALE = 0.2
const MAX_SCALE = 1.5
const MIN_SPEED = 0.01
const MAX_SPEED = 0.03
const MIN_X_POSITION = -500
const MAX_X_POSITION = 500
const MIN_Y_POSITION = -300
const MAX_Y_POSITION = 300func _ready():
for i in range(MAX_LAYERS):
create_random_layer()func create_random_layer():
# Add a new parallax layer with a random motion scale
var layer = ParallaxLayer.new()
var scale = lerp(MIN_SCALE, MAX_SCALE, randf())
layer.motion_scale = Vector2(scale, scale)var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)
var y_position = randf_range(MIN_Y_POSITION, MAX_Y_POSITION)
layer.global_transform.origin.x = x_position
layer.global_transform.origin.y = y_positionadd_child(layer)
# Add a StaticBody2D with CollisionShape2D to the new layer
var static_body = StaticBody2D.new()
layer.add_child(static_body)var collision_shape = CollisionShape2D.new()
var shape = RectangleShape2D.new()
shape.extents = Vector2(32, 32)
collision_shape.shape = shape
static_body.add_child(collision_shape)
func remove_random_layer():
# Remove a random parallax layer
if get_child_count() > 0:
var random_index = randi() % get_child_count()
var layer_to_remove = get_child(random_index)
remove_child(layer_to_remove)
Tämä koodi määrittelee vakiot ohjaamaan parallaksikerrosten satunnaisuutta. Käytä lerp funktio arvojen interpoloimiseksi välillä MIN_SCALE ja MAX_SCALE, joka luo satunnaisen liikeasteikon jokaiselle uudelle tasolle. Tällä funktiolla on seuraava allekirjoitus:
Variant lerp ( Variant from, Variant to, float weight )Tulos välitetään kohteesta randf() koska painon avulla voit luoda tasoja satunnaisessa mittakaavassa.
The randf_range -toiminto tarjoaa toisen tavan tuottaa satunnaisia arvoja alueella. Tässä create_random_layer-funktio käyttää sitä satunnaisten paikkojen luomiseen uusille tasoille tietyllä alueella:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)Demopelisi pitäisi nyt näyttää suunnilleen tältä:
Sisältää lisäominaisuuksia
Parallaksivieritys tarjoaa vankan pohjan parantamiselle tasohyppelypelisi visuaalinen vetovoima, mutta voit viedä sen vielä pidemmälle lisäämällä lisäominaisuuksia. Tässä on joitain ajatuksia harkittavaksi.
Taustaobjektit
Luo parallaksikerroksiisi enemmän interaktiivisia elementtejä, kuten kelluvia alustoja, liikkuvia esteitä tai animoituja taustahahmoja. Nämä esineet voivat lisätä tasohyppelypeliisi syvyyttä ja interaktiivisuutta.
Dynaaminen valaistus
Esittele dynaamisia valotehosteita parallaksikerroksissasi. Lisäämällä valonlähteitä ja varjoja voit luoda pelimaailmaan realistisuuden ja syvyyden tunteen. Godotin valaistusjärjestelmä toimii hyvin 2D-pelien kanssa ja voi parantaa visuaalista laatua merkittävästi.
Partikkeliefektit
Integroi hiukkasjärjestelmät parallaksikerroksiin lisätäksesi hienovaraisia visuaalisia tehosteita. Putoavat lehdet, ajelehtivat pilvet tai kimaltelevat tähdet voivat parantaa tunnelmaa ja tehdä pelimaailmasta elävämmän. Voit myös lisää tekijänoikeusvapaita äänitehosteita peliisi.
Päivä-yö sykli
Toteuta päivä-yö-sykli, joka muuttaa parallaksikerrosten väriä ja voimakkuutta pelin kellonajan mukaan. Tämä dynaaminen ominaisuus voi tarjota pelaajille jatkuvasti kehittyvän kokemuksen heidän eteneessään pelin aikana.
Vaikka parallaksivieritys voi parantaa pelisi visuaalista sisältöä, on tärkeää noudattaa joitain parhaita käytäntöjä sujuvan ja nautinnollisen kokemuksen varmistamiseksi.
Suorituskyvyn optimointi
Muista parallaksikerrosten lukumäärä ja niiden monimutkaisuus. Liian monet tasot tai korkearesoluutioiset resurssit voivat johtaa suorituskykyongelmiin, etenkin vähemmän tehokkaissa laitteissa. Optimoi taideteos ja käytä yksinkertaistettuja törmäysmuotoja mahdollisuuksien mukaan.
Kerrosjärjestely
Järjestä parallaksikerrokset harkiten. Harkitse visuaalista hierarkiaa ja haluttua syvyysvaikutelmaa. Kameraa lähinnä olevien kerrosten tulisi liikkua nopeammin, kun taas kauempana olevien kerrosten tulisi liikkua hitaammin.
Kameran rajat
Aseta rajat kameran liikkeelle estääksesi ei-toivotun tyhjän tilan tai visuaaliset häiriöt, kun pelaaja saavuttaa pelimaailman reunat. Tämä takaa saumattoman kokemuksen pelaajille.
Testaus ja säätäminen
Testaa parallaksivieritystäsi eri laitteilla ja erikokoisilla näytöillä varmistaaksesi, että se näyttää ja toimii hyvin eri alustoilla. Liikkeen asteikkojen, kerrosten asemien ja muiden parametrien säätäminen voi hienosäätää parallaksiefektiä parhaan tuloksen saavuttamiseksi.
Satunnaisen parallaksivierityksen lisääminen voi merkittävästi parantaa Godot-pelisi sitoutumistasoa. Satunnainen parallaksivieritys sisältää parallaksikerrosten dynaamisen luomisen ja sijoittamisen pelin aikana.
Tekemällä tämän luot taustalle liikkeen ja dynaamisuuden tunteen, jolloin pelimaailma tuntuu elävältä ja arvaamattomalta. Pelaajat kokevat jatkuvasti muuttuvan visuaalisen ympäristön, mikä lisää pelikokemukseen ylimääräistä jännitystä.
