Share
Ceci est le deuxième volet de notre tutoriel de jeu Corona SDK Unblock Puzzle. Dans le tutoriel d'aujourd'hui, nous allons ajouter à notre interface en créant les éléments interactifs du jeu Unblock. Continuer à lire!
Assurez-vous de vérifier la première partie de la série pour bien comprendre et préparer ce tutoriel..
Cette fonction ajoute les auditeurs nécessaires à la TitleView boutons.
Accentsconagua
function startButtonListeners (action) if (action == 'add'), puis playBtn: addEventListener ('tap', showGameView) creditsBtn: addEventListener ('tap', showCredits) sinon playBtn: removeEventListener ('tap', showGameView) 'tap', showCredits) end end L’écran des crédits s’affiche lorsque l’utilisateur appuie sur le bouton À propos de, un bouton robinet écouteur est ajouté à la vue des crédits pour le supprimer.
function showCredits: tap (e) playBtn.isVisible = false creditsBtn.isVisible = false creditsView = display.newImage ('credits.png', 0, display.contentHeight) lastY = titreBg.y transition.to (titleBg, heure = 300 , y = (display.contentHeight * 0.5) - (titleBg.height + 40)) transition.to (creditsView, heure = 300, y = (display.contentHeight * 0.5) + 35, onComplete = fonction () creditsView: addEventListener ('tap', hideCredits) fin) fin Lorsque l'écran des crédits est exploité, il sera interpolé hors de la scène et supprimé.
function hideCredits: tapez (e) transition.to (creditsView, heure = 300, y = display.contentHeight + 25, onComplete = fonction () creditsBtn.isVisible = true playBtn.isVisible = vrai creditsView: removeEventListener ('tap', hideCredits ) display.remove (creditsView) creditsView = nil end) transition.to (titleBg, time = 300, y = lastY); fin Quand le Début appuyez sur le bouton, la vue du titre est interpolée et supprimée pour révéler la vue du jeu. Il y a beaucoup de parties impliquées dans cette vue, nous allons donc les séparer dans les prochaines étapes..
function showGameView: tapez sur (e) transition.to (titleView, heure = 300, x = -titleView.height, onComplete = fonction () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end) Ce code place l'image de fond du jeu sur la scène:
-- Jeu BG gameBg = display.newImage ('gameBg.png', 10, 10) Ensuite, nous ajoutons le champ de texte mouvements à la scène. Ceci comptera le nombre de coups effectués par le joueur..
-- Mouvements Mouvements du champ de texte = display.newText ('0', 211, 66, display.systemFont, 16) mouvements: setTextColor (224, 180, 120) Cette partie crée les blocs définis dans la variable Niveau en utilisant un double pour déclaration.
-- Créer un niveau hblocks = display.newGroup () vblocks = display.newGroup () pour i = 1, # l1 do pour j = 1, # l1 [1] do if (l1 [i] [j] == 1), puis local v = display.newImage ('vrect.png', 10 + (j * 50) -50, 120 + (i * 50) -50) v: addEventListener ('touch', dragV) vblocks: insert (v) elseif ( l1 [i] [j] == 2) puis local h = display.newImage ('hrect.png', 10 + (j * 50) -50, 120 + (i * 50) -50) h: addEventListener (' touchez ', faites glisser H) blocs: insérez (h) elseif (l1 [i] [j] == 3) puis s = display.newImage (' square.png ', 10 + (j * 50) -50, 120 + ( i * 50) -49) s: addEventListener ('touch', dragH) end end end gameListeners ('add') end Cette fonction ajoute les auditeurs nécessaires pour lancer la logique du jeu..
fonction gameListeners (action) if (action == 'add'), puis runtime: addEventListener ('enterFrame', mise à jour) sinon runtime: removeEventListener ('enterFrame', update) end La fonction suivante gère le glissement horizontal des blocs.
fonction dragH (e) e.target.lastX = 0 currentX local = 0 initX local = 0 si (e.phase == 'commencé') puis e.target.lastX = ex - e.target.x initX = e.target .x mouvements.text = tostring (numéro (mouvements.text) + 1) elseif (e.phase == 'déplacé') puis e.target.x = ex - e.target.lastX currentX = e.target.x - - Calculer la direction si (initX < currentX) then dir = 'hl' --horizontal-left elseif(initX > currentX) alors dir = 'hr' --horizontal-right end end end
Maintenant, nous créons la fonction glisser vertical.
fonction dragV (e) e.target.lastY = 0 courant localY = 0 initY local = 0 si (e.phase == 'a commencé') puis e.target.lastY = ey - e.target.y initY = e.target .y mouvements.text = chaîne (nombre) (mouvements.text) + 1) elseif (e.phase == 'déplacé') puis e.target.y = ey - e.target.lastY actuelY = e.target.y - - Calculer la direction si (initY < currentY) then dir = 'vu' --Vertical-upwards elseif(initY > currentY) alors dir = 'vd' --Vertical-downwards end end end
Nous utiliserons une fonction excellente et utile pour la détection de collision sans physique. Vous pouvez trouver l'exemple et la source d'origine sur le site Web CoronaLabs Code Exchange..
fonction hitTestObjects (obj1, obj2) gauche locale = obj1.contentBounds.xMin <= obj2.contentBounds.xMin and obj1.contentBounds.xMax >= obj2.contentBounds.xMin droit local = obj1.contentBounds.xMin> = obj2.contentBounds.xMin et obj1.contentBounds.xMin <= obj2.contentBounds.xMax local up = obj1.contentBounds.yMin <= obj2.contentBounds.yMin and obj1.contentBounds.yMax >= obj2.contentBounds.yMin local bas = obj1.contentBounds.yMin> = obj2.contentBounds.yMin et obj1.contentBounds.yMin <= obj2.contentBounds.yMax return (left or right) and (up or down) end
Ce code limite le mouvement en créant des bordures virtuelles.
Mise à jour de la fonction (e) - Les bordures verticales pour i = 1, vblocks.numChildren do if (vblocks [i] .y> = 370), puis vblocks [i] .y = 370 elseif (vblocks [i] .y <= 170) then vblocks[i].y = 170 end
Ici, nous traitons les collisions entre les blocs verticaux et horizontaux.
-- Hit Test if (hitTestObjects (vblocks [i], hblocks [i]) et dir == 'vu'), puis vblocks [i] .y = hblocks [i] .y + 75 elseif (hitTestObjects (vblocks [i], hblocks [i]) et dir == 'vd') alors vblocks [i] .y = hblocks [i] .y - 75 end if (hitTestObjects (vblocks [i], hblocks [i]) et dir == 'hr' ) puis hblocks [i] .x = vblocks [i] .x + 75 elseif (hitTestObjects (vblocks [i], hblocks [i]) et dir == 'hl') puis hblocks [i] .x = vblocks [i ] .x - 75 end if (hitTestObjects (s, vblocks [i])), alors sx = vblocks [i] .x - 50 end end
Ce code limite le mouvement horizontalement en créant des bordures virtuelles.
-- Les bordures horizontales pour j = 1, hblocks.numChildren do if (hblocks [j] .x> = 260), puis hblocks [j] .x = 260 elseif (hblocks [j] .x <= 60) then hblocks[j].x = 60 end end -- Square if(s.x >= 320) puis display.remove (s) display.remove (vblocks) display.remove (hblocks) alert () elseif (s.x <= 35) then s.x = 35 end end
La fonction d'alerte arrête le jeu, affiche un message et supprime les écouteurs actifs.
function alert () gameListeners ('rmv') local alertView = display.newImage ('alert.png', 80, display.contentHeight * 0.5 - 41) transition.from (alertView, heure = 300, y = -82) fin fin Afin de démarrer le jeu, le Principale la fonction doit être appelée. Avec le code ci-dessus en place, nous le ferons ici:
Principale()
le Default.png fichier est une image qui sera affichée dès le démarrage de l'application pendant que iOS charge les données de base pour afficher l'écran principal. Ajoutez cette image dans le dossier source de votre projet, elle sera automatiquement ajoutée par le compilateur Corona..
En utilisant les graphiques que vous avez créés précédemment, vous pouvez maintenant créer une belle et jolie icône. La taille de l'icône de l'iPhone non rétine est 57x57px, mais la version de la rétine est 114x114px et le magasin iTunes nécessite une version de 512x512px. Je suggère de créer d'abord la version 512x512, puis de la réduire pour les autres tailles.
Il n'a pas besoin d'avoir les coins arrondis ou l'éblouissement transparent; iTunes et l'iPhone le feront pour vous.
Il est temps de faire le test final. Ouvrez le simulateur Corona, accédez au dossier de votre projet, puis cliquez sur Ouvrir. Si tout fonctionne comme prévu, vous êtes prêt pour l'étape finale!
Dans le simulateur Corona, accédez à Fichier> Construire et sélectionnez votre appareil cible. Remplissez les données requises et cliquez sur construire. Attendez quelques secondes et votre application sera prête pour le test de l'appareil et / ou la soumission pour la distribution.!
Dans ce didacticiel, vous avez appris à donner vie à notre interface en permettant à l’utilisateur d’interagir avec les éléments du jeu. Expérimentez avec le résultat final et essayez de créer votre propre version personnalisée du jeu! J'espère que vous avez aimé cette série de tutoriels et que vous l'avez trouvée utile. Merci pour la lecture!
