Evora's tile editor

Content Development
1

The goals:
Provide an environment where creativity is possible to unpredictable extents.

v0.1

Tileset image on the left (in a darn resizeable field, because it's never big/small enough) Drag and drop tiles with left mouse button Tile selection Copy tiles by dragging them with the right mouse button. Scrolling

v0.2

Save Load
Until I’m sure a newfile feature won’t be exploitable, there’ll probably be something like 3 files to tinker around with for each user.

v0.25

TWM pane: *Tileset

All the way to:
V1

save as undo cut copy paste delete warps? signs? right click fill right click copy selection double click = default tile Predefined objects Editable entities that contain text (will later be used for NPCs) and have an image (that's along with the image uploading mechanism I've mentionned on JS Reborn) Tabs for multiple opened files Play button? Keyboard shortcuts! Tabs for multiple files opened?

“Tiling window manager” specs:

Upon clicking, overlay full screen the list of pane choices Once chosen, enter the create pane mode, overlay full screen with buttons at each possible areas Done Available panes: (a * signifies there can be multiple instances of that pane) *Tileset Layer *Chicken object manager :The predefined object feature Graal's editor has but better. Where you can select the tiles independently. Special tiles tileset -> swim, bed, shallow water, hurt tiles... Find/replace tiles NPC editor (double clicking an NPC while there's no NPC editor window activates the create pane mode) Macro? *Another level file?

I’m also considering to add:

Ctrl+tab -> switch between opened levels (if I can override the browser's ctrl+tab)
(ctrl+s),(ctrl+c),(ctrl+v),(ctrl+shift+s),(ctrl+z),
Save workspace
WASD movement
Command line editing
Zoom in/out + Gmaps
Live level modification (as players are playing it)[/code]

And your suggestions!



Journal:
[code]- Got an image to display!
- Trying to make my old computer work as a virtual machine to test efficiency.
  I know I need to activate the boot sector but can't find the tool.

- BOOTICE worked like a charm

- Because I wanted to have a clean version of my old Netbook I made a vhd
  with a new backup, for some reason I deleted the vhd that worked and now
  I'm stuck again but with a different problem: there's a blinking cursor on boot and it stops there.

- It seems my success was a false memory, if anyone has tips: tell me!

- After lots of trying, I've decided to simply install a completely new machine

- I doubt anyone reads this

- Figuring out the TWM paradigm...

- First module created!

- Took me two hours but I think I understand modules now, phew... now to know
  if it's consistent with Rammy's part

- Decided on the particular style of module I'll use. TWM is still a scrambled idea,
  I should concentrate on more vital things

- Using a dark theme for my editor... white hurts my eyes C_C

- really stuck at interfacing the panes...

  The resize bar has to move and the pane also... how do I move both without coupling
  Move the resize bar and then update the pane
  Moving the resize bar calls an update on the pane

  ok now... how about the clearRect... it both needs information on the pane and on the bar..
  it should accumulate those
  can'T see anything, too white

- Finally figured out that if I was going to make something modular I had
  to make the panes modules.... ....lol

- I think I figured out how to separate the files, I've also changed window.onload for
  an eventListener, which works better. Files I'll be working on are: cResizeBar, cScrollbar,
  PPane, pLevel, pTileset, main. c means constructor, P means prototype
  (all panes will inherit from it), p means pane... and main is main. Still wondering how to
  manage the buttons. Almost installed required.js because the separate files didn't work...
  turns out I made a typo on a filename AND named the file wrong. X_X

- Documenting the projects right now. To have a general idea of what will do what. I'm being very
  specific I think. Also, added cDropDownList.

- An new one in the family, PTileBased, prototype for the Level, Tileset and SpecialTiles panes.
  It will inherit from PPane. Now what else did I forget...

- Added new files. Btw, hello rammy!

JA 19
  ??:??
- Still adding files, considering to use require.js or just read its source code in order to make js
  file loading code by myself. Right now I am figuring out the structure of things and learning
  what's possible and what's not.

- I've just finished the backbone of the mouse system. Very happy that I coded it right the first time around.

  15h
- Not sure what to do next, everything is ready.. can't choose

  18:44
- Decided to work on the graphical rendering. I realized a few minutes
  ago that maybe I should have been using objects instead of
  arrays... for now I don't see the difference. I read objects are
  faster but I think it needs to be on a really large scale.
  Will see once I fire it up on my virtual machine.
  Now there's a piece of code acting up but can't find where and I
  have like 13 files. I will need to make them load one by one.
  I know it's overkill for just one bug but (a) I need to figure out
  how to load files anyway and (b) it might be helpful in the
  long term.

  22:00
- Did some cleaning IRL and wrote something that loads all my
  js files and added a debug delay on it to find out who was the
  culprit... turns out I forgot to save all files. Now I'm going to
  write the reaction of the buttons to hovering and clicking.

  23:23
- Had a fun time trying to make something I didn't script yet work.
  Not really noteworthy but good anecdotal value I think.

  00:00
- Interestingly, it seems it took me two hours to make the buttons
  visually operational.

- It seems I wrote 335 lines of code on a ~10 hour day. Sounds slow.

JA 20
  9:48
- Starting the work on panes, fingers crossed. But I'll start by adding
  a try/catch to the loading of the js files. It sounds like solid code.

  13:11
- Spent quite some time debugging what I found out were conflicting
  variable names. I want the panes to scroll, I don't want to use divs
  but I might have to. Considering to use webGL, I would learn it at
  the same time.

  14:34
- I officially cannot use divs. Tried to jump into webGL but it's rather
  dense, my knowledge of it dates to waaay back when I was working on
  Armonston Ch 1. That's five years ago, and it wasn't even webGL,
  it was openGL ES 2 or something. I'll take some time doing something
  else before really diving into webGL.

  16:29
- Took a walk. Looking back into this I will surely need to use a library.

  16:53
- Lowest level library I could find advised to use three.js if I wanted to
  get shit done. Which I will do.

  17:55
- After reading further about three.js (which people say is not ideal for 2d)
  and trying to download it (it's 163 mb ?!?) I decided to use pixi.js
  which has been used to make games for McDonald's and such.
  I want to use as little libraries as possible but webGL is ridiculously
  daunting.

  23:58
- This is akin to the joke about reading more documentation than actually
  coding. pixi.js is cool and all but it handles stuff I don't want it to handle.
  In fact, even the most basic abstraction I could find
  (http://lib.ivank.net/?p=tutorial)
  handles more than it should (the mouse). I've already scripted the mouse,
  in fact it's the first thing I did. Ivank doesn't handle rotations though,
  despite the fact that its developper deserves all my respect, I'm annoyed
  to have the mouse handled by a library that isn't feature complete in what
  it should actually do. Maybe I will delve into both ivank and pixi and cut
  and paste some kind of Frankenstein for my own use... if I can.

  00:57
- Given the best and most recent webGL tutorial I could find is about 100
  pages long (rough, rounded up estimate of letter size pages). pixi.js's
  most in depth tutorial in comparison is 50 pages long. Which is worth it?
  pixi.js's I guess. I know I could simply avoid the features I don't want...
  Enough justifications! I wrote a darn novel here.

  1:43
- No I'm not neurotic... I'm cooking spaghetti sauce, hence I'm still up.
  http://caniuse.com/#feat=webgl
  I don't know what "partial support" means but it doesn't sound good.

JA 21
  12:14
- I feel like doing more concrete stuff today. Call it a day off, until I come
  back to programming maybe this evening.

JA 22
  12:21
- I've been documenting myself on webGL instead of taking the walk I
  wanted to take... I ended up choosing to use twgl: http://twgljs.org/
  mainly because http://stackoverflow.com/questions/37927359/how-to-draw-2d-image-with-twgl-webgl-helper-library
  its author offered such a convenient way to display images, using
  drawImage, a lot like with canvas2D. Of course, the code misses
  some features but that's a great start.

JA24
- I'm still actively trying to understand WebGL, concentration fails me.
  I have made some progress but I've yet to figure out how to make it
  work like I want it to. The effort is real, I am appreciating it.

JA27
  10:50
- WebGL tutorial introduced me to some "basic math" and then wants me
  to get into 3D geometry. I barely understand 2D geometry so I'm back to
  trying to get JA22's script to work. Thankfully, I do understand better what's
  going on but not enough. The goal is to have something that will display
  sprites (cropped images) at given positions and that will be possible to
  add methods to in the future (like rotation, scale...) Something solid enough
  that we won't have to rewrite stuff once I gain experience or knowledge.
  Oh, and I need to add in movement.

  19:33
- Tailoring the script, it's like learning programmation all over again, I don't
  understand most of what is going on but have enough knowledge to make
  it work the way I want. It's a lot of trial/error right now but I'm confident I'll
  have that mastered in the future.

  20:50
- Close to getting the thing to work like I want it to. The guy who wrote it
  had conversions going crazy, back and forth between clipspace and
  pixels. Right now I think I'm bringing back functionalities I removed for
  simplicity.

  22:19
- Got it to work like I want it to, now to integrate it in my prototype, zip it,
  send it to rammy and see what he thinks. Hopefully I'll be done tonight.
  If not, I'll get back to it sunday.

  00:00
- Sent to rammy :D

JA 30
  20:15
- Gave it a good 30 minutes and fixed the problem it had. The code
  I used is 3 layers of gibberish but eventually I'll make it clearer.
  As long as it works for now so I can get back to the editor.

FE 1
  18:22
- Started playing poker a lot therefore my time spent on the computer is
  divided. However I'm now integrating WebGL into the editor. I question how
  much overhead it can bring and what it really means for my project.
  It shouldn't have much impact but I know I'll find things that will not
  properly plug into each other. Thankfully, my code is clean enough I can
 get back to it without too much trouble.

  18:48
- Here's for the overhead: I forgot that I need to put things in layers.
  I could just make it so things are drawn in the correct order or simply
  make what's drawn the right size. Much easier for now but I'll definitely
  need that feature.

FE 8
  19:38
- Playing poker has been my main activity lately, I'm practicing hard
  and reading much. I want it to become a lucrative activity in the
  future years because why not? Like anything, it's a lot of practice.
2

Glad to hear you have finished your book also.

You should have the tile selection/tileset on the left side. For me I find it easier to select tiles, but it may not be the same for anyone else, but it seems more natural XD

WSAD camera movement.
Easy to use shortcut keys for common features (one of the most useful things in any development environment imo)
Dragged tiles will be tileable e.g you have say 4 tiles selected that are a box and if you drag them in a direction while holding the mouse down it doesn’t make the box over lap it repeats the box instead.
Auto-save?

---- More advanced stuff ----
Collision editor. Useful if you change tilesets. You define the blocking tiles etc.
If there’s a map, perhaps a zoom in and out feature on the levels. So that you can easily get an overview of the worldmap.
Perhaps some special brushes like auto correct. So, you place some dirt tiles in the shape of a path and it goes around the outside of it and places the dirt to grass tiles as needed. Might be a bit complicated.
Replace tiles/Find tile X and replace all with Y. Could be fairly useful later on if tilesets change.
Custom predefined tiles for commonly used things. e.g buildings, cave sections. You save a tile selection into some sort of panel and it perhaps has a folder structure. tiles/houses/, tiles/houses/objects/ and a scaled preview image.

3

That is the interface I decided to make when I started working on the Gscript editor.
Just have drawn it on the computer.

There are two tileset fields because the tiles we want to use are not always in the same area.
Find and replace is for replacing tiles.

Right now I’m thinking why not save the task to use on other levels as well?
or make macros?
NPCs could also use find and replace…

Edit: This is already old.

4

Why are there two tileset panes?

5

75% of my leveling time is spent looking for a certain tile… I’ve spent so much time looking for shallow water and plain grass tiles, it’s debilitating. With reduced scrolling, they’ll be easier to spot, as they will stay put.

It’ll be possible to resize it small enough you’ll forget about it anyway.

6

Make it toggle-able, if the user wishes not for the extra space. As an aside, I enjoy the design that RPG Maker’s editor employes (which is similar to yours, but has a database functionality as well that opens a separate window).

7

Toggle-able sounds like a good idea. Both right and left pane could also be toggle-able… I could make toggle-able tool panes.
Tnx.

8

Your incapability to work with a particular tileset should not define the editor’s interface. Honestly I personally would not use the 2nd window, i’m sure others would do the same. If you could make a dynamic window system, that would be all the better so people can customise their workflow to their liking(the more dynamic, the better, so long as it doesn’t inhibit performance), of course you’d treat such a feature as a stretch goal.

9

Did you read the quote?
The quote is why I do it. My incapability is how I’d use it. That was kinda harsh but thanks for your honesty.

Anyway,
Dynamic windows wouldn’t be such a stretch goal if they worked like those split screen OS’.
Might be better than toggle-able panes.

10

Perhaps you could have a drop down list in the tileset UI’s title (like file menu) where you could switch sections of a tileset (in the one frame). Instead of having two UI elements. By this I mean it just sections off the tileset and you choose which section you want to place from.

The other thing is having a save predefined tiles in a folder structure (as I mentioned in my post), but also you would name them and you could have a convention like “cave_rock” and you could use a search name filter - find: “cave_” and it would retrieve all objects starting with “cave_”. So, effectively you find all the tiles you commonly use and place them in this structure and you just filter the names to find your tiles. You could also browse through it normally, like any normal file system.

The second method ends up being a far quicker way in the long run, based on previous experiences.

Iterating on the second idea, you could have it so you can build your own tileset based on selections. You create a “new” tileset named house_inside, add all the house inside tiles to it and now in the previously mentioned drop down list you have house_inside, cave_rocks, etc. There’s a lot of upfront work here, but it makes things easier in the long run again.

Hopefully I explained that well enough. Expressing my thoughts is not exactly a strong suit of mine.

With that all being said, you’re the one making it XD do what you think is best. I’ll be happy either way, anything’s better then graals editor.

11

A tile file system?
That sounds like the predefined object feature Graal’s editor has but better. Where you can select the tiles independently.

I’ll take that idea into account, I think it’s great.

12

A select entire grouping or select individual tile from grouping feature would also be nice. It would in effect be a hybrid between the second and third idea. You could place a group of tiles in one go (so you have house_chair and it places a chair) or you could select the indvidual tiles from within said grouping to place down.

Honestly, if you had anything near this type of functionality and nice shortcuts, WSAD movement. I think this would be an amazing editor.

13

That’s how I understood your idea at first.

14

Oh, good XD. Was just clarifying :stuck_out_tongue:

Also, let me know if you need anything in terms of graphics for your editor (doesn’t seem likely, but I thought I would put it out there)

15

I will need button graphics.

From my first post I count those:
save
load
save as
undo
cut
copy
paste
delete

If you can make them small. Between 16 and 32 px… maybe 24? 24 px looks nice.
There probably will be more to come.

Thanks!

16

Old: Okay, cool. I may have a go at it this weekend or during the week.

I lied, I had a crack at it right after I wrote this post lol.

17

save, open and save as?

Nice.

18

Yep. I’ll change the background based on how the overall UI looks later on. I just wanted a basic backdrop behind them.

19

Done. Let me know if you think anything needs changing.

20

Are these free for the community to use on other projects?