el Quickstart

Το microStudio είναι ένα πλήρες περιβάλλον ανάπτυξης παιχνιδιών. Περιλαμβάνει όλα τα εργαλεία που χρειάζεστε για να φτιάξετε το πρώτο σας παιχνίδι! Το microStudio προσφέρει:

• επεξεργαστή εικόνων και sprites
• επεξεργαστή χαρτών (για τη δημιουργία επιπέδων και χαρτών σε παιχνίδι)
• επεξεργαστή κώδικα για προγραμματισμό σε microScript, μια απλή αλλά ισχυρή γλώσσα
• 100% διαδικτυακή λειτουργία που επιτρέπει τη δοκιμή του παιχνιδιού άμεσα κατά τη δημιουργία του
• τη δυνατότητα για εύκολη εγκατάσταση του παιχνιδιού, είτε είναι έτοιμο είτε όχι, σε κινητά και tablet.
• τη δυνατότητα για συνεργασία με άλλους σε ένα παιχνίδι με άμεσο συγχρονισμό
• λειτουργία διαμοιρασμού χαρακτηριστικών και κώδικα με την κοινότητα, για να εξερευνήσετε παιχνίδια άλλων χρηστών, να μάθετε και να χρησιμοποιήσετε ό,τι θέλετε για τα δικά σας παιχνίδια

Αρχίζοντας

Μπορείτε να αρχίσετε εξερευνώντας δημιουργίες άλλων χρηστών, στην ενότητα Εξερεύνηση.

Μπορείτε να αρχίσετε να φτιάχνετε τα δικά σας παιχνίδια ως επισκέπτες, ή να φτιάξετε λογαριασμό. Διαλέξτε ένα ψευδώνυμο (αποφύγετε το πραγματικό σας όνομα), εισάγετε τη διεύθυνση email σας (απαραίτητο αν ξεχάσετε τον κωδικό) και είστε έτοιμοι!

Πρώτο project

Μπορείτε είτε να φτιάξετε ένα κενό project στην ενότητα Δημιουργία, ή να επιλέξετε ένα υπάρχον στην ενότητα Εξερεύνηση και να πατήσετε το κουμπί "Αντιγραφή", ώστε να φτιάξετε το δικό σας αντίγραφο και να μπορέσετε να το αλλάξετε.

Κώδικας

Μόλις το project σας δημιουργηθεί, θα βρεθείτε στην ενότητα "Κώδικας". Εδώ είναι που μπορείτε να αρχίσετε να προγραμματίζετε. Δοκιμάστε να αντιγράψετε και να επικολλήσετε τον ακόλουθο κώδικα:

draw = function()
  screen.drawSprite ("icon",0,0,100,100)
end

Εκτέλεση

Στη συνέχεια πατήστε το κουμπί "Παίξε" στο δεξί μέρος της οθόνης. Το πρόγραμμα αρχίζει να τρέχει και μπορείτε να δείτε ότι ο κώδικας που μόλις γράψατε απεικονίζει το εικονίδιου του project στη μέση της οθόνης. Αλλάξτε τις παραμέτρους της εντολής draw (τα ψηφία 0 και 100) και δείτε τη θέση και το μέγεθος να διαφοροποιούνται.

Αλλαγή σε πραγματικό χρόνο

Μπορείτε να κάνετε αυτό το πρώτο πρόγραμμα πιο διαδραστικό, αντιγράφοντας και επικολλώντας τον παρακάτω κώδικα:

update = function()
  if keyboard.LEFT then x -= 1 end
  if keyboard.RIGHT then x += 1 end
  if keyboard.UP then y += 1 end
  if keyboard.DOWN then y -= 1 end
end

draw = function()
  screen.fillRect(0,0,400,400,"#000")
  screen.drawSprite("icon",x,y,20,20)
end

Αυτή τη φορά, το πρόγραμμα σας επιτρέπει να μετακινείτε το εικονίδιο με τα βελάκια στο πλητρολόγιο. Η σημασία των εντολών update και draw, ο έλεγχος του πληκτρολογίου με τον όρο keyboard, η απεικόνιση στην οθόνη με τον όρο screen, όλα αυτά εξηγούνται με λεπτομέρεια αργότερα στις οδηγίες χρήσης.

Μπορείτε επίσης να μεταβείτε στην ενότητα Sprites, να πατήσετε το στοιχείο "icon" και να αλλάξετε την εικόνα. Όταν επιστρέψετε στην ενότητα "Κώδικας", θα δείτε ότι οι αλλαγές λήφθηκαν αυτόματα υπ' όψη στο πρόγραμμα τη στιγμή που εκτελείται.

Εξερεύνηση

Η ενότητα Εξερεύνηση σας επιτρέπει να ανακαλύψετε project φτιαγμένα από άλλους χρήστες. Μπορείτε να βρείτε παραδείγματα παιχνιδιών, επαναχρησιμοποιούμενων προτύπων και διάφορες βιβλιοθήκες. Αν ενδιαφέρεστε για έναέργο, μπορείτε να το αντιγράψετε, δηλαδή να φτιάξετε ένα προσωπικό αντίγραφο, στο οποίο μπορείτε να κάνετε αλλαγές και να το επαναχρησιμοποιήσετε.

Αν προηγουμένως είχατε ανοίξει κάποιο από τα δικά σας project στην ενότητα Δημιουργία, θα μπορέσετε να εισαγάγετε στο έργο σας sprites ή κώδικα του έργου που εξερευνάτε. Έτσι, μπορείτε να επιλέξετε εικόνες ή χαρακτηριστικά που σας ενδιαφέρουν από τα δημόσια έργα της κοινότητας του microStudio και να τα ξαναχρησιμοποιήσετε στα δικά σας έργα.

Δημιουργία έργου

Μπορείτε να δημιουργήσετε ένα κενό project στην ενότητα Δημιουργία. Το project σας έχει διάφορες κατηγορίες (στο αριστερό μέρος της οθόνης):

• Κώδικας : εδώ μπορείτε να δημιουργήσετε τα προγράμματά σας και να τα εκτελέσετε ή αποσφαλματώσετε (debugging)
• Sprites: τα sprites είναι εικόνες που μπορείτε να δημιουργήσετε και να μεταβάλλετε σε αυτήν την κατηγορία. Μπορείτε εύκολα να τα απεικονίσετε στην οθόνη μέσω του κώδικά σας.
• Χάρτες: Οι χάρτες είναι σκηνές ή επίπεδα που μπορείτε να συνθέσετε, τοποθετώντας τα sprites σε ένα πλέγμα. Μπορείτε εύκολα να τους απεικονίσετε μέσω κώδικα στην οθόνη.
• Οδηγίες : here you can write documentation for your project; it can be a game design document, a tutorial, a guide to reuse your project as a template etc.
• Options: Here you can set various options for your project; you can also invite other users to participate in your project with you.
• Publish: Here you can make your project public; don't forget to create a description and add tags.

Κώδικας

Σε αυτήν την ενότητα γράφετε και ελέγχετε το project σας. Ένα αρχείο πηγαίου κώδικα φτιάχνεται αυτόματα, με την αρχική δημιουργία του project. Μπορείτε να προσθέσετε περισσότερα αρχεία, για καλύτερη οργάνωση του κώδικα.

Η λειτουργία ενός προγράμματος στο microStudio βασίζεται στην υλοποίηση 3 βασικών συναρτήσεων:s:

• η συνάρτηση init, όπου δίνονται αρχικές τιμές στις διάφορες μεταβλητές
• η συνάρτηση update, όπου υλοποιείται η λογική του προγράμματος, με εντολές που εκτελούνται κατ' επανάληψη (60 φορές το δευτερόλεπτο)
• η συνάρτηση draw, όπου δίνονται οι εντολές απεικόνισης στην οθόνη

Function init()

Η συνάρητη init καλείται μόνο μία φορά, κατά την εκκίνηση του προγράμματος. Είναι χρήσιμη για τον ορισμό των αρχικών τιμών μεταβλητών, που χρησιμοποιούνται στη συνέχεια του προγράμματος.

παράδειγμα

init = function()
  status = "welcome"
  level = 1
  position_x = 0
  position_y = 0
end

Function update()

Η συνάρτηση update εκτελείται 60 φορές το δευτερόλεπτο. Είναι η κατάλληλη θέση για να υλοποιήσετε τη λογική του παιχνιδιού σας: αλλαγή καταστάσεων, μετακινήσεις sprites, έλεγχος συγκρούσεων, έλεγχος χειρισμού κλπ.

παράδειγμα

update = function()
  if keyboard.UP then y = y+1 end
end

Ο από πάνω κώδικας αυξάνει την τιμή της μεταβλητής y κατά 1 κάθε εξηκοστό του δευτερολέπτου, αν το πάνω βέλος στο πληκτρολόγιο είναι πατημένο.

Function draw()

Η συνάρτηση draw καλείται για να απεικονιστούν τα γραφικά στην οθόνη. Σε αυτήν ζωγραφίζετε ό,τι χρειάζεται στην οθόνη, για παράδειγμα, ένα μεγάλο παραλληλόγραφμμο για να καθαρίσετε την οθόνη και μετά μερικά sprites και σχήματα από πάνω.

παράδειγμα

draw = function()
  // γέμισε την οθόνη με μαύρο χρώμα
  screen.fillRect(0,0,screen.width,screen.width,screen.height, "rgb(0,0,0)")
  // ζωγράφισε το sprite "icon" στο κέντρο της οθόνης, σε μέγεθος 100x100
  screen.drawSprite("icon",0,0,100,100)
end

Στις περισσότερες περιπρώτσεις, η συνάρτηση draw εκτελείται 60 φορές το δευτερόλεπτο. Υπάρχουν περιπτώσεις συσκευών που ανανεώνουν την οθόνη 120 φορές το δευτερόλεπτο ή και ταχύτερα. Υπάρχει επίσης η περίπτωση το πρόγραμμα να μην μπορεί να ανταποκριθεί στην απεικόνιση ανά 1/60'' και να ανανεώνει την οθόνη πιο αργά. Για αυτό το λόγο οι update και draw είναι δυο ξεχωριστές συναρτήσεις. Η update εκτελείται ακριβώς 60 φορές το δευτερόλεπτο και η draw όταν μπορεί το hardware. Σε κάθε περίπτωση, η ταχύτητα λειτουργίας του προγράμματος είναι ίδια, αλλά μπορεί να διαφέρει η ταχύτητα απεικόνισης από συσκευή σε συσκευή.

εκτέλεση

Στην ενότητα "Κώδικας", στο δεξί μέρος της οθόνης μπορείτε να δέιτε το πρόγραμμά σας σε λειτουργία, ενώ συνεχίζετε να αλλάζετε τον κώδικα. Για να εκτελέσετε το πρόγραμμα, πατήστε το κουμπί . Μπορείτε να διακόχετε τη λειτουργία του ανά πάσα στιγμή πατώντας στο .

Κονσόλα

Κατά την εκτέλεση του προγράμματος, μπορείτε να χρησιμοποιήσετε την κονσόλα για να εκτελέσετε εντολές - για παράδειγμα, αν γράψετε το όνομα μιας μεταβλητής, μπορείτε να δείτε την τρέχουσα τιμή της.

παραδείγματα

Δείξε την τιμή της μεταβλητής position_x

> position_x
34
>

Άλλαξε την τιμή της μεταβλητής position_x

> position_x = -10
-10
>

Κάλεσε τη συνάρτηση draw() για να εμφανιστεί η αλλαγή που επιφέρει η μεταβολή της τιμής της position_x (αυτό ισχύει αν το πρόγραμμα είναι σταματημένο - αν όχι, τότε οι παραπάνω αλλαγές θα απεικονιστούν αμέσως)

> draw()
>

Ενδείξεις

Στον κώδικα, μπορείτε να απεικονίσετε πληροφορίες στην κονσόλα χρησιμοποιώντας την εντολήprint().

παράδειγμα

draw = function()
  // your draw implementation()

  print(position_x)
end

Sprites

Τα sprites είναι εικόνες που μπορούν να απεικονιστούν και να μετακινηθούν στην οθόνη. Το εργαλείο ζωγραφικής στο microStudio επιτρέπει τη δημιουργία sprites

Δημιουργία ενός sprite

Κάθε project ξεκινάει με ένα sprite, με την ονομασία "icon", που χρησιμοποιείται ως το εικονίδιό του. Μπορείτε να δημιουργήσετε νέα sprites πατώντας στο Δημιουργία sprite. Μπορείτε επίσης να αλλάξετε την ονομασία τους και να ορίσετε το μέγεθός τους σε pixels (πλάτος x ύψος).

Επιλογές σχεδίασης

Το microStudio προσφέρει κλασικά εργαλεία σχεδίασης: μολύβι, γέμισμα περιοχών, γόμα, αυξομείωση φωτεινότητας, αυξομείωση κοντράστ, αλλαγή απόχρωσης.

Το εργαλείο επιλογής χρώματος (eyedropper) μπορεί να χρησιμοποιηθεί οποτεδήποτε, πατώντας το κουμπί [Alt] στο πληκτρολόγιο.

Η επιλογή tile (πλακάκι) και οι ρυθμίσεις συμμετρίας σας βοηθούν να δημιουργήσετε επαναμβανόμενα γραφικά ή γραφικά με ένα ή δύο άξονες συμμετρίας.

Συμβουλή

Μπορείτε να εισαέγετε αρχεία γραφικών στο microStudio, με μετακίνηση και απόθεση (drag and drop) PNG ή JPG αρχείων στη λίστα των sprites (μέγιστο μέγεθος 256x256 pixels).

Χάρτες

Ο χάρτης στο microStudio είναι ένας καμβάς/πλαίσιο για τοποθέτηση sprites. Σας επιτρέπει να συνθέσετε εικόνες για διακόσμηση ή δημιουργία ενός επιπέδου.

Δημιουργία χάρτη

Οι χάρτες δημιουργούνται και μετονομάζονται, όπως τα sprites. Είναι δυνατόν να αλλάξετε το μέγεθος του πλαισίου, ορίζοντας των αριθμό των κελιών του. Σε κάθε κελί μπορείτε να τοποθετήσετε ένα sprite. Είναι δυνατόν να αλλάξετε το μέγεθος του κελιού σε pixels, ανάλογα με τα γραφικά που χρησιμοποιείται στο χάρτη.

Ρυθμίσεις

Η ενότητα Ρυθμίσεις σας επιτρέπει να ορίσετε κάποιες παραμέτρους του project σας.

Επιλογές

Μπορείτε να ορίσετε το όνομα του project και το αναγνωριστικό του (αυτό καθορίζει το URL, δηλαδή τη διεύθυνσή του στο internet).

Μπορείτε να ορίσετε επίσης τον προσανατολισμό της οθόνης (όρθιο-portrait ή πλάγιο-landscape). Αυτό καθορίζει τη λειτουργία σε κινητό ή tablet.

Επίσης μπορείτε να ορίσετε την επιθυμητή σχέση πλάτους και ύψους - αυτό επιτρέπει να εξασφαλίσετε ότι η εφαρμογή σας θα εμφανίζεται όπως πρέπει σε συσκευές με διαφορετικές διαστάσεις οθόνης.

Χρήστες

Η ενότητα Χρήστες σας επιτρέπει να προσκαλέτε φίλους να συμμετάσχουν στο project σας. Θα πρέπει να γνωρίζετε το όνομα του χρήστη (στην πλατφόρμα του microStudio). Αν ένας χρήστης αποδεχθεί την πρόσκλησή σας, τότε θα έχει πλήρη πρόσβαση στο project και θα μπορεί να αλλάξει ό,τι θέλει (sprites, χάρτες, κώδικα κλπ). Η μόνη ενότητα που μόνο ο κύριος του project μπορεί να αλλάξει είναι η ενότητα των ρυθμίσεων και η λίστα των προσκεκλημένων.

Δημοσίευση

microStudio offers a few options for publishing or exporting your project. You can export your project as a standalone HTML5 app, for distribution online, on your site or on game distribution platforms. You can also make your project public on microStudio allowing the community to play with it, comment, explore the source code and assets... More export options are planned for the future.

Make the project public

To make your project accessible to everyone (read-only), click on "Make my project public". Once your project is public, it will be displayed in the exploration tab of the microstudio site. Any visitor will be able to run the game, view and reuse the source code and other components of your project.

Your game has a permanent URL in the form https://microstudio.io/author_nickname/game_id/. You can of course distribute the link to anyone or you may add your game to your existing website by embedding it into an iframe.

Export to HTML5

To export your full project to a standalone HTML5 app, click "Export to HTML5". This triggers the download of a ZIP archive, containing all the files necessary to run your game: sprites, some JavaScript files, icons and a main HTML file "index.html". Your game can be run locally (double-click the file index.html) or you may upload it to your existing website. It is also ready to be published on many online game distribution platforms that accept HTML5 games (we suggest a few in the HTML5 export panel).