Cara Membuat Tetris sederhana untuk pemula di Mit App inventor GRATIS 2024 | programmer pemula
Summary
TLDRThis video script offers a step-by-step tutorial on creating a Tetris game using MIT App Inventor. It guides viewers through setting up a new project, designing the user interface with buttons and layout arrangements, and implementing game logic with blocks and procedures. The tutorial also covers adding a scoring system, game over functionality, and customizing the game with images. It concludes with instructions on how to export the game as an APK for Android devices.
Takeaways
- ๐ The tutorial is about creating a Tetris game using MIT App Inventor.
- ๐จโ๐ซ The instructor is Muhammad Alfi, and the course is led by Dosen Bapak Jar Hindarto.
- ๐ป The first step is to open MIT App Inventor and start a new project by naming it.
- ๐ฑ The tutorial guides through the layout setup, including using vertical and horizontal arrangements.
- ๐ฒ It emphasizes the importance of setting visibility and arranging UI elements like buttons and labels.
- ๐ฎ The 'Start' button is a crucial UI component that initiates the game.
- ๐ Extensions are necessary for additional functionalities and must be downloaded and imported.
- ๐ The tutorial covers linking blocks of code to UI elements, such as buttons, to define game actions.
- ๐ผ๏ธ The game requires uploading and integrating images for the Tetris pieces.
- ๐ The script mentions creating movement and rotation functionalities for the game pieces.
- ๐ The game includes a 'Game Over' screen, which is part of the user interface design.
- ๐ง The tutorial also touches on debugging and checking the visibility of UI elements.
Q & A
What is the main topic of the video script?
-The main topic of the video script is creating a Tetris game using MIT App Inventor.
Who is the speaker in the video script?
-The speaker is Muhammad Alfi, identified by the NPM number 23706451.
What is the first step mentioned in the script for creating the Tetris game?
-The first step is to open MIT App Inventor and create a new project by clicking on 'Create Apps' and then 'New Project'.
What is the purpose of the 'Start' button in the game interface?
-The 'Start' button is used to initiate the game when the player is ready to play Tetris.
How does the script instruct to change the visibility of the vertical arrangement?
-The script instructs to change the visibility by setting the 'Visible' property of the vertical arrangement to 'false' to hide it and 'true' to show it.
What is the significance of the 'Extensions' section in the script?
-The 'Extensions' section is important for importing additional features or components that are not available by default in MIT App Inventor.
What is the role of the 'When Button 1 Click' event in the script?
-The 'When Button 1 Click' event is used to trigger actions when the first button is clicked, such as starting the game.
How does the script describe the process of adding images to the game?
-The script describes uploading images to the media section and then referencing them in the 'Blocks' section by matching the image names correctly.
What actions are associated with the 'Button 2' and 'Button 3' according to the script?
-According to the script, 'Button 2' is associated with moving the Tetris block to the left, and 'Button 3' is associated with moving it to the right.
How does the script handle the game over scenario?
-The script handles the game over scenario by changing the text and visibility of certain elements in the game interface, such as showing a 'Game Over' message.
What is the final step mentioned in the script for customizing the game?
-The final step mentioned is to change the background of the 'Start' screen to an image of the user's choice.
Outlines
๐ Introduction to Tetris App Creation
This paragraph introduces the video script where Muhammad Alfi guides the audience through the process of creating a Tetris game using MIT App Inventor. The tutorial starts with opening the App Inventor and creating a new project. The user is instructed to set the layout to vertical arrangement and add a 'Start' button to the interface. The paragraph also covers the initial steps of arranging the user interface and making the 'Start' button visible.
๐ ๏ธ Setting Up the User Interface
The second paragraph delves into the detailed setup of the Tetris game's user interface. It describes how to add and arrange buttons, labels, and other elements within the vertical and horizontal arrangements. The user is guided to adjust the properties of these elements, such as visibility and text, to create the game's initial layout. Additionally, the paragraph explains the necessity of importing extensions and setting up the initial game state with blocks and procedures for starting the game.
๐ผ๏ธ Adding Graphics and Media
In this paragraph, the focus shifts to incorporating graphics and media into the Tetris game. The tutorial explains how to upload images for the game's blocks and how to reference them in the code. It also covers the process of setting up buttons for game controls, such as moving blocks left, right, and rotating them. The user is instructed to ensure that the image names match those used in the code and to duplicate and adjust blocks as needed for game functionality.
๐ฎ Finalizing Game Elements and Exporting
The final paragraph wraps up the tutorial by detailing the addition of game-over elements and the customization of the game's appearance. It guides the user on how to create a 'Game Over' screen, adjust the visibility of game elements, and handle game restart functionality. The paragraph also touches on changing the background and finalizing the game's design. Lastly, it provides a brief overview of how to export the game as an APK file for distribution on Android devices.
Mindmap
Keywords
๐กApp Inventor
๐กTetris
๐กVertical Arrangement
๐กHorizontal Arrangement
๐กButton
๐กLabel
๐กExtension
๐กBlock
๐กInstance
๐กRenderer
๐กMedia
Highlights
Introduction to creating a Tetris game using MIT App Inventor.
Opening MIT App Inventor and starting a new project with a custom name.
Selecting the layout for the Tetris game with a vertical arrangement.
Adding a Start button to the user interface and setting its properties.
Instructions on making the Start button visible and functional.
Customizing the Start button's label to 'Start' or 'Mulai'.
Importing necessary extensions for the Tetris game functionality.
Setting up the game's logic blocks for the Start button's event.
Creating the game's renderer and configuring the Tetris pieces.
Uploading and assigning images for different Tetris pieces.
Adding control buttons for game movements and rotations.
Configuring the game's scoring system and display.
Implementing the game over condition and the corresponding UI changes.
Instructions on creating a restart functionality for the game.
Customizing the game's background with an image.
Exporting the game as an APK file for Android devices.
Final words and encouragement for viewers to explore further.
Transcripts
Perkenalkan nama saya Muhammad Alfi NPM
23706451 6045 Dosen Bapak Jar Hindarto
SK mkom dari Universitas nasionali
Teknik Informatika di sini kita akan
membuat e Tetris
di website Mit app inventor di sini
pertama kalian itu harus buka
Mit app
inventornya lalu habis itu
kalian Buka website yang paling atas
seperti
ini lalu eh di sini buka bacaan create
apps dan lalu habis itu klik new
Project l itu ketik nama ketik nama
sjuknya
[Musik]
kitai perlu spasiat aja
oke nah karena kita sudah buat lalu
habis
itu Muncul itu di projek baru yang
pertama itu kalian harus ke
layout itu klik vertical
arrangement drag ke sini lalu Kalian
pergi
ke
itu oke hab lalu di situ klikent hab itu
Oke jika sudah full screen seperti ini
kalian tutup lagi menu layoutnya ke user
interface seret buttonnya habis itu hab
situ klik vertical arrangementnya lalu
kalian ke Line horizontal terus klik
center terus ini center lalu habis itu
kalian
ubah menu ininya diklik aja terus ganti
tombol Start atau
mulai
mulaianti lu setelah
itu
kalian pencet di sebagian screen itu
tujuannya untuk menghilangkan bacaan
screen satunya ini unuk kalian
visible saja itu kalian e divisibelin
dulu sebentar
oke
[Musik]
oke di sini kalian hilang-ilai dulu
vertical arrangementnya
nyati lalu kalian ke Layout Layout ini
kalian pilih yang vertical arrangement
oke lalu kalian klik yang fill
parent fil
parent habis itu kalian yang W juga fil
parent
Oke habis itu habis itu kalian pilih
yang horizontal arrangement ya kalian di
sini
oke setelah itu kalian ke W
ini
kaliancopy setelah itualian Klik di
tengah seperti ini terus
equid
[Musik]
terus Nah setelah itu kalian pergi ke
layout eh pergi ke user interface terus
button kan ke bawah nah ini kalian ganti
bacanya itu set kalian kalaunya
ya ini winya itu
20% Oke Luk kalian copy tiga
kali ya Oke ini kalian ganti aja kanan
atau n
atau terus
ini bawa
ya
Oke Lalu setelah itu kalian pergi ke
horizontal arrangement 3 kalian ganti
ini ke center ini ke center Nah jadi
berubah nah Biar Ada jaraknya yaitu
Kalian pergi ke
e di sini ke label Kalian
[Musik]
dragbel terus Kalian drag sini nah ini
di tnya itu adalah strip saja kalian
enter di sini wi-nya itu kalian taruh 2%
aja atau 1% nah habis itu kalian ini
kalian copy Terus
kalian tempel terus Kalian tempel n
setelah
itu L setelah itu kalian pergi ke layer
yang atas kalian tambahin
label di sini kalian ganti namanya
jadi skor no
oke di sini itu sudah berganti jadi skor
no ini saya gu mau
gantiadi 20
dan kian tambah lagi
sor kembali lagi ini kalian ganti angka
nol lah ya no0 Itu font siz-nya 25
aja
kalian l setelah
itu jika sudah
selesaian itu harus e membuat atau pergi
ke paling bawah itu ke menu extension
lalu kalian import extension itu wajib
diownload ya guys di Google juga
bel l itu Kalian cari folder
ax-nya Nah ini dia ix-nya kita Open lu
kita
impor ak klik
ensinya kalian drag di sini
eh
layar Lus setelah
itu kalian
minimize ya nah ini Mas Kalian pergi ke
blok terus lalu Kalian pergi ke sini
klik butaton sat habis itu kalian pilih
when button 1 klik lalu habis itu kalian
ke vertical arrangement
1 lalu Kalian cari vertical arrangement
1 visible
Oke ini ya ini kalian pasangkan seperti
ini terus Kalian ketik
false itu kalian klik lalu habis itu
kalian copy paste ini duplikat taruh di
sini lu Dianti ke arrangement du lalu
kalian ini true habis itu kalian klik eh
ini
prosedur lalu klik
yang
Blue prosedur dan ini kalian
ganti start
game kalian Poer lagi habis itu yang
call start game
Oke
selanjutnya kalian klik S habis itu
kalian ke
ini hab itu kalian pergi ke vertical
arrangement 2 dan horizontal
arrangement
ini
Oke habis itu lalu Kalian cari
arrangement
ya setelah
itu kalian ke
Tris lalu kalian klik
destroy destroy
Instance k di atas lalu hab situ Kalian
cari lagi create
[Musik]
[Musik]
rendererer lalu habis itu Kalian cari
lagi
Tetris Exel
image lalu Kalian pergi ke
web klik tambahin no0 di bagian indeks
Nah setelah ini kalian tuh perlu
menambahkan gambar-gambar blog untuk
Tetris itu caranya ada di media di sini
kan klik upload file terus choose
file terus Kalian cari saja yang mana
pengin di
e gunakan
sebentar nah ini eh gambar-gambar
blognya yang banyak sekali bertebaran
di Google ini kalian kalau mau boleh di
deskripsi Piel no ini kalian harus
upload semua ya
oke e semua Setelah kalian upload-upload
semua di media tersebut kalian itu harus
Bi ke Blok lagi lalu Kalian pergi ke tek
lalu ke ke ini
paling atas lalu kalian ketik ini sesuai
nama sor sesuai
nama foto yang kan upload misalnya di
sini
gu0 Nah di sini k harus sama kalau misal
di sini kalian do PNG ya kan harus P ini
kalian ulangi cara yang sama sampai ke
tu oke oke Lalu setelah itu kalian
[Musik]
eh desainer terus
kalianatan lihat ini dia itu ada di
button du l kalian di horizontal
arrangement 3 lalu kalian ke Blok Kalian
pergi
Kean 3 ini tapi yang button duanya lalu
kalian itu drag
ini
saja s
oke dan button to
klik itu kalian harus memanggil
oke terus setelah itu kalian pergi ke
Tetris Kalian cari yang War move tapi
yang move to left ini karena tadi button
two itu buat ke arah kiri Nah kalau buat
yang ke arah kanan itu namanya button F
untuk rotate button th untuk bawah
button F lalu k ulangi cara yang sama
seperti tadi Bua
[Musik]
sebentar
[Musik]
blok copy ini
duplikat
[Musik]
Oke
but setelah itu e kalian perlu cari tahu
dulu e ini skor yang ini itu di label
berapa itu ada di label 5 itu ada di
horizontal Min sat oke nah Ini k ber
ngapusing kalian minimiz saja
ya kalian kita klik ke label 5 yang di
sini
sebentar di sini kalian Langsung cari
label 5 tekst
to yang seperti ini
[Musik]
Oke
Nah di sini
[Musik]
minta ter setelah itu kalian pergi ke
tus
lagi Sekarang kita ganti when game over
[Musik]
Oke setelah itu kalian balik lagi ke
deser ini lalu kalian buat lagi layout
untuk buat game over itu caranya
bagaimana di sini kan ada verticle
arrangement 2 sama verticle arrangement
1 Saya hanya perlu mengcopy yang
vertical arangement S
ini visib Oke Sin visib
ya conttrl terus conttr
[Musik]
V
Oke setelah itu Setelah kalian tambahkan
ini yang vertical arrangement 3 itu
kalian klik bagian mulainya itu di
button 6 lalu kalian itu ganti teksnya
jadi
Sor
[Musik]
isnya berubah lalu kalian Tambahkan lagi
label di atas seperti ini dan seperti
ini itu kata-katanya sebenarnya bebas
suka ini gua
pakai Oke dan yang ini gu ganti lagi
menjadi
kamu cukung KIPS
Oke ini sebenarnya E lagi lagi itu
namanya selera di sini gua font yang gua
gedein dan ini ya Sus 25
oke nah seperti itu
selanjutnyanya
ini
ang
[Musik]
juga
ini kita kurang
[Musik]
men Lalu setelah itu kalian pergi ke
blok
lagi habis itu kalian pergi ke vertical
arrangement 2 lalu Kalian cari vertical
range 2
visibleu kalian ke sini terus Kalian
ketik
[Musik]
false lalu kalian di sini l kalian copy
paste Ini ganti ke vertical el3 and true
lalu Kalian pergi ke label 7 lalu Kalian
cari label 7 Tex to
oke di sini get
score nah untuk eh mengulai start
restart game-nya ini kalian harus
mencari di button 6 di button 6 ini itu
klik lagi button 6 terus Kalian cari
when button 6 klik
oke oke setelah itu oke setelah itu
kalian pergi ke preser lagi terus call
start
Oke kita di sini menemukan kesalahan an
Oke sini
[Musik]
oke ini kita taruh
sinus karena tabrakan Nah sayaasnya
sudah benar
Oke
Dan mungkin tutorial sampai sini aja
bagi yang
ingin du aja di sini jangan lupa kalian
yang
visible yang kalian harus dicek plus
visibelnya itu adalah yang mulai Nah
sekarang gua mau mengganti background
bacaan mulai tersebut ini menjadi gambar
yang aneh oke di sini gua mau cari
gambar
atlist Ya gambar mobilah atau apalah
itulah ya Misan seperti ini oke oke
saja nah dia berubah kan dia berubah dia
berubah gambar diisan Oke bagi yang
ingin mengkonpresikan ke APK dan terus
ke androidapp.apk
oke
Browse More Related Video
How To Make a Topdown RPG in Godot 4: Adding Combo Attacks and an Enemy(Part 2)
Start Your Game Creation Journey Today! (Godot beginner tutorial)
How To Make a Topdown RPG in Godot 4: Adding Menus! (Part 3)
Android application that uses GUI components, font and colors - 01
How to install Private Server | Genshin Impact (2024)
Lecture: 14 | WATER BOAT GAME IN SCRATCH | GAME DEVELOPMENT | SCRATCH TUTORIAL
5.0 / 5 (0 votes)