[Poradnik] Viprin's Drawing Editor - tworzenie rysunków na mapie

Tak jak zapewne już zauważyliście, jest to temat poświęcony stronie Viprin's Drawing Editor. Wierzę, że mamy w naszej społeczności wiele utalentowanych myszek, które chciałyby przelać swoją twórczość na nasze Transformicowe mapy tylko nie wiedzą jak to zrobić w prosty sposób.

Pierwsza rzecz - co to takiego jest Viprin's Drawing Editor?
To strona założona przez użytkownika Viprin poświęcona w całości i wyłącznie edytowaniu kodu XML i dodawaniu do niego linii JD, w związku z czym nie musimy tego robić ręcznie testując każdą edycję kodu.

Rzecz numer 2 - Jak z tego korzystać?
Samo włączenie tego edytora jest banalnie proste:
1. Wpisujemy w przeglądarkę adres http://adamay000.github.io/vde/index.html.
LUB/I
2. Pobieramy wersję offline tutaj http://vipstats.s372.xrea.com/draw/vde.zip, dzięki której będziemy mogli pracować z programem bez konieczności łączenia się z internetem lub dla szybszego dostępu bezpośrednio z komputera.

UWAGA:
Zaleca się używać przeglądarki Firefox lub Google Chrome, ponieważ na innych przeglądarkach niektóre funkcje edytora mogą nie działać. (np. funkcja zoom)

Po wejściu na stronę pojawi nam się taki oto obraz

Objaśnienia

1. Opcja Zoom oraz suwak, dzięki którym możemy powiększyć/przybliżyć obszar, na którym chcemy rysować. (domyślna wartość to 1)
2. Zakładka Settings (Ustawienia) - Opis poniżej
3. Zakładka Save/Load (Zapisz/Wczytaj) - Opis poniżej
4. Zakładka Help (Pomoc) - Opis poniżej
5. Nazwa strony - Viprin's Drawing Editor (Edytor Viprina)
6. Okno Layer (Warstwa) - Opis poniżej
7. Okno Selected Element (Wybrany element) - Opis poniżej
8. Okno Draw Tool (Narzędzie) - Opis poniżej

2. Zakładka Settings (Ustawienia) - Opis poniżej

3. Zakładka Save/Load (Zapisz/Wczytaj) - Opis poniżej

4. Zakładka Help (Pomoc) - Opis poniżej

6. Okno Layer (Warstwa) - Opis poniżej

W oknie tym możemy dodawać/usuwać warstwy oraz mamy podgląd wszystkich linii, które stworzyliśmy według wartości Z (głebii), dla przykładu: jeśli grunt nr 1 będzie miał wartość Z wynoszącą 0 a grunt numer 2 wartość Z wynoszącą 1 to grunt numer 2 będzie widoczny przed gruntem numer 1, czyli będzie na niego zachodzić, a grunt o numerze 1 będzie w głębi.

W tym oknie dostrzec można ile mamy stworzonych warstw, ile elementów (linii) oraz ile miejsca one zajmują. Nie przekraczajcie wartości 20KB, gdyż wtedy wasz kod nie zostanie przyjęty przez edytor Transformice

Klikając LPM (lewy przycisk myszy) na którąś z podanych linii w tym oknie, zaznaczy się ona na ekranie.

Mamy tam także informacje o każdej ze stworzonych przez nas linii:
P1, P2 / C1, C2 - Koordynaty początku/końca / koordynaty początkowego/końcowego znacznika zakrzywienia;
1 wartość - Kolor linii (Color);
2 wartość - Grubość (Weight);
3 wartość - Przezroczystość (Alpha);
4 wartość - Tło / Pierwszy plan (0 = tło / 1 = Pierwszy plan);
Fineness="x" - Wartość x oznacza ilość przydzielonych linii do wykrzywienia, dla przykładu: jeśli wartość jest ustawiona na 5 ilość linii przypadających na zakrzywienie będzie wynosiła 5:

W oknie warstw możemy także dodać nowe warstwy klikając przycisk New layer. Ta opcja może być pomocna np. kiedy dodajemy kolory do naszego rysunku i nie chcemy, aby zachodziły one na jego kontury. Klikamy wtedy przycisk New layer, a następnie:

obok nazwy Layer2 klikamy strzałkę w dół co oznacza, że jeśli stworzymy linię w warstwie drugiej, to automatycznie wejdzie ona pod linię stworzoną w warstwie pierwszej.

Możemy także:

klikając PPM (prawym przyciskiem myszy) na nazwę:
Rename - zmieniać nazwy warstw, zamiast "Layer1/2/3/4" itd.;
Delete - usuwać warstwy;
None + Link - przyłączać pojedyncze linie/rysunki do ruchomych gruntów stworzonych później w edytorze, aby uczynić nasz rysunek ruchomym;
Copy - kopiować;
MergeDown - scalać warstwy;
FlipX/FlipY - obracać względem osi X/Y;
X:/Y: + Move - przesuwać;

7. Okno Selected Element (Wybrany element) - Opis poniżej

8. Okno Draw Tool (Narzędzie) - Opis poniżej

Dodatek: Skróty klawiszowe

Jak wczytać rysunek do edytora Transformice krok po kroku

Spis błędów

Jeśli ktoś chce jakieś fragmenty zobaczyć "na żywca" (wideo)

Dernière modification le

Bardzo pomocne ale drobne pytanie - jak sie robi podstawowe rzeczy w edytorze? Nigdzie nie mogę znalezc jak sie robi np. kolorowe kwadraty, kształ oka itp. bardzo bym chciała bo umiem robic ładne rzeczy :[

Nic z tego nie ogarniam no nic ;-;

Jest takie coś w dziale Edytor Map

Lolowata a dit :
Bardzo pomocne ale drobne pytanie - jak sie robi podstawowe rzeczy w edytorze? Nigdzie nie mogę znalezc jak sie robi np. kolorowe kwadraty, kształ oka itp. bardzo bym chciała bo umiem robic ładne rzeczy :[

Tutaj nie ma kwadratów - tylko linie, z których możesz zrobić kwadraty. Jeśli chcesz pokolorować jakąś przestrzeń także musisz użyć linii.
Kształt oka? Po prostu zwiększ w oknie "Draw Tool" wartość "Weight" na większa, to spowoduje wystąpienie linii w postaci koła, które może służyć za oko.

Miaukaaa a dit :
Nic z tego nie ogarniam no nic ;-;

Co tutaj jest do ogarniania, jedyne co robisz w tym edytorze to tworzysz linie, które później łączysz w rysunek, a następnie przerzucasz go do edytora map w Transformice.

Kamiplpl a dit :
Jest takie coś w dziale Edytor Map

Zauważ, że tutaj jest podany link do opisu WSZYSTKICH funkcji w tym edytorze, a w działe "Edytor map" pod tym Topic-270728 linkiem jest jedynie powierzchowne wspomnienie o istnieniu takiego programu.

Lamentxthe a dit :

Co tutaj jest do ogarniania, jedyne co robisz w tym edytorze to tworzysz linie, które później łączysz w rysunek, a następnie przerzucasz go do edytora map w Transformice.

Ale ja nawet nie wiem jak łaczyć te linie w rysunek,skopiować HTML i jaki HTML i w ogóle tego nie ogarniam.Nigdy nie pojmowałam takich rozbudowanych programów jak gimp photoshop albo photoscape.Dlatego nigdy nie umiałam sobie zrobić avatara ;-;

Miaukaaa a dit :
Ale ja nawet nie wiem jak łaczyć te linie w rysunek,skopiować HTML i jaki HTML i w ogóle tego nie ogarniam.Nigdy nie pojmowałam takich rozbudowanych programów jak gimp photoshop albo photoscape.Dlatego nigdy nie umiałam sobie zrobić avatara ;-;

Linii nie musisz w żaden sposób łączyć, aczkolwiek rysunek wyglądałby lepiej, jeśli nie widać byłoby przerw między nimi.
Skopiować HTML, dokładniej o co ci chodzi?
Ten program nie jest rozbudowany na tyle, żeby nie mógł go ogarnąć zwykły użytkownik. Ty rysujesz linie - on odwala całą brudną robotę za ciebie.

Kamiplpl a dit :
Jest takie coś w dziale Edytor Map

Lamentxthe a dit :
Zauważ, że tutaj jest podany link do opisu WSZYSTKICH funkcji w tym edytorze, a w działe "Edytor map" pod tym Topic-270728 linkiem jest jedynie powierzchowne wspomnienie o istnieniu takiego programu.

Raczej chodziło o to:
[ Topic-162225 ]"Jak stworzyć swój obiekt"

,ale ok, Twój jest lepszy, opisuje wszystko z edytora Virpina, ja chciałem tylko aby było wiadomo jak stworzyć swój obiekt.

Ouake a dit :
Raczej chodziło o to:
[ Topic-162225 ]"Jak stworzyć swój obiekt"

,ale ok, Twój jest lepszy, opisuje wszystko z edytora Virpina, ja chciałem tylko aby było wiadomo jak stworzyć swój obiekt.

Ah, teraz widzę. Spoglądałem tylko na tytuły wątków i tylko ten jeden przykuł moją uwagę więc nie zobaczyłem twojego. W sumie to one się dopełniają - mój opisuje wszystkie funkcje dostępne w tym edytorze, natomiast twój pokazuje jak z tego edytora można wynieść coś konkretnego.

#10

Lamentxthe a dit :
Ah, teraz widzę. Spoglądałem tylko na tytuły wątków i tylko ten jeden przykuł moją uwagę więc nie zobaczyłem twojego. W sumie to one się dopełniają - mój opisuje wszystkie funkcje dostępne w tym edytorze, natomiast twój pokazuje jak z tego edytora można wynieść coś konkretnego.

Nie moge znalezc tego jak sie przezuca ten obrazek do edytora map D:

#11

Lolowata a dit :
Nie moge znalezc tego jak sie przezuca ten obrazek do edytora map D:

Obrazka załadowanego do edytora opcją przez URL lub bezpośrednią nie da się przerzucić do edytora. To jest tylko ukłon w stronę ludzi, którzy chcą np. coś odrysować, lub wzorować się na czymś. Sam załadowany obrazek jest traktowany jako wartstwa i nie jest ona wyświetlana w edytorze, jedynie stworzone linie. Poradnik jak załadować stworzone linie do edytora Transformice możesz znaleźć na samym dole mojego poradnika
http://cheese.formice.com/forum/threads/poradnik-viprins-drawing-editor.55429/

Lamentxthe a dit :
Na koniec jeszcze mały poradnik jak wczytać gotową pracę do edytora Transformice krok po kroku:

#12

a jak się robi rzeby obrazek nie znikał i jak go przesunąć?

#13

Olianioll a dit :
a jak się robi rzeby obrazek nie znikał i jak go przesunąć?

Obrazek sam z siebie nie znika, musisz bardziej sprecyzować problem.
Przesunąć załadowany obraz możesz za pomocą kombinacji klawiszy I(jak Iga) + naciśnięcie i przesunięcie w wybrane miejsce kursora lewym przyciskiem myszy.

#14

Moge jeszcze jedno pytanie zadać? :F

#15

Lolowata a dit :
Moge jeszcze jedno pytanie zadać? :F

Pytaj, po to między innymi jest ten watek.

#16

Jak kolorować? Trzeba kreska po kresce czy jest jakiś sposób?

#17

Topic-270728

To CHYBA ten sam program ;>
ps;

Do Edytor Map

#18

Victorynka a dit :
Topic-270728

To CHYBA ten sam program ;>
ps;

Do Edytor Map

Kamiplpl a dit :
Jest takie coś w dziale Edytor Map

Lamentxthe a dit :
Zauważ, że tutaj jest podany link do opisu WSZYSTKICH funkcji w tym edytorze, a w działe "Edytor map" pod tym Topic-270728 linkiem jest jedynie powierzchowne wspomnienie o istnieniu takiego programu.

Proponuję przeczytać powyższe posty. Poza tym, wg mnie ten temat bardziej pasuje do działu "Dyskusje".

#19

Lamentxthe a dit :
Pytaj, po to między innymi jest ten watek.

Nie moglam znalezc zdania w poradniku na CFM jak sie ''wygina'' linie.

#20

Lolowata a dit :
Nie moglam znalezc zdania w poradniku na CFM jak sie ''wygina'' linie.

Jest to tam wytłumaczone, tylko nie jest pokazane w praktyce. Żeby zrobić "wyginające" się linie musisz przed stworzeniem linii w oknie "Draw Tool" zaznaczyć opcję "Use Bezier curve"

i w pole Fineness wpisać ile linii chcesz, aby przypadało na wykrzywienie.
Następnie musisz stworzyć linie

i jeśli zaznaczyłaś opcję wykrzywiania, tak jak napisałem wcześniej zamiast żółtych krzyżyków przestawiania/wydłużania - zobaczysz zielone. Naciśnij je i przesuń w dowolne miejsce, aby wykrzywić całą stworzoną linię, która będzie się składać z segmentów ustalonych w "Fineness".

English	Français
Português do Brasil	Español
Türkçe	Polski
Magyar	Română
العربية	Skandinavisk
Nederlands	Deutsch
Bahasa Indonesia	Русский
中文	Filipino
Lietuvių kalba	日本語
Suomi	עברית
Italiano	Česky
Hrvatski	Slovensky
Български	Latviešu
Estonian

Langue