Membangun Aplikasi Mesin Slot di React Native (Bagian 3)

Membangun Aplikasi Mesin Slot di React Native (Bagian 3)

Pada bulan Agustus saya menantang diri saya untuk membuat aplikasi mesin slot di React Native yang bukan sekadar bukti konsep, tetapi siap untuk toko aplikasi. Cukup cepat saya berhasil membuat dasar-dasarnya: tombol "Spin" dan serangkaian gulungan yang beranimasi halus saat tombol ditekan. Saya juga dapat menambahkan logika untuk mengevaluasi gulungan setelah putaran. Jika Anda ketinggalan, Anda dapat menonton dua bagian pertama di sini dan di sini.

Dalam hal aplikasi (atau pengembangan apa pun sebenarnya), saya biasanya membuat POC untuk melihat apakah idenya memungkinkan, lalu saya menghubungi desainer saya untuk membuat sesuatu yang dapat saya kerjakan. Dalam kasus ini, dia memiliki September yang cukup sibuk sehingga grafiknya berjalan sangat lambat. Seniman... ya?

Tapi minggu lalu dia mengirimi saya produk akhirnya dan terlihat sangat indah, jadi itu sangat layak ditunggu:

Responsivitas

Dalam hal desain yang berat dengan gambar, sangat sulit untuk membuatnya bekerja dengan semua ukuran layar. Beberapa orang lebih suka menggunakan nilai persentase dalam gaya mereka tetapi saya menyarankan untuk tidak melakukannya, karena beberapa properti tidak dapat menerima nilai persentase.

Sebagai gantinya saya menggunakan metode berikut:

1. Identifikasi ke arah mana desain Anda memiliki kelonggaran: Ini adalah konsep yang agak sulit jadi izinkan saya mencoba menjelaskannya menggunakan desain ini sebagai contoh. Dalam kasus kami, bilah atas dan bawah kami cukup padat, sehingga semua tombol dan teks harus sempurna secara piksel. Namun bagian tengah memiliki sedikit "kelonggaran". Jika tinggi bagian tengah misalnya sedikit lebih kecil, kami hanya akan menyesuaikan lebar set gulungan untuk mengompensasinya, dan meratakannya ke tengah bagian. Dalam kasus ini saya akan mengatakan bahwa desain kami memiliki "kelonggaran vertikal".
2. Itu berarti saya akan mendasarkan ukuran elemen kami pada rasio antara lebar desain dan lebar layar. Jadi mari kita buat Konstanta untuk itu di Constants:

export default Constants = {
MAX_WIDTH: Dimensions("screen").width,
XR: Dimensions("screen").width / 667,
...
}

Jadi sekarang kita memiliki unit baru untuk digunakan saat mengukur elemen kami. Misalnya jika kita memiliki tombol di Sketch yang memiliki lebar 300 kita cukup menulis:

width: 300 * Constants

dan itu akan mengambil porsi yang sama persis dari layar (pada sumbu horizontal) seperti dalam desain kami. Pada sumbu vertikal namun akan mengambil sedikit lebih banyak/lebih sedikit ruang, tergantung pada ukuran layar kami, tetapi seperti yang kita bahas di atas, itu tidak terlalu penting karena bagian utama mudah disesuaikan.

Dengan itu, mari kita mulai membuat kode

Desain kami memiliki tiga bagian, saya akan menyebutnya topBar, main, dan bottomBar:

topBar: {
height: Constants * 53, // ini memiliki 3 poin padding bawah bawaan
width: Constants_WIDTH
},
main: {
height: Constants_HEIGHT - Constants * 53 - Constants * 71, // 3 padding atas 3 bawah
width: Constants_WIDTH,
alignItems: 'center',
justifyContent: 'center'
},
bottomBar: {
height: Constants * 71,
width: Constants_WIDTH // ini memiliki 3 poin padding atas bawaan
},

Ini adalah hal yang cukup dasar. Tinggi main akan menjadi MAX_HEIGHT dikurangi tinggi dua bilah (53 dan 71).

Saya membuat 3 View dengan kelas di atas dan meletakkannya ke dalam kontainer saya, yang memiliki flexDirection: 'column'. Kemudian saya mengekspor gambar latar dari Sketch:

Seperti yang Anda lihat, lapisan bawah memiliki bayangan 3 poin, jadi saya menyesuaikan tinggi kontainer untuk itu.

Saya mengekspor 3 ukuran berbeda untuk setiap gambar. Ini akan membantu kinerja produk akhir karena Android/iOS tidak perlu menskalakannya berdasarkan kerapatan piksel. Saya menambahkan gambar-gambar ini ke assets/img dan menambahkan referensi ke mereka di assets/Images. Kemudian saya hanya perlu menambahkannya sebagai Image yang diposisikan secara absolut di dalam View kontainer saya.

Saya tidak akan merinci cara menambahkan setiap elemen, jika tidak postingan ini akan sangat panjang, tetapi Anda dapat menonton video di atas di mana saya menjelaskan semuanya secara rinci.

Tombol

Ada banyak tombol dalam desain ini dan desainer saya menyediakan gambar untuk berbagai status:

Karena React Native tidak memiliki tombol berbasis gambar bawaan, saya harus membuatnya sendiri. Saya akan membuat file di components/TouchableButton

import React, {Component} from 'react';
import { Text, View, TouchableWithoutFeedback, Image } from 'react-native';
import Images from '../assets/Images';
export default class TouchableButton extends Component {
constructor(props) {
super(props);
this = {
"active": Images[props],
"pushed": Images[props + "Pressed"],
"inactive": Images[props + "Inactive"]
}
this = {
status: "active"
}
}
handlePressIn = () => {
if (propsve){
return
}
thiste({
status: "pushed"
})
propss && propss()
}
handlePressOut = () => {
if (propsve){
return
}
thiste({
status: "active"
})
}
renderContent = () => {
if (props){
return (
<Text style={propsyle}>{props}</Text>
)
}
}
render() {
const content = thisContent()
const status = propsve ? "inactive" : state;
return (
<TouchableWithoutFeedback onPressIn={thisPressIn} onPressOut={thisPressOut}>
<View style={[props, { justifyContent: 'center', alignItems: 'center'}]}>
<Image source={this[status]} style={{ width: style, height: style, position: 'absolute' }} resizeMode={propsMode || "stretch"} />
{content}
</View>
</TouchableWithoutFeedback>
)
}
}

Komponen ini akan menerima referensi gambar sebagai string dan akan mengubah gambar dengan menambahkan string "Pressed" di akhir referensi saat tombol ditekan. Demikian pula, ia akan menambahkan string "Inactive" di akhir jika komponen menerima prop inactive.

Ia juga menerima prop text. Jika diteruskan, maka akan merender elemen Text dengan gaya yang ditentukan dalam prop textStyle.

Setelah mengimpor TouchableButton ke file js utama kami, kami dapat menambahkan tombol "Spin" di kontainer bottomBar kami:

<TouchableButton
text="SPIN"
textStyle={[stylesText, { marginTop: -5 }]}
onPress={() => {}}
style={stylesSpin}
inactive={false}
image="buttonSpin" />

Dengan gaya:

buttonSpin: {
position: 'absolute',
right: Constants * 13,
top: Constants * 17,
width: Constants * 138,
height: Constants * 48,
},
buttonText: {
includeFontPadding: false,
justifyContent: 'center',
color: 'white',
textShadowColor: '#00006C01',
fontFamily: 'Ubuntu-Bold',
textShadowOffset:{width: 1, height: 1},
textShadowRadius:10,
fontSize: Constants * 24,
alignContent: 'center',
},

Semua angka posisi berasal dari Sketch, dan saya dapat mempercayai bahwa itu akan ditata dengan sempurna karena konstanta XR.

Saya menggunakan font khusus (Ubuntu-Bold) yang saya impor menggunakan teknik dalam artikel ini.

Sisa desain sebagian besar diulang-ulang, kecuali untuk tombol Suara di sudut kiri bawah. Ini bukan tombol melainkan sakelar jadi saya memutuskan untuk membuat komponen untuk itu, meskipun sangat mirip dengan TouchableButton. Komponen akan berada di components/TouchableSwitch dengan kode berikut:

import React, {Component} from 'react';
import {Text, View, TouchableWithoutFeedback, StyleSheet, Image, Alert} from 'react-native';
import Images from '../assets/Images';
export default class TouchableSwitch extends Component {
constructor(props) {
super(props);
this = {
"active": Images[props],
"inactive": Images[props + "Inactive"],
}
this = {
status: props
}
thisch = propsch || null
}
handlePressOut = () => {
let newStatus = state === "active" ? "inactive" : "active";
thiste({
status: newStatus
})
if (thisch){
thisch(newStatus);
}
}
setStatus = (status) => {
thiste({
status: status
})
}
render() {
return (
<TouchableWithoutFeedback onPressOut={thisPressOut}>
<View style={props}>
<Image source={this[state]} style={{ width: style, height: style, position: 'absolute' }} resizeMode={propsMode || "stretch"} />
</View>
</TouchableWithoutFeedback>
)
}
}

Dan itu saja. Jika Anda penasaran dengan detail rumit dari pembuatan kode desain ini, lihat video saya di sini.

Untuk produk akhir, saya memutuskan untuk memindahkan beberapa tombol tetapi selain itu, ini hampir sempurna secara piksel dan benar-benar indah (gif tidak memberikan keadilan, tetapi percayalah ini 60 fps dan terlihat luar biasa).

Jika Anda menyukai postingan ini, silakan ikuti saya agar Anda mendapat pemberitahuan tentang episode mendatang. Juga kunjungi saluran YouTube saya di mana saya memposting konten serupa secara cukup teratur.