Lily managed to catch a bug while she was working on optimizing the backend. I'm only just updating this now because we've been working on some other features recently and honestly I just forgot to update the most recent patch when she completed it lol. But it's live now! The favorites system should work better now and actually display the games you've favorited properly!
Firstly, a warm welcome to the two new members on the team developing ScratchGO with me! Lily and Eric are friends of mine that also study computer science in uni right now. Lily was responsible for the optimizations in this update and she's managed to fix an issue with backend data management that has long been plaguing the site! Now each refresh requires much less data form the backend and saves us from the increasingly frequent backend crashes! Let's go Lily!!!
The controller mappings finally have some better support! There are 3 new additions to ScratchGO regarding controller mapping:
Finally got the favorite list working! You can now favorite a game by click on the heart button next to its project title and it will be added to your list of favorited games! This list is associated with your account when it saves to Firebase so you can access this same list across all your logged in devices! There are still some rouge bugs here and there but I've already accepted the fact that this project is still in beta development and I do not really have time to worry about building things properly from the ground up. The goal for this beta is for all the features to be developed as soon as possible and so y'all will have to get cozy with those bugs for now lol.
Accoounts panel finished for now. Users can log in with their google accounts or email. If the log in was successful, the UI will populate with the user's data. Logging out also works for now.
There is finally a good loading screen for ScratchGO to smooth out all the messy loading of the various components on the beefy webplayer! Trying to make the first impression smoother though the load time can still be improved on alot lol. That's future me's problems.
Finally added a neat see all function for the games section. There is now a nice little toggle triangle that will flip when the games load in. The solution ended up being more simple than I thought and I managed to implement a long awaited feature in much less time that I anticipated. It's nice to have something in development take less time than expected for once lol.
From now on this version of ScratchGO will be referred to as the beta version because I have plans to properly learn full stack web development over the summer and remake the entire prototype (everythign till now) properly. That one will be the alpha version of the ScratchGO software. In other news, I got the search functionality working today!! It's just a crude implementation of the Scratch API but it adds so much more convenience and accessability to the app. As a testimony to that statement, I've already found 2 more cool games to play on ScratchGO using the search! Check them out! Tetris [Remake] by Tech-Coder and Space Invaders by codergeek.
It's been a while since this devlog has been updated! Here are some general updates about the current state of the project:
Aside from all the planning and daydreaming I've been doing, I just recently started working on the github repository for ScratchGO (because now I'm going to be working with my groupmates lol) but I'm relatively new to this whole git thing so I hope I can learn the ropes before hopefully making the project opensource and more accessible to everyone. That's all I have for now, excited to finally get my head out of the clouds of project planning and to start working on the nitty gritty details of the product again!
Fixed the scaling problem of the game tab on large screens like desktops. Just limited the max width that the games tab could go to. Also added a notification that should pop up when it detects a large screen - this will help remind players that due to the way the control buttons are programmed, they unfortunately do not work on the desktop version of the site.
The third and final category of the recommendation system has been implemented! The "Dive back in" section is a collection of all the most recent games you've played. This information is stored locally via local storage so it won't be synced for different devices (i think). I will implement accounts in the future so that ScratchGO information can be synced across all platforms.
The first version of the recommendation system is here!!! I only have a very basic understanding of firebase and the whole backend shtick so I expect many revisions and overhauls in the following devlogs lol. Let's see how long it manages to stay working. Fingers crossed!
After implementing the previously mentioned navbar, I noticed that the div container I was using to hold it was somehow blocking all the layers underneath it, causing the entire rest of the interface not work lol. I fixed it by making the container adjust as the nav bar slid in and out, but this was kinda tricky because the nav bar has a slight transition, so the container needed to delay its transition from one direction and snap in the other. The second tiny bug that took too long to fix was the small arrow thing that rotates around as the navbar slides in and out. This was a font thing and somehow I had alot of trouble getting it to not get covered by the annoying Apple homebar when the navbar was down. It's fixed now tho and I'm very hungry lol.
A new navbar has been implemented at the bottom of the webplayer! This will serve as the main navigation device for users when I add recommended games and accounts to this platform. Currently it is just a dummy prototype that doesn't really do anything other than transitioning from hidden to visible, a feature I implemented to free up more screen space if users are playing on a device with a "short" kinda aspect ratio. Other than that I'm pretty pleased that I was able to make it all work in an afternoon!
The searchbar is easier to use now because I programmed it to also recognize game IDs directly or even the ScratchGO link (as opposed to the Scratch link). The tutorial project was also updated to match the new UI from the last update.
The base webplayer is now a fully functional PWA, meaning you can add the webplayer to your homescreen and have it show up with an icon and name, just like a native app. When it opens from the homescreen, it also opens like an app - there will no longer be those pesky search bars or browser UI taking up precious screen space. In the future, I will eventually make it so that individual apps could be "downloaded" as PWAs to homescreens, effectively making those Scratch games downloadable games for mobile devices!
After a bit of testing with some kids I was teaching, I noticed that they instinctively clicked on the right of the search bar when they're done entering the URL of the project they're trying to load. In the original design, the right of the search bar is where link button was located. This led to them unintentionally copying the link to the whole game when they were only trying to enter their game. This was an easy fix, I just added a search button where the link button used to be and moved the link button to the left of the search bar. Also I fixed a bug where the old contents of the URL search would still remain after a search was completed, causing the kids to enter a long line of broken links that won't load.
Added a proper short tutorial as the default load game instead of Football Fever as the original game couldn't even be fully played on ScratchGO due to its 2 player design. This will not be the final tutorial project tho as I think tutorials can be disguised as a part of the experience better to the point where players won't even notice they're learning about the controls. I will work on a better one that will be more like a short game once I'm done with my finals lol. Also fixed a small bug where the button controls are initiated differently from the actual mapping.
Completed the first fully functional minimal viable product today!! This is beyond exciting for me! :)))
I will probably take a short break from development now because I have finals coming up soon and some other college stuff to do lol.
Oh also the first beta will be shared to some people to get feedback. GarboMuffin if you see this you are a legend and the community is so lucky to have developers like you. <3
Goodnight!
The descriptons section now works like the app version. It also recognizes:
A new button was also added to let players mute the game because I noticed that browsers like safari and chrome sometimes play audio from tabs that aren't even active.
Good morning! I implemented two features this morning and I'm feeling super productive and pumped lesgoo~
The first one has to do with building and reducing the size of the version of turbowarp that the site is using. After enabling production mode and removing unnecessary files
from the turbowarp on this site, the webplayer loads much faster.
Second, I added support for linking projects by including the project id after the hash in the webplayer url. Now when you want to share your game to be played on ScratchGO,
the site can simply export a link in the format: https://scratchgo.app/webplayer.html#[projectID]
This would be pretty useful for people to share just one simple link and be able to share the full mobile experience of their game!
I wrestled with pointer events for a good half of today and still couldn't get it to work on mobile ¯\_(ツ)_/¯
The problem is really simple: when players play with a "d-pad like" control setup you expect the controls to behave like a d-pad in the way that you can simply slide
your thumb around without lifting it to change directions. This was really simple to implement on the unity version as the support for pointer events on mobile devices was complete.
HOWEVER, on the web app I did not have such luck. I searched all day and couldn't find a good way to implement the same thing. Pointer events for js simply aren't complete for mobile users
so I ended up coding a sketchy thingy with touch events that sort of works but is kinda rough around the edges and pretty messy but it's honestly difficult to notice it just bothers me that the controls
sometimes don't fire if you tap the button quick enough...(On second thought maybe its my budget implementation of TurboWarp)
Sorry for the rant I'm just very frustrated at the lack of support for developing web apps for mobile devices. hmmph
ps I somehow managed to break the scrolling for the whole website so now they all don't scroll on mobile like wut. I will fix this another day tho I'm so done for today.
Got buttons working on a grid. Still learning about css grids and thinking about how to best implement the buttons. Also enabled dragging on and off buttons to trigger button presses, good for when you are playing on mobile and don't lift your finger between different button presses.
The feature itself is not a very groundbreaking innovation, but it is significant because it has allowed me to become familliar with taking measurements from the iframe and matching the other UI with the UI of the contents inside the iframe. Next step is including buttons and figuring a way around the browser zooming in and out from double tapping...
Continuing yesterday's progress, I made a major breakthrough today by finally figuring out a way to get accross the same origin policy that most browsers have that was stopping me from passing js functions into the iframe and accessing data from inside the iframe. Currently the web version has all the main essnetial features working.
The webplayer is still far from being polished enough for release but it serves as a great proof of concept and I am very very happy with the progress made so far. Big thanks to my friend Bronson for answering all my questions because this is actually my first ever web development project and I don't think I would know where to beign looking for information if I didn't have his help. :)
Today I finally recieved the response from the App Store review and it was yet another rejection. Unfortunately,
Apple doesn't approve apps that "Creates an interface for displaying or distributing third-party apps, extensions, or plug-ins similar to the App Store"
And sadly that is exactly what ScratchGO is designed to be, a portal for Scratch games to be experienced on mobile devices. :(
For the time being I will be working on the web player version of the app so that any device can use ScratchGO via a simple web app. This will take much longer tho because I have
very limited experience with web development and I will also be required to tinker with TurboWarp's source code, something I've been desperately avoiding up till now as I am not a very experienced programmer lol.
Wish me luck friends I will report back when I have made more progress!
Had to unsubmit and resubmit my iOS build to the app store because it was in the "in review" status for longer than a week now and I've never had to wait this long for an app review before.
This was especially frustrating because I have everything else ready and now this one stubborn app review is delaying the progress of the entire project :(
Fingers crossed that the next devlog will be good news...
For the friends that have android devices, I invite yall to try the
android public beta here!
The first public beta for ScratchGO on Android was approved by the Play Store today! Download it and try it out! Click here!
The iOS version was sent in for review at pretty much the same time so I'm expecting the iOS one to be available soon too. I'll add another devlog entry when it does!
Wow! This is the first devlog!
So far the project has been in development for over 3 months, which includes around 1 month of me learning HTML to make this website.
I cannot comment on whether that was an effecitive use of my time but hey now I can do some basic HTML, CSS and JavaScript.
The reason this is the first devlog is because this is the first version of the website that finally has the devlog page implemented.
While the features can seem so trivial, I'd like to remind everyone that as of a month ago I did not know how to center a div properly. Now, I can confidently say that I know how to look that up on w3schools. Now that I have the devlog page set up, I can finally start to document the development of both the app and this site properly. I am very excited about this project and am very much looking forward to finding out how much this opportunity will advance my programming and app development abilities. Anyways, play my games guys.