Ustvarite slog s to DIY elektronsko matrico D20

Želite nekaj malega edinstvenega za naslednjo namizno igro vlog? Kaj pa elektronski D20 s grafiko po meri za kritične zadetke in zgreške? Danes vam bom pokazal, kako sami zgraditi Arduino in nekaj preprostih delov.

Ne skrbite, če še nikoli niste uporabljali Arduina, imamo vodnik za začetek .

---

---

Načrt gradnje

To je preprost projekt. Arduino bo poganjal zaslon OLED, gumb pa bo zavijal matrico. Grafika po meri bo prikazala kritične udarce ali kritične zgrešitve. Kodo lahko preprosto spremenite v D8, D10 ali D12.

Kaj rabiš

• 1x Arduino
• 1 x 0,96 ' I2C OLED zaslon
• 1 x gumb
• 1 x 10k? Upor
• 1 x Ogledna plošča
• Različne priklopne žice
• Celotna koda tukaj, če ne želite dosledno slediti pisnim navodilom.

To so osnovni deli, ki jih potrebujete za izdelavo lastnega D20. Morda ga boste želeli namestiti v ohišje (obravnavano spodaj) in vezje spajkati v trajnejše stanje. Tu so dodatni deli, ki jih boste morali narediti:

• 4 x vijaki M2 x 10 mm (0,4 palca)
• 4 x matice M2
• 4 x 7 mm (0,28 palčne) podložke
• 9V zaskok baterije (ali ustrezna alternativa)
• Različne toplotno skrčljive cevi

Ti zasloni OLED so zelo kul. Običajno jih je mogoče kupiti v beli, modri, rumeni ali mešanici treh. Kupil sem enega v modri barvi, ki ustreza mojemu ohišju. Poskrbite, da boste dobili I2C model namesto SPI .

Skoraj vsak Arduino bo primeren. Izbral sem Nano, saj so dovolj majhni, da se prilegajo ohišju. Za več informacij o modelih Arduino si oglejte naš priročnik za nakup.

Vezje

Tukaj je vezje, ki ga potrebujete:

---

---

Poveži se VCC in GND na zaslonu OLED za Arduino +5V in tla . Poveži se analogni 4 na Arduinu do zatiča z oznako SDA . Poveži se analogni 5 do SCL pin. Ti zatiči vsebujejo vezje, potrebno za pogon zaslona z vodilom I2C. Natančni zatiči se razlikujejo glede na model, vendar se A4 in A5 uporabljata pri Nano in Uno. Preverite Dokumentacija žične knjižnice za vaš model, če ne uporabljate Uno ali Nano.

Priključite baterijo na ozemljitev in VINO pin. To pomeni napetost in sprejema različne napetosti enosmernega toka - vendar najprej preverite svoj model in včasih se lahko nekoliko razlikuje.

---

---

Gumb povežite z digitalni pin 2 . Opazite, kako je 10k? upor je priključen na ozemljitev. To je zelo pomembno! To je znano kot spustni upor in preprečuje, da bi Arduino odkril lažne podatke ali motnje s pritiskom na gumb. Služi tudi za zaščito plošče. Če tega upora ne bi uporabili, bi +5V šlo naravnost v zemljo. To je znano kot a mrtev kratek in je enostaven način za ubijanje Arduina.

Če spajkate to vezje, zaščitite svoje povezave s toplotno skrčljivo cevjo:

Pazite, da ga ne segrejete preveč, in to šele, ko se prepričate, da vezje deluje. Morda boste želeli tudi zviti svoje kable v pare. To jih ohranja čiste in jih ščiti pred nepotrebnim stresom:

Test gumba

Zdaj, ko ste zgradili vezje, naložite to preskusno kodo (ne pozabite izbrati pravilne plošče in vrat iz Orodja> Plošča in Orodja> Vrata meniji):

const int buttonPin = 2; // the number of the button pin
void setup() {
pinMode(buttonPin, INPUT); // setup button
Serial.begin(9600); // setup serial
}
void loop(){
if(digitalRead(buttonPin) == HIGH) {
Serial.print('It Works');
delay(250);
}
}

Ko je naložen, naj bo Arduino povezan prek USB -ja in odprite serijski monitor ( Zgoraj desno> Serijski monitor ). Morali bi videti besede Deluje se prikažejo vsakič, ko pritisnete gumb.

Če se nič ne zgodi, pojdite in dvakrat preverite vezje.

Nastavitev OLED

Za upravljanje zaslona morate namestiti dve knjižnici. Prenesite datoteko Adafruit_SSD1306 in knjižnice Adafruit-GFX [No Longer Available] iz Github in jih shranite v mapo knjižnice. Če niste prepričani, kje so knjižnične mape, preberite mojo vadnico za retro igre, kjer podrobneje konfiguriram ta isti zaslon.

Znova zaženite Arduino IDE in naložite preskusno skico iz Datoteka> Primeri meni. Izberite Adafruit SSD1306 in potem ssd1306_128x64_i2c . Naložite to kodo (trajalo bo nekaj časa) in na zaslonu bi morali videti veliko oblik in vzorcev:

Če se nič ne zgodi, dvakrat preverite povezave. Če po preverjanju še vedno ne bo delovalo, boste morali spremeniti vzorčno kodo.

poiščite osmrtnico za določeno osebo brezplačno

Spremenite to vrstico (na začetku nastaviti funkcija):

display.begin(SSD1306_SWITCHCAPVCC, 0x3D);

Za to:

display.begin(SSD1306_SWITCHCAPVCC, 0x3C);

To pove knjižnici posebne podrobnosti o zaslonu, ki ga uporabljate. Zdaj bi morali biti pripravljeni za nadaljevanje gradnje.

Primer

Če to gradite na plošči ali je ne želite shraniti, lahko ta korak preskočite.

To škatlo sem oblikoval in 3D natisnil. Vklopite datoteke Thingiverse . Ne skrbite, če nimate 3D tiskalnika - spletne storitve 3D vozlišča in Shapeways nuditi spletne storitve tiskanja.

To škatlo lahko preprosto naredite iz lesa ali pa kupite plastiko projektna škatla .

Pokrov je preprosta oblika s potiskom in vsebuje nekaj izrezov za strojno opremo:

Kodeks

Zdaj, ko je vse pripravljeno, je čas za kodo. Evo, kako bo to delovalo Psevdokoda :

if button is pressed
generate random number
if random number is 20
show graphic
else if random number is 1
show graphic
else
show number

Da bi to delovalo pravilno, je treba ustvariti naključno število - to je zvitek matrice. Arduino ima generator naključnih številk, imenovan naključen , vendar ga ne bi smeli uporabljati. Čeprav je dovolj dobro za osnovne naključne naloge, preprosto ni dovolj naključno za elektronsko matrico. Razlogi za to so nekoliko zapleteni, če pa vas zanima, lahko preberete več boallen.com .

Prenesite datoteko TrueRandom knjižnico avtorja sirleech na Githubu. Dodajte to v mapo knjižnice in znova zaženite IDE.

Zdaj ustvarite novo datoteko in nastavite svojo začetno kodo (ali pa preprosto vzemite končno kodo iz GitHub -a):

#include
#include
#include
#include
#include
Adafruit_SSD1306 display(4);
void setup() {
display.begin(SSD1306_SWITCHCAPVCC, 0x3C); // setup the OLED
pinMode(buttonPin, INPUT); // setup button
}
void loop() {

}

Ta koda konfigurira OLED in vključuje vse knjižnice, ki jih potrebujete za komunikacijo, skupaj z vašo novo knjižnico naključnih števil. Zdaj dodajte to v glavno zanko:

if(digitalRead(buttonPin) == HIGH) {
delay(15);
if(digitalRead(buttonPin) == HIGH) {
display.fillScreen(BLACK); // erase the whole display
display.setTextColor(WHITE);
display.setTextSize(2);
display.setCursor(0, 0);
display.println(TrueRandom.random(1, 21)); // print random number
display.display(); // write to display
delay(100);
}
}

To je naenkrat precej osnovno, vendar je delujoč D20. Kadar koli pritisnete gumb, se na zaslonu prikaže naključno število med eno in 20:

To dobro deluje, vendar je nekoliko dolgočasno. Naj bo bolje. Ustvarite dve novi metodi, drawDie in eraseDie :

void drawDie() {
display.drawRect(32, 0, 64, 64, WHITE);
}

Ti bodo na sredini zaslona potegnili matrico. Morda boste želeli to še bolj zakomplicirati, morda z risanjem D20 ali D12 itd., Vendar je preprosteje narisati osnovno šeststransko matrico. Tu je osnovna uporaba:

drawDie();

Nato spremenite svojo glavno zanko, da narišete naključno število, le večje in na sredini. Spremenite velikost besedila in kazalec na to:

display.setTextColor(WHITE);
display.setCursor(57, 21);

Zdaj izgleda veliko bolje:

Edina težava je pri številkah, večjih od devetih:

Rešitev za to je preprosta. Pri vseh številkah, manjših od 10, bo kazalec nastavljen na drugačen položaj kot pri tistih številkah 10 ali več. Zamenjaj to vrstico:

kako ponastaviti safari na mac

display.setCursor(57, 21);

S tem:

int roll = TrueRandom.random(1, 21); // store the random number
if (roll <10) {
// single character number
display.setCursor(57, 21);
}
else {
// dual character number
display.setCursor(47, 21);
}

Evo, kako to zdaj izgleda:

Zdaj ostanejo le slike, ko zavrtite kritičen zadetek ali zgrešite. Obstaja nekaj korakov, vendar je to dovolj preprost postopek.

Poiščite primerno sliko, ki jo želite uporabiti (preprostejša, tem bolje, ker je zaslon samo enobarven). Tu so slike, ki sem jih uporabil:

Zasluge za sliko: publicdomainvectors.org

Vse slike, ki jih želite uporabiti, boste morali pretvoriti v matriko HEX. To je prikaz slike v kodni obliki. Za to je na voljo veliko orodij, nekatera pa so napisana posebej za zaslone OLED. Najlažji način je, da uporabite PicturetoC_Hex spletno orodje. Tu so potrebne nastavitve:

koliko računov lahko imate na netflixu

Naložite svojo sliko in nastavite obliko kode na HEX: 0x . Nastavljeno Uporablja za do Črno/belo za vse funkcije risanja slik . Vse druge možnosti pustite privzete. Če želite, lahko sliko spremenite tukaj. Pritisnite Pridobite niz C in prikazali bi se slikovni podatki:

Te ustvarjene podatke boste potrebovali v minuti. Ustvarite dve imenovani funkciji drawExplosion in drawSkull (ali primerno ime za vašo različico). Tukaj je koda:

void drawExplosion() {
// store image in EEPROM
static const unsigned char PROGMEM imExp[] = {
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x30,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xfc,0x00,0x00,0x00,0x00,0x00,0x78,0x7f,0xff,0xc0,0x00,0x00,0x00,0x00,0xfe,0xff,0xff,0xf0,0x00,0x00,0x00,0x3f,0xff,0xff,0xff,0xfb,0x00,0x00,0x00,0x7f,0xff,0xff,0xff,0xff,0xc0,0x00,0x00,0x7f,0xff,0xff,0xff,0xff,0xff,0x00,0x01,0xff,0xff,0xff,0xff,0xff,0xff,0x80,0x03,0xff,0xff,0xff,0xff,0xff,0xff,0x80,0x03,0xff,0xff,0xff,0xff,0xff,0xff,0x80,0x03,0xff,0xff,0xff,0xff,0xff,0xff,0xc0,0x03,0xff,0xff,0xff,0xff,0xff,0xff,0xf0,0x07,0xff,0xff,0xff,0xff,0xff,0xff,0xf0,0x07,0xff,0xff,0xff,0xff,0xff,0xff,0xf0,0x07,0xff,0xff,0xff,0xff,0xff,0xff,0xe0,0x07,0xff,0xff,0xff,0xff,0xff,0xff,0xc0,0x0f,0xff,0xff,0xff,0xff,0xff,0xff,0xe0,0x1f,0xff,0xff,0xff,0xff,0xff,0xff,0xe0,0x1f,0xff,0xff,0xff,0xff,0xff,0xff,0xe0,0x0f,0xff,0xff,0xff,0xff,0xff,0xff,0xf0,0x03,0xff,0xff,0xff,0xff,0xff,0xff,0xf0,0x03,0xff,0xff,0xff,0xff,0xff,0xff,0xf0,0x03,0xff,0xff,0xff,0xff,0xff,0xff,0xe0,0x01,0xff,0xff,0xff,0xff,0xff,0xff,0x00,0x00,0x0f,0xff,0xff,0xff,0xff,0xfe,0x00,0x00,0x07,0xff,0xff,0xf9,0xff,0xd8,0x00,0x00,0x00,0x3f,0xff,0xf0,0x0f,0x00,0x00,0x00,0x00,0x1f,0x1f,0xf0,0x00,0x00,0x00,0x00,0x00,0x00,0x0f,0xe0,0x00,0x00,0x00,0x00,0x00,0x00,0x0f,0xe0,0x00,0x00,0x00,0x00,0x00,0x00,0x0f,0xe0,0x00,0x00,0x00,0x00,0x00,0x00,0x0f,0xf0,0x00,0x00,0x00,0x00,0x00,0x00,0x0f,0xf0,0x00,0x00,0x00,0x00,0x00,0x00,0x0f,0xf0,0x00,0x00,0x00,0x00,0x00,0x00,0x3f,0xf8,0x00,0x00,0x00,0x00,0x00,0x00,0x7f,0xff,0x00,0x00,0x00,0x00,0x00,0x00,0x7f,0xff,0x00,0x00,0x00,0x00,0x00,0x00,0x7f,0xff,0x00,0x00,0x00,0x00,0x00,0x00,0x7f,0xfe,0x00,0x00,0x00,0x00,0x00,0x00,0x7f,0xfc,0x00,0x00,0x00,0x00,0x00,0x00,0x0f,0xf0,0x00,0x00,0x00,0x00,0x00,0x00,0x07,0xf0,0x00,0x00,0x00,0x00,0x00,0x00,0x07,0xe0,0x00,0x00,0x00,0x00,0x00,0x00,0x07,0xe0,0x00,0x00,0x00,0x00,0x00,0x00,0x07,0xe0,0x00,0x00,0x00,0x00,0x00,0x00,0x07,0xf0,0x00,0x00,0x00,0x00,0x00,0x00,0x0f,0xf0,0x00,0x00,0x00,0x00,0x00,0x00,0x0f,0xf8,0x00,0x00,0x00,0x00,0x00,0x00,0x0f,0xfc,0x00,0x00,0x00,0x00,0x00,0x00,0x1f,0xff,0x00,0x00,0x00,0x00,0x00,0x0f,0xff,0xff,0xff,0x00,0x00,0x00,0x07,0xff,0xff,0xff,0xff,0xf0,0x00,0x00,0x0f,0xff,0xff,0xff,0xff,0xff,0x00,0x00,0x1f,0xff,0xff,0xff,0xff,0xff,0x00,0x00,0x1f,0xff,0xff,0xff,0xff,0xfc,0x00,0x00,0x01,0xbf,0xff,0xff,0xff,0x30,0x00,0x00,0x00,0x13,0xf7,0xb8,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00
};
display.drawBitmap(0, 0, imExp, 64, 62, 1); // draw mushroom cloud
}
void drawSkull() {
// store image in EEPROM
static const unsigned char PROGMEM imSku[] = {
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xe0,0x00,0x00,0x00,0x00,0x30,0x00,0x00,0xf0,0x00,0x00,0x00,0x00,0x78,0x00,0x07,0xf0,0x00,0x00,0x00,0x00,0xfc,0x00,0x07,0xf8,0x00,0x00,0x00,0x00,0xfe,0x00,0x07,0xf8,0x00,0x00,0x00,0x01,0xfe,0x00,0x07,0xfc,0x00,0x00,0x00,0x01,0xfe,0x00,0x07,0xfe,0x00,0x3f,0xc0,0x03,0xfe,0x00,0x01,0xff,0x81,0xff,0xfc,0x07,0xec,0x00,0x00,0x3f,0xc7,0xff,0xff,0x1f,0xc0,0x00,0x00,0x0f,0xcf,0xff,0xff,0xdf,0x00,0x00,0x00,0x07,0xbf,0xff,0xff,0xee,0x00,0x00,0x00,0x01,0x7f,0xff,0xff,0xf0,0x00,0x00,0x00,0x00,0xff,0xff,0xff,0xf8,0x00,0x00,0x00,0x01,0xff,0xff,0xff,0xf8,0x00,0x00,0x00,0x03,0xff,0xff,0xff,0xfc,0x00,0x00,0x00,0x07,0xff,0xff,0xff,0xfe,0x00,0x00,0x00,0x0f,0xff,0xff,0xff,0xff,0x00,0x00,0x00,0x0f,0xff,0xff,0xff,0xff,0x00,0x00,0x00,0x1f,0xff,0xff,0xff,0xff,0x80,0x00,0x00,0x1f,0xff,0xff,0xff,0xff,0x80,0x00,0x00,0x1f,0xff,0xff,0xff,0xff,0x80,0x00,0x00,0x1f,0xff,0xff,0xff,0xff,0x80,0x00,0x00,0x1f,0xff,0xff,0xff,0xff,0x80,0x00,0x00,0x1f,0xff,0xff,0xff,0xff,0x80,0x00,0x00,0x1e,0x3f,0xff,0x3f,0xc7,0x80,0x00,0x00,0x1e,0x0c,0x0f,0x00,0x07,0x80,0x00,0x00,0x1e,0x00,0x0f,0x00,0x0f,0x80,0x00,0x00,0x1e,0x00,0x19,0x80,0x0f,0x00,0x00,0x00,0x0f,0x00,0x19,0x80,0x0f,0x00,0x00,0x00,0x0d,0x00,0x30,0xc0,0x1f,0x00,0x00,0x00,0x05,0x80,0x70,0xc0,0x1e,0x00,0x00,0x00,0x05,0xf0,0xe0,0xe0,0x36,0x00,0x00,0x00,0x01,0xff,0xe0,0x7f,0xf0,0x00,0x00,0x00,0x03,0xff,0xc4,0x7f,0xf0,0x00,0x00,0x00,0x03,0xff,0xcc,0x7f,0xf0,0x00,0x00,0x00,0x03,0xff,0xcc,0x7f,0xf0,0x00,0x00,0x00,0x03,0xff,0x9e,0x7f,0xf0,0x00,0x00,0x00,0x00,0xff,0xfe,0x7f,0xc0,0x00,0x00,0x00,0x00,0x01,0xff,0xf8,0x1c,0x00,0x00,0x00,0x03,0xe0,0x3f,0x01,0xbf,0x00,0x00,0x00,0x07,0xa6,0x40,0x09,0x9f,0x80,0x00,0x00,0x1f,0x27,0x5a,0x39,0x9f,0xf8,0x00,0x01,0xff,0x27,0xdb,0x39,0x0f,0xfc,0x00,0x03,0xfe,0x31,0x7f,0x39,0x07,0xfc,0x00,0x03,0xfc,0x10,0x1a,0x02,0x03,0xf8,0x00,0x03,0xf8,0x10,0x00,0x02,0x01,0xf0,0x00,0x01,0xf8,0x10,0x00,0x02,0x01,0xe0,0x00,0x00,0x78,0x10,0x00,0x02,0x00,0xe0,0x00,0x00,0x70,0x30,0x00,0x02,0x00,0x00,0x00,0x00,0x30,0x20,0x00,0x03,0x00,0x00,0x00,0x00,0x00,0x64,0x00,0x1b,0x00,0x00,0x00,0x00,0x00,0x73,0x55,0x63,0x00,0x00,0x00,0x00,0x00,0xf9,0x55,0x4f,0x00,0x00,0x00,0x00,0x00,0x7f,0x14,0x1f,0x00,0x00,0x00,0x00,0x00,0x1f,0xe0,0xfe,0x00,0x00,0x00,0x00,0x00,0x0f,0xff,0xfc,0x00,0x00,0x00,0x00,0x00,0x07,0xff,0xf0,0x00,0x00,0x00,0x00,0x00,0x03,0xff,0xc0,0x00,0x00,0x00,0x00,0x00,0x00,0x38,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00
};
display.drawBitmap(0, 0, imSku, 60, 64, 1); // draw skull cloud
}

Če želite uporabiti slike, ki sem jih uporabil, nadaljujte in kopirajte kodo. Če želite uporabiti lastne slike, ki ste jih ustvarili prej, kopirajte bajtno kodo v datoteko imSku in imExp matrike po potrebi.

Tako izgledajo te slike na zaslonu:

Najpomembnejši del te kode je ta vrstica:

static const unsigned char PROGMEM imSku[]

To pove Arduinu, da shrani vaše slike v EEPROM ( kaj je EEPROM? ) namesto RAM -a ( hiter vodnik po RAM -u ). Razlog za to je preprost; Arduino ima omejen RAM in uporaba vsega za shranjevanje slik morda ne bo pustila preostale kode za izvajanje

Spremenite svoj glavni če izjavo, ki prikazuje te nove grafike, ko je zvita ena ali 20. Upoštevajte vrstice kode, ki prikazujejo tudi število zvitkov poleg slik:

if(roll == 20) {
drawExplosion();
display.setCursor(80, 21);
display.println('20');
}
else if(roll == 1) {
display.setCursor(24, 21);
display.println('1');
drawSkull();
}
else if (roll <10) {
// single character number
display.setCursor(57, 21);
display.println(roll); // write the roll
drawDie(); // draw the outline
}
else {
// dual character number
display.setCursor(47, 21);
display.println(roll); // write the roll
drawDie(); // draw the outline
}

In tako izgledajo ti novi zvitki:

To je vse za kodno stran (pojdite, vzemite kodo iz GitHub -a, če ste vse to preskočili). To lahko preprosto spremenite v D12, D8 itd.

Končna sestava

Zdaj, ko je vse ostalo končano, je čas, da vse popraviš. Priključite zaslon, pri tem pazite, da vijakov ne privijte preveč. To je verjetno najtežji del. Pri tem sem razbil zaslon, zato boste morda želeli uporabiti nekaj plastičnih podložk. Izrezala sem nekaj kvadratov Plastična kartica :

Majhne matice in vijaki se lahko težko povežejo. Nasvet: Za pritrditev matic najprej uporabite majhen kos Blu-Tacka na koncu izvijača:

Privijte gumb, priključite baterijo in zaprite pokrov. Bodite previdni, da ne zataknete žic ali jih premočno povežete, kar lahko povzroči kratek stik. Odvisno od dolžine vaših zadnjih kablov boste morda morali zaščititi izpostavljene povezave z nekaj izolacije (serijska škatla dobro deluje):

Takole izgleda v notranjosti:

In tukaj je končni izdelek:

Zdaj bi morali biti ponosni lastnik elektronskega D20!

Kakšne spremembe ste naredili? Ste slike spreminjali? Sporočite nam v komentarjih, z veseljem bi videli, kaj ste storili!

Deliti Deliti Cvrkutati E-naslov Vodnik za začetnike po animaciji govora

Animacija govora je lahko izziv. Če ste pripravljeni na začetek dodajanja dialoga v svoj projekt, bomo za vas razčlenili postopek.

Preberite Naprej Sorodne teme

• DIY
• Arduino
• Namizna igra
• Elektronika

O avtorju Joe Coburn(136 objavljenih člankov)

Joe je diplomiral iz računalništva na Univerzi v Lincolnu v Veliki Britaniji. Je poklicni razvijalec programske opreme in ko ne leti z brezpilotnimi letali ali ne piše glasbe, ga pogosto najdejo pri fotografiranju ali ustvarjanju videoposnetkov.

Več od Joea Coburna

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite