First of all my current day to day job requires a lot of repetitive data entry and data checking activity. I quickly found out that alot of it can easily be automated by writing different web crawler functions.
This is when I first started to reverse engineer websites in order to teach my macros how to extract information from them that it would then use to decide on how to proceed with it's data entry process. Web browsers are awesome in terms of their debuggers- in a way that many game engines arent. They let you dig through a web page, see how all elements are organized in it and how to programmatically instruct your web browser to click on buttons and fetch data. This is the definition of a web crawler.
This newly acquired experience motivated me to start digging more into javascript- as it is the scripting language of the web. Coming from a python background, going through web courses from scratch kind of felt like a boring route. So instead I went ahead and started playing with different game engines - such as Three.js and Phaser- both awesome engines btw.
Finally when I found out that Gdevelop's new IDE is written in javascript- that made me excited- because for the first time I had an opportunity to change how it works.
To give you some background - before knowing any programming languages at all - I used to be 100% invested in engines like construct2 and clickteam fusion. But those two lacked something very near and dear to me- they weren't open source, thus not really owned by their community of users. At that time I found Gdevelop- a great event sheet based programming engine that had almost everything I wanted. But its editor frustrated me when compared to the other two- with a lot of small quirks and one big one - it wouldn't allow the user to author any pixel art. You would have to have pixel art prepared in advance to start prototyping anything. And prototyping is not as fun and personal imo if you are not moving your own stick man :)
This bugged me for years. Gdevelop being awesome, but not having a pixel editor like clickteam fusion and construct2. So fast forward to several years later - I suddenly have the real opportunity to change that! Gdevelop is open source, its editor is in javascript- which I have some experience with. There are multiple html5 based pixel editors that are also open source! Holly crap! Piskel is awesome - and its a perfect match. Can we do this? Can we?
Hell yeah we can! :P
https://github.com/4ian/GD/pull/493
Granted I am not as experienced as @4ian, the main developer of Gdevelop - he did do some refactoring on the code and helped me along the way. So did Piskel's author (the async function especially) - but what I made a pull request with was a fully functional prototype of the two applications working as one:
To do it I had to learn a bit on how both of them work!
So how does this implementation do it and why is javascript so awesome? Basically both Piskel and Gdevelop are html5 based apps. While Gdevelop was already running inside electron, I had to make piskel also run with it. That was simple enough- just create another electron window instance that will load and house piskel. In the process I learned a lot about electron's api - how to initiate, control and send signals between window instances. I had to tell gdevelop to send to piskel a list of paths where the image sequence pictures are.
Gdevelop is sending that signal to my own intermediate index file that contains the instructions of how the two should communicate. Inside it I had to load the image sequences from the paths and turn them into base64 strings. Didn't even know about base64 strings before this :)
Then finally parse that to the embedded electron window. And voala- loads them up!
But we have to keep track of the files- which frames come from gdevelop and which were made in Piskel? For that part I was just amazed at the fact that I could just attach new variables to piskel objects through my intermediate index file. Without touching piskel's source code I attached the imported image paths as a new variable to every frame object. I also hid piskel's 'New file' button and in it's place injected two new custom buttons. The main one - to save back to gdevelop overwrites any frames with original paths and create new paths for frames that were made inside piskel. When complete- it sends a list of paths back to gdevelop to load, where gdevelop reloads the list of sprites.
With all that done, Gdevelop now has pixel editing capabilities - which are actually more advanced than what you would find in construct2 and construct3 for example. Piskel has some very powerful pixel art tools!
Much thanks to both Florian Rival (Gdevelop developer) and Julian Descottes (Piskel developer) For the patience and support along the way.
After getting it merged, I also added:
https://github.com/4ian/GD/pull/522 and https://github.com/4ian/GD/pull/543
Piskel is now a part of Gdevelop!
If you want to play with it, please go ahead and grab a copy of the latest release:https://github.com/4ian/GD/releases
It's free, fun and even if you aren't a programmer you can use it to create your own games and in the process learn a bit about programming =)
Apart of the addition of pixel editing, the newIde has an impressive number of new features almost every week and is being rapidly developed at the moment. You feedback and support will be appreciated!
Apart of the addition of pixel editing, the newIde has an impressive number of new features almost every week and is being rapidly developed at the moment. You feedback and support will be appreciated!
No comments:
Post a Comment