Aller au contenu

Créer des contrôles de boutons gauche/droite fluides pour mobile

💡 Having trouble with Scratch block assembly? Don’t know how to implement code logic? 🚀 Get Help Now

MA

MobileDev_Alex

Posted on August 1, 2024 • Intermediate

📱 Besoin d’aide avec les contrôles mobiles fluides

Je crée un jeu de plateforme/histoire et j’ai besoin d’ajouter un support mobile puisque je développe sur mobile. Le jeu aura des contrôles clavier et mobiles. Je sais déjà comment faire des contrôles clavier, mais j’ai du mal à créer des boutons gauche/droite fluides qui ne semblent pas saccadés.

Les principaux problèmes que je rencontre :

  • Les pressions de boutons semblent lentes et peu réactives
  • Le mouvement est saccadé au lieu d’être fluide
  • J’ai besoin à la fois de retour visuel et de mouvement de personnage fluide

Toute aide pour créer des contrôles mobiles avec une sensation professionnelle serait formidable ! 🙏

TC

TouchControl_Expert

Répondu 1 heure plus tard • ⭐ Meilleure réponse

Excellente question @MobileDev_Alex ! Créer des contrôles mobiles fluides est crucial pour une bonne expérience utilisateur. Voici une solution complète qui répond à toutes vos préoccupations :

🎮 Étape 1 : Créer les sprites de boutons

D’abord, créez deux sprites de boutons (Bouton Gauche et Bouton Droit) avec deux costumes chacun :

  • Costume 1 : État normal (non pressé)
  • Costume 2 : État pressé (plus sombre/mis en évidence)

📱 Étape 2 : Retour visuel des boutons

Pour chaque sprite de bouton, ajoutez ce code pour le retour visuel :

    when flag clicked
forever
if <<touching [mouse-pointer v]?> and <mouse down?>> then
switch costume to [pressed v]
broadcast [button pressed v] // or [left pressed v] / [right pressed v]
else
switch costume to [normal v]
broadcast [button released v] // or [left released v] / [right released v]
end
end

🏃 Étape 3 : Mouvement fluide du personnage

Pour votre personnage joueur, implémentez ce système de mouvement fluide :

    when flag clicked
set [movement speed v] to [0]
set [max speed v] to [8]
set [acceleration v] to [1]
set [friction v] to [0.8]

forever
// Handle input
if <<key [left arrow v] pressed?> or <[left pressed v] = [true]>> then
change [movement speed v] by (0 - [acceleration v])
end
if <<key [right arrow v] pressed?> or <[right pressed v] = [true]>> then
change [movement speed v] by [acceleration v]
end

// Apply friction when no input
if <<<not <key [left arrow v] pressed?>> and <not <key [right arrow v] pressed?>>> and <<[left pressed v] = [false]> and <[right pressed v] = [false]>>> then
set [movement speed v] to ((movement speed) * [friction v])
end

// Limit speed
if <(movement speed) > [max speed v]> then
set [movement speed v] to [max speed v]
end
if <(movement speed) < (0 - [max speed v])> then
set [movement speed v] to (0 - [max speed v])
end

// Apply movement
change x by [movement speed v]
end

🔄 Step 4: Button State Management

Create variables to track button states:

    when flag clicked
set [left pressed v] to [false]
set [right pressed v] to [false]

when I receive [left button pressed v]
set [left pressed v] to [true]

when I receive [left button released v]
set [left pressed v] to [false]

when I receive [right button pressed v]
set [right pressed v] to [true]

when I receive [right button released v]
set [right pressed v] to [false]

✨ Step 5: Advanced Smooth Movement

For even smoother movement with acceleration and deceleration:

    // Advanced movement with ramp-up and ramp-down
when flag clicked
set [speed ramp v] to [0]
set [is moving v] to [false]

forever
set [is moving v] to [false]

if <<key [left arrow v] pressed?> or <[left pressed v] = [true]>> then
set [is moving v] to [true]
point in direction [-90]
if <[speed ramp v] < [8]> then
change [speed ramp v] by [0.5]
end
end

if <<key [right arrow v] pressed?> or <[right pressed v] = [true]>> then
set [is moving v] to [true]
point in direction [90]
if <[speed ramp v] < [8]> then
change [speed ramp v] by [0.5]
end
end

if <[is moving v] = [true]> then
move [speed ramp v] steps
else
// Decelerate when not moving
if <[speed ramp v] > [0]> then
change [speed ramp v] by [-0.3]
move [speed ramp v] steps
else
set [speed ramp v] to [0]
end
end
end

This creates a professional feeling with smooth acceleration and deceleration! 🚀

MA

MobileDev_Alex

Replied 2 hours later

@TouchControl_Expert C’est incroyable ! Merci beaucoup ! 🎉

Le mouvement est maintenant beaucoup plus fluide. Une question - comment puis-je ajouter des effets visuels quand le personnage bouge, comme des particules de poussière ou des changements d’animation ?

VE

VisualEffects_Pro

Replied 1 hour later

@MobileDev_Alex Excellente question ! Voici comment ajouter du polish visuel :

    // Add this to your player sprite for animation
when flag clicked
forever
if <[is moving v] = [true]> then
if <[speed ramp v] > [2]> then
switch costume to [running v]
create clone of [dust particle v]
else
switch costume to [walking v]
end
else
switch costume to [idle v]
end
end

// For dust particles (separate sprite)
when I start as a clone
go to [player v]
change y by [-20]
set [ghost v] effect to [50]
repeat [10]
change y by [2]
change [ghost v] effect by [5]
end
delete this clone

Cela ajoute une animation de course et des effets de poussière pour un polish supplémentaire ! ✨

VB

Vibelf_Community

Pinned Message • Moderator

🚀 Vous voulez maîtriser le développement de jeux mobiles ?

Excellente discussion sur les contrôles mobiles ! Pour ceux qui cherchent à créer des jeux mobiles encore plus avancés, notre communauté peut vous aider à implémenter :

  • 📱 Contrôles gestuels multi-touch
  • 🎮 Systèmes de joystick virtuels
  • ⚡ Optimisation des performances pour mobile
  • 🎨 Design d’interface utilisateur responsive

📚 Sujets connexes

Prêt à créer des jeux mobiles professionnels ? Obtenez des conseils d’experts de nos tuteurs dans l’application Vibelf !