Roda amb estil amb aquest troquel electrònic D20 de bricolatge

Roda amb estil amb aquest troquel electrònic D20 de bricolatge

Voleu una cosa única per al vostre proper joc de rol de sobretaula? Què tal un D20 electrònic amb gràfics personalitzats per a èxits i fallades crítics? Avui us mostraré com construir el vostre amb un Arduino i algunes parts senzilles.





No us preocupeu si mai no heu utilitzat un Arduino, tenim un guia d'iniciació .





Pla de construcció

Aquest és un projecte senzill. Un Arduino conduirà una pantalla OLED i un botó llançarà el dau. Els gràfics personalitzats es mostraran en cas d’èxit crític o de missatges crítics. Podeu modificar fàcilment el codi perquè sigui un D8, D10 o D12.





Què necessites

  • 1 x Arduino
  • 1 x 0.96 ' Pantalla OLED I2C
  • 1 botó polsador
  • 1 x 10k? Resistència
  • 1 x Taula de pa
  • Assortiment de cables de connexió
  • Codi complet aquí, si no voleu seguir totes les instruccions per escrit.

Aquestes són les parts bàsiques que necessiteu per construir el vostre propi D20. És possible que vulgueu instal·lar-lo en una caixa (que es descriu a continuació) i soldar el circuit en un estat més permanent. Aquí teniu les parts addicionals que necessiteu per fer-ho:

Aquestes pantalles OLED són molt boniques. Normalment es poden comprar en blanc, blau, groc o una barreja dels tres. N'he comprat un de color blau, que coincideix amb el meu cas. Assegureu-vos que obtingueu un I2C model en lloc de SPI .



Gairebé qualsevol Arduino serà adequat. He escollit un Nano, ja que són prou petits per encabir-lo. Consulteu la nostra guia de compra per obtenir més informació sobre els models Arduino.

El Circuit

Aquí teniu el circuit que necessiteu:





Connecteu-vos VCC i GND a la pantalla OLED de l'Arduino + 5V i terra . Connecteu-vos analògic 4 a l'Arduino fins al passador etiquetat SDA . Connecteu-vos analògic 5 fins al SCL pin. Aquests pins contenen els circuits necessaris per conduir la pantalla mitjançant el bus I2C. Els pins exactes variaran segons el model, però A4 i A5 s’utilitzen a Nano i Uno. Comproveu el Documentació de la biblioteca de cables per al vostre model si no utilitzeu un Uno o Nano.

Connecteu la bateria a terra i el VI pin. Això significa tensió d’entrada i accepta diferents tensions de CC, però primer comproveu el vostre model específic i, de vegades, pot variar lleugerament.





Connecteu el botó a digital pin 2 . Fixeu-vos en com funcionen els 10k? la resistència està connectada a terra. Això és molt important. Això es coneix com a resistència pull-down i impedeix que Arduino detecti dades falses o interferències en prémer el botó. També serveix per protegir el tauler. Si no s’utilitzés aquesta resistència, + 5V entrarien directament a terra. Això es coneix com a curta i és una manera fàcil de matar un Arduino.

Si esteu soldant aquest circuit, protegiu les vostres connexions amb tubs termoretràctils:

Assegureu-vos que no l’escalfeu massa i feu-ho només quan estigueu segur que el circuit funciona. És possible que també vulgueu torçar els cables en parells. Això els manté nets i els ajuda a protegir-los de l’estrès indegut:

Prova de botons

Ara que heu creat el circuit, pengeu aquest codi de prova (assegureu-vos de seleccionar la placa i el port correctes de Eines> Tauler i Eines> Port menús):

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);
}
}

Un cop carregat, manteniu l'Arduino connectat per USB i obriu el monitor sèrie ( A la part superior dreta> Monitor de sèrie ). Hauríeu de veure les paraules Funciona apareixerà cada vegada que premeu el botó.

Si no passa res, aneu a comprovar el vostre circuit.

Configuració OLED

Cal instal·lar dues biblioteques per conduir la pantalla. Descarregueu el fitxer Adafruit_SSD1306 i les biblioteques Adafruit-GFX [Ja no disponibles] de Github i deseu-les a la carpeta de la biblioteca. Si no esteu segur d'on es troben les carpetes de la biblioteca, aneu a llegir el meu tutorial de jocs retro, on configuro aquesta mateixa pantalla amb més detall.

Reinicieu el vostre IDE Arduino i pengeu un esbós de prova des de Fitxer> Exemples menú. Seleccioneu Adafruit SSD1306 i llavors ssd1306_128x64_i2c . Pengeu aquest codi (trigarà una estona) i hauríeu de veure moltes formes i patrons a la pantalla:

Si no passa res, reviseu les connexions. Si, després de comprovar-ho, encara no funcionarà, haureu de modificar el codi de mostra.

la millor manera de vendre còmics

Canvieu aquesta línia (al començament del fitxer configuració funció):

display.begin(SSD1306_SWITCHCAPVCC, 0x3D);

Per a això:

display.begin(SSD1306_SWITCHCAPVCC, 0x3C);

Això indica a la biblioteca detalls específics sobre la pantalla que utilitzeu. Ara hauríeu d'estar a punt per continuar amb la compilació.

El cas

Si el construïu en un tauler de revisió o no voleu encabir-lo, podeu ometre aquest pas.

Vaig dissenyar i vaig imprimir en 3D aquesta caixa. Obriu els fitxers Thingiverse . No us preocupeu si no teniu una impressora 3D: serveis en línia Concentradors 3D i Shapeways proporcionar serveis d’impressió en línia.

Feu fàcilment aquesta caixa amb fusta o bé adquirint un plàstic caixa del projecte .

La tapa és un disseny simple d’ajust push i conté alguns retalls per al maquinari:

El codi

Ara que tot està a punt, és el moment del codi. A continuació s’explica com funcionarà Pseudocodi :

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

Perquè això funcioni correctament, cal generar un número aleatori: aquest és el llançament de l’encuny. Arduino té un generador de números aleatoris anomenat aleatori , però no l’hauria d’utilitzar. Tot i que és prou bo per a tasques aleatòries bàsiques, no és prou aleatori per a un dau electrònic. Els motius pels quals són una mica complicats, però podeu llegir-ne més si us interessa boallen.com .

Descarregueu el fitxer TrueRandom biblioteca de sirleech a Github. Afegiu-lo a la carpeta de la biblioteca i reinicieu l'IDE.

Ara creeu un fitxer nou i configureu el codi inicial (o simplement agafeu el codi acabat de GitHub):

#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() {

}

Aquest codi configura l'OLED i inclou totes les biblioteques que necessiteu per comunicar-vos-hi, juntament amb la vostra nova biblioteca de números aleatoris. Ara afegiu-lo al bucle principal:

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);
}
}

Això és bastant bàsic al minut, però és un D20 que funciona. Sempre que es prem el botó, es mostra a la pantalla un número aleatori entre un i 20:

Funciona bé, però és una mica avorrit. Fem-ho millor. Creeu dos mètodes nous, drawDie i esborrar :

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

Aquests dibuixaran un dau al centre de la pantalla. És possible que vulgueu fer això més complicat, potser dibuixant un D20 o un D12, etc., però és més senzill dibuixar un dau bàsic de sis cares. Aquí teniu l’ús bàsic:

drawDie();

A continuació, modifiqueu el bucle principal per dibuixar el número aleatori, només més gran i al mig. Canvieu la mida del text i el cursor per això:

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

Ara es veu molt millor:

L'únic problema és amb números superiors a nou:

La solució per això és senzilla. Qualsevol número inferior a 10 tindrà el cursor configurat en una posició diferent a la dels números 10 o superior. Substitueix aquesta línia:

l'ordinador no reconeix el telèfon quan està connectat
display.setCursor(57, 21);

Amb aquest:

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);
}

Això és el que sembla ara:

Ara només queda per a les imatges quan es produeix un èxit o un error crític. Hi ha uns quants passos, però és un procés prou senzill.

Cerqueu la imatge adequada que vulgueu utilitzar (com més senzilla millor, ja que la pantalla només té un sol color). Aquí teniu les imatges que he fet servir:

Crèdit de la imatge: publicdomainvectors.org

Qualsevol imatge que vulgueu utilitzar haurà de convertir-se a una matriu HEX. Es tracta d’una representació de la imatge en forma de codi. Hi ha moltes eines disponibles per fer-ho, i algunes estan escrites específicament per a pantalles OLED. La forma més senzilla és utilitzar el fitxer PicturetoC_Hex eina en línia. Aquí teniu els paràmetres necessaris:

podeu recuperar missatges suprimits a Facebook

Pengeu la vostra imatge i configureu el format del codi a HEX: 0x . Conjunt Usat per a Negre / blanc per a totes les funcions d'imatge de dibuix . Deixeu totes les altres opcions per defecte. Podeu canviar la mida de la imatge aquí si ho necessiteu. Premeu Obteniu la cadena C. i hauríeu de veure com apareixen les dades de la imatge:

Necessitareu aquestes dades generades en un minut. Creeu dues funcions anomenades drawExplosion i drawSkull (o un nom adequat per a la vostra versió). Aquí teniu el codi:

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
}

Si voleu utilitzar les imatges que he fet servir, seguiu endavant i copieu el codi. Si voleu utilitzar les vostres pròpies imatges que vau generar anteriorment, copieu el codi de bytes al fitxer imSku i imExp matrius segons calgui.

A continuació, es mostren aquestes imatges a la pantalla:

La part més important d'aquest codi és aquesta línia:

static const unsigned char PROGMEM imSku[]

Això indica a Arduino que emmagatzemi les vostres imatges a l'EEPROM ( què és EEPROM? ) en lloc de la seva memòria RAM ( guia ràpida de memòria RAM ). El motiu d’això és senzill; l'Arduino té una memòria RAM limitada i, si l'utilitzeu tot per emmagatzemar imatges, pot ser que no deixi cap resta per executar el vostre codi

Modifiqueu la vostra pàgina principal si declaració per mostrar aquests nous gràfics quan es llança un o 20. Tingueu en compte les línies de codi per mostrar també el número rodat al costat de les imatges:

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
}

I aquí teniu l’aspecte d’aquests nous rotllos:

Això és tot pel que fa al codi (aneu a agafar el codi de GitHub si heu omès tot això). Podeu modificar-ho fàcilment per convertir-lo en un D12, D8, etc.

Assemblea final

Ara que s’ha acabat tota la resta, és hora de posar-ho tot a la caixa. Enganxeu la pantalla i assegureu-vos de no estrènyer-los excessivament. Aquesta és possiblement la part més difícil. Vaig trencar una pantalla fent-ho, de manera que és possible que vulgueu utilitzar algunes rentadores de plàstic. Vaig tallar alguns quadrats Plasticard :

Es poden connectar fàcilment els cargols i femelles petites. Consell: Utilitzeu un petit tros de Blu-Tack a l’extrem d’un tornavís per assentar inicialment les femelles:

Enrosqueu el botó, connecteu la bateria i tanqueu la tapa. Aneu amb compte de no atrapar cap cable ni agrupar-lo massa fort, cosa que pot provocar un curtcircuit. Depenent de la longitud dels cables posteriors, és possible que hàgiu de protegir les connexions exposades amb un cert aïllament (una caixa de sèrie funciona bé):

A continuació s’explica el seu aspecte:

I aquí teniu el producte acabat:

Ara hauríeu de ser l’orgullós propietari d’un D20 electrònic.

Quines modificacions heu fet? Heu canviat les imatges? Feu-nos-ho saber als comentaris, ens encantaria veure què heu fet.

Compartir Compartir Tweet Correu electrònic Una guia per a principiants d’animació de la parla

Animar la parla pot ser un repte. Si esteu preparat per començar a afegir diàlegs al vostre projecte, us desglossarem el procés.

Llegiu a continuació
Temes relacionats
  • Bricolatge
  • Arduino
  • Joc de taula
  • Electrònica
Sobre l'autor Joe Coburn(136 articles publicats)

Joe és llicenciat en Informàtica per la Universitat de Lincoln, Regne Unit. És un desenvolupador de programari professional i, quan no fa drons voladors ni escriu música, sovint se’l pot trobar fent fotos o produint vídeos.

Més de Joe Coburn

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us