Разточете се със стил с тази DIY електронна матрица D20

Разточете се със стил с тази DIY електронна матрица D20

Искате ли нещо малко уникално за следващата си настолна ролева игра? Какво ще кажете за електронен D20 с персонализирана графика за критични попадения и пропуски? Днес ще ви покажа как да създадете свой собствен с Arduino и няколко прости части.





Не се притеснявайте, ако никога преди не сте използвали Arduino, ние имаме ръководство за стартиране .





Строителен план

Това е прост проект. Arduino ще управлява OLED дисплей, а бутонът ще завърти матрицата. Персонализираните графики ще се показват за критични удари или критични пропуски. Можете лесно да промените кода в D8, D10 или D12.





От какво имаш нужда

  • 1 x Arduino
  • 1 x 0,96 ' I2C OLED дисплей
  • 1 x бутон
  • 1 x 10k? Резистор
  • 1 x Платка
  • Разнообразни свързващи проводници
  • Пълен код тук, ако не искате да следвате целия път през писмените инструкции.

Това са основните части, от които се нуждаете, за да изградите свой собствен D20. Може да искате да го инсталирате в калъф (обсъдено по -долу) и да запоите веригата в по -постоянно състояние. Ето допълнителните части, които ще трябва да направите за това:

Тези OLED дисплеи са много готини. Обикновено те могат да бъдат закупени в бяло, синьо, жълто или смес от трите. Купих такъв в синьо, за да отговаря на моя калъф. Уверете се, че получавате I2C модел вместо SPI .



Почти всеки Arduino ще бъде подходящ. Избрах Nano, тъй като те са достатъчно малки, за да се поберат в кутията. Разгледайте нашето ръководство за покупка за повече информация за моделите Arduino.

Веригата

Ето схемата, от която се нуждаете:





Свържете се VCC и GND на OLED дисплея към Arduino +5V и земя . Свържете се аналогов 4 на Arduino до щифта с етикет SDA . Свържете се аналогов 5 към SCL щифт. Тези щифтове съдържат веригите, необходими за задвижване на дисплея с помощта на I2C шината. Точните щифтове ще варират в зависимост от модела, но A4 и A5 се използват за Nano и Uno. Проверете Документация за библиотека от проводници за вашия модел, ако не използвате Uno или Nano.

Свържете батерията към земята и ВИНО щифт. Това означава напрежение в и приема разнообразие от различни DC напрежения - но първо проверете вашия конкретен модел и понякога може да варира леко.





Свържете бутона към цифров пин 2 . Забелязвате как 10k? резисторът е свързан към земята. Това е много важно! Това е известно като издърпващ резистор и предотвратява Arduino да открива фалшиви данни или смущения при натискане на бутон. Той също така служи за защита на дъската. Ако този резистор не беше използван, +5V ще влезе направо в земята. Това е известно като a мъртъв и е лесен начин да убиете Arduino.

Ако запоявате тази верига, защитете връзките си с термосвиваеми тръби:

Уверете се, че не го загрявате прекалено много и го направете само след като сте сигурни, че веригата работи. Може също да искате да завъртите кабелите си по двойки. Това ги поддържа чисти и ги предпазва от ненужен стрес:

Бутон тест

Сега, след като сте изградили веригата, качете този тест код (уверете се, че сте избрали правилната платка и порт от Инструменти> Табло и Инструменти> Порт менюта):

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

След като бъде качен, поддържайте Arduino свързан чрез USB и отворете серийния монитор ( Горе вдясно> Сериен монитор ). Трябва да видите думите Работи се появява всеки път, когато натиснете бутона.

Ако нищо не се случи, отидете и проверете отново веригата си.

OLED настройка

Трябва да инсталирате две библиотеки, за да управлявате дисплея. Изтеглете Adafruit_SSD1306 и Adafruit-GFX [Няма повече налични] библиотеки от Github и ги запишете във вашата библиотечна папка. Ако не сте сигурни къде се намират папките на библиотеката, прочетете моя урок за ретро игри, където конфигурирам същия дисплей по -подробно.

Рестартирайте вашата Arduino IDE и качете тестова скица от Файл> Примери меню. Изберете Adafruit SSD1306 и тогава ssd1306_128x64_i2c . Качете този код (ще отнеме известно време) и трябва да видите много форми и шарки на дисплея:

Ако нищо не се случи, проверете отново връзките си. Ако след проверка все още няма да работи, ще трябва да промените примерния код.

как да увеличите мак

Променете този ред (в началото на настройвам функция):

display.begin(SSD1306_SWITCHCAPVCC, 0x3D);

До това:

display.begin(SSD1306_SWITCHCAPVCC, 0x3C);

Това казва на библиотеката конкретни подробности за дисплея, който използвате. Вече трябва да сте готови да продължите с изграждането.

Случаят

Ако изграждате това върху макет или не искате да го съхранявате, можете да пропуснете тази стъпка.

Проектирах и 3D отпечатах тази кутия. Включете файловете Thingiverse . Не се притеснявайте, ако нямате 3D принтер - онлайн услуги 3D концентратори и Shapeways предоставят онлайн услуги за печат.

Можете лесно да направите тази кутия от дърво или да закупите пластмаса кутия за проект .

Капакът е прост дизайн с притискане и съдържа няколко изрези за хардуера:

Кодът

Сега, когато всичко е готово, е време за кода. Ето как ще работи Псевдокод :

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

За да работи това правилно, трябва да се генерира произволно число - това е ролката на матрицата. Arduino има генератор на произволни числа, наречен случаен , но не трябва да го използвате. Въпреки че е достатъчно добър за основни случайни задачи, просто не е достатъчно случаен за електронна матрица. Причините защо са донякъде сложни, но можете да прочетете повече, ако ви интересува boallen.com .

Изтеглете TrueRandom библиотека от сърлич на Github. Добавете това към папката на библиотеката си и рестартирайте IDE.

Сега създайте нов файл и настройте първоначалния си код (или просто вземете готовия код от 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() {

}

Този код конфигурира OLED и включва всички библиотеки, от които се нуждаете, за да комуникирате с него, заедно с новата ви библиотека с произволни числа. Сега добавете това към основния цикъл:

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

Това е доста елементарно в минутата, но е работещ D20. Всеки път, когато бутонът е натиснат, на екрана се показва произволно число между едно и 20:

Това работи добре, но е малко скучно. Нека го направим по -добър. Създайте два нови метода, drawDie и eraseDie :

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

Те ще изтеглят матрица в средата на екрана. Може да искате да направите това по-сложно, може би като нарисувате D20 или D12 и така нататък, но е по-лесно да нарисувате основна шестстранна матрица. Ето основното използване:

drawDie();

След това променете основния си цикъл, за да нарисувате произволно число, само по -голямо и в средата. Променете размера на текста и курсора на това:

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

Сега изглежда много по -добре:

Единственият проблем е с числа, по -големи от девет:

Поправката за това е проста. Всички числа, по -малки от 10, ще поставят курсора на различна позиция от тези числа 10 или по -големи. Заменете този ред:

къде да намеря ключа за защита на мрежата
display.setCursor(57, 21);

С тази:

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

Ето как изглежда това сега:

Сега остава само изображенията, когато хвърлите критичен удар или пропуснете. Има няколко стъпки, но това е достатъчно прост процес.

Намерете подходящо изображение, което искате да използвате (колкото по -просто, толкова по -добре, тъй като дисплеят е само в един цвят). Ето изображенията, които използвах:

Кредит на изображението: publicdomainvectors.org

Всяко изображение, което искате да използвате, ще трябва да бъде преобразувано в HEX масив. Това е представяне на изображението в кодова форма. Налични са много инструменти за това, а някои са написани специално за OLED дисплеи. Най -лесният начин е да използвате PicturetoC_Hex онлайн инструмент. Ето необходимите настройки:

айфона ми не се показва в itunes

Качете вашето изображение и задайте формата на кода на HEX: 0x . Комплект Използвани за да се Черно/бяло за всички функции за рисуване на изображения . Оставете всички останали опции по подразбиране. Можете да промените размера на изображението тук, ако е необходимо. Натиснете Вземете C String и трябва да видите данните за изображението:

Тези генерирани данни ще ви трябват след минута. Създайте две функции, наречени drawExplosion и drawSkull (или подходящо име за вашата версия). Ето кода:

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
}

Ако искате да използвате изображенията, които съм използвал, продължете и копирайте кода. Ако искате да използвате свои собствени изображения, които сте генерирали по -рано, копирайте байтовия код в imSku и imExp масиви според изискванията.

Ето как изглеждат тези изображения на дисплея:

Най -важната част от този код е този ред:

static const unsigned char PROGMEM imSku[]

Това казва на Arduino да съхранява вашите изображения в EEPROM ( какво е EEPROM? ) вместо неговата RAM ( кратко ръководство за RAM ). Причината за това е проста; Arduino има ограничена оперативна памет и използването на всичко това за съхраняване на изображения може да не остави останало за изпълнение на кода ви

Променете основната си ако изявление за показване на тези нови графики, когато се пусне един или 20. Обърнете внимание на редовете на кода, за да се покаже и броят на изображенията заедно с изображенията:

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
}

А ето как изглеждат тези нови ролки:

Това е всичко за кодовата страна (отидете вземете кода от GitHub, ако сте пропуснали всичко това). Можете лесно да промените това като D12, D8 и т.н.

Окончателно сглобяване

Сега, когато всичко останало е готово, е време да съберете всичко. Закрепете дисплея, като внимавате да не стегнете прекалено болтовете. Това е може би най -трудната част. Счупих дисплей по този начин, така че може да искате да използвате някои пластмасови шайби. Изрязах няколко квадрата от Пластмасова карта :

Малките гайки и болтове могат да бъдат трудни за свързване. Бакшиш: Използвайте малко парче Blu-Tack в края на отвертката, за да поставите първоначално гайките:

Завийте бутона, свържете батерията и затворете капака. Внимавайте да не захванете проводници или да ги сгънете твърде плътно, което може да причини късо съединение. В зависимост от дължината на задните ви проводници, може да се наложи да защитите откритите връзки с някаква изолация (серийната кутия работи добре):

Ето как изглежда вътре:

И ето готов продукт:

Сега трябва да сте горд собственик на електронен D20!

Какви промени направихте? Сменихте ли изображенията? Кажете ни в коментарите, ще се радваме да видим какво сте направили!

Дял Дял Туит електронна поща Ръководство за начинаещи по анимиране на речта

Анимирането на речта може да бъде предизвикателство. Ако сте готови да започнете да добавяте диалог към вашия проект, ние ще разбием процеса вместо вас.

Прочетете Напред
Свързани теми
  • Направи си сам
  • Arduino
  • Настолна игра
  • Електроника
За автора Джо Кобърн(136 статии са публикувани)

Джо е завършил компютърни науки от университета в Линкълн, Великобритания. Той е професионален разработчик на софтуер и когато не лети с дронове или пише музика, често може да бъде намерен да прави снимки или да произвежда видеоклипове.

Още от Джо Кобърн

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате