Speaker 1: In this video we'll show how Rovio streamlined their LQA process in their title Small Town Murders with the help of Gridley. And our presenters today are Wille, who's a Senior Developer at Rovio and my good self, Business Development Director at Gridley. OK, so the overview here, we're going to just run through the problem itself, the process improvements that were put into place, how we create those screenshots, how the push and pull happens between Unity and Gridley, and then we'll go through our LQA review process. OK, so the problem was this compressed timelines for this particular title, Small Town Murders. The timeline for updates and releases is approximately one month. So, you know, having that LQA pass was absolutely vital. So it is unacceptable to not have one. But at present, the process was rather slow and a faster turnaround was needed for those one per month releases. So this is how it was approached. So the review took place as to how long it was currently taking for the manual triggering of strings. So that's kind of playing through the game with code, finding the location, using cheats, et cetera, to then fix any problems that were then found within the game itself. So on average, a tester could cover approximately 250 strings a day. Then comparing that to screenshot checking, so using a screenshot creation tool. But with the screenshots kept separate to Gridley, the testers covered between six and seven hundred strings a day. So that was about approximately two and a half times faster. So that was a dramatic improvement. That was great. Just having the tool itself and having that script in place saved a lot of time. And then we then compare it to actually placing it through Gridley. So the ability to go into Gridley, but the LQA guys being able to review the strings right there, make the changes directly in the text itself and then send those back and regenerate the test again, actually saved a huge amount of time and allowed over a thousand strings per day to be checked by the testers. So approximately four times faster. So to do that, we're going to go into the screenshot creation process itself, and I'll hand over to Ville.

Speaker 2: So this here is our Unity project for our game Small Town Murders. And specifically, this is a Scene that we use for generating our screenshots. So at the start, we already have our English text, and for the demo purposes, have tweaked the game a little bit so that it will only generate a very specific small subset of our story. And we're going to generate the screenshots and upload those English texts in the first step. So first, having this tool, I can select the language. So in this case, just English. And then we have a filter for setting just the first chapter of the story content. So generate the screenshots. I'll just play the scene, and it will enumerate through visual states of the game as it corresponds to that content that we define. And it will create PNG images that then I will upload into Gridly in the next step. So this step takes a little bit of time because it's kind of initializing the game in a minimal sense, and then going through those screens. If you were really fast, you might have seen some of those game view images flash through the game view here. So now we've finished generating that very small subset of the screenshots, and I'm going to first go into our localization view here. Here we have a tool that allows us to upload first the English text here. I do upload English. Do an English upload, which won't take a lot of time. It shows only five translations. I've finished uploading. This would be just the text keys as well as the English stream values for those keys. And in the next one, I'll upload the screenshots here. This is the folder that it just generated them just now. And it has the English selected here, and it shows that there's a total of 10 screenshots of which to upload. And in this case, it will find those five keys from Readly that were uploaded before and find these kind of screenshots that match into those. So what I'll do is I'll upload the screenshots, and this is something that for us runs in a separate process because it might take a bit of time. But with our small subset, it's already done and finished. So now all of the text and the screenshots should have been uploaded to Readly. So I'll pass the mic back to Mike.

Speaker 1: And basically, we have a very kind of spreadsheet-like view, so hopefully there's no fear induced. As a result, you can drag and drop columns, of course, like this. And this is a very simplistic view here. We have a certain number of strings here, and then we have the screenshots applied here. Now this is, like I mentioned, a very simple project. This is just English to Spanish. And so what we can do is we can then filter into just the view we want. So at the moment, this is the default view, which contains all the columns featured across the board for this particular grid. And what I can then do is change from that default view into my demo view here. And then once in this demo view, we can just see the record IDs, translation state. We can see our English screenshots and then our target here. Now targets are then defined by the dependencies over here. So if I click on Dependency, you'll see that we have all our different languages here into the different targets. But of course, we're just interested in the English to Spanish at this point. But this can be changed. And of course, you can set up other things to be associated with dependencies as well. So it doesn't necessarily need to be just the text. It can also be any screenshots, any WAVs, things like that as well that can also be dependent too. So anything that's in the view is currently what's going to go for translation. So we can very quickly click on the translation overview in the right here. This will then give us a summary as to all the different strings. The total number of records here is five. Total words is 55. And then you can see in each of the other languages will then appear under here. So if I close that, you can actually send out text using a very traditional kind of Excel export. What will then happen is if something sent for export, if changes still happen to English, then those will be flagged as being out of date when the translations come back. So no fear there. Alternatively, you can, of course, send to MemoQ or to Memsource as well. So there's a plug in for that that you can install and then push those straight through to the language service provider of your choice. So, yes, we have our different screenshots here, which we can click on, which is wonderful. We can see here the text associated Sycamore Street, Thornton Grove. And if we come out there, we can see here Sycamore Street, Thornton Grove here as expected. So what we're now going to do is we're going to create a branch of this particular master here. So if I select master here, I can create a new branch and I'm going to call it lock and then save that. So this is now a branch of that particular master. So I then do is go back to my demo view again. And what I can do is I can work on these strings in isolation within this particular branch. You can then merge later on when complete. So what I'm going to just do here is I'm going to set the top one here and then just simply add some text in here. Now, of course, you can choose to provide access to the translator so they can add the text directly. Totally up to you. OK, so now we have translations in place here. We can change the row height here and I can just change it to medium so that we can see a bit more of the text that's actually featured here. OK, so what I'll do now is I will then merge this lock branch back into the master. So I go over here to version control. Merge that branch back in. I can then compare changes here. We can then choose how we'd like to merge this branch back in and we can see the changes made here. And if we select here, we can see a bit more detail. Great. And so that all looks good. So I'm going to merge that back in. Merging started now and it's being merged and that should all go according to plan. And then I'll swap back over to Vila.

Speaker 2: So now we are again in our localization view in our game. And now that we have our Spanish translations available. First, what we need to do is we need to import those translations from Gridley. And that was very fast done. And now that we have our Spanish text, what we'll do is we will select Spanish also. Same story content and we'll start generating again the screenshots. How the tool itself is made is we have our own kind of game specific UI framework that we are using as a kind of a convention. Whenever we add more UI or what we do is we implement this kind of localization screenshot interface that enumerates through the different possible states of that view. And then from this scene, we kind of enumerate through all those different views for all those different states. And we draw one frame and then we just read the pixels from the screen and store them into PNGs. That way we'll get a nice kind of overview of the game in those screenshots. So now we have the screenshots again. What I'll do is I'll upload them back to Gridley. So we'll have those. So we'll have those screenshots also for the Spanish translations. So upload the screenshots, same folder. And now you see that it also shows Spanish here because it found the folder containing the Spanish screenshots. Upload. Again, running in a separate thread. And you see that the list now contains three Spanish screenshots that it found the match for from Gridley and done.

Speaker 1: OK, thanks very much. Right. So now we have our Spanish screenshots here. Now, I actually introduced some errors in the initial translation here. So we can see we've got the word error here, which will appear on a screenshot here. And then we have Nora mystery error here as well. So if I click on the screenshot, we can see that error here and also over here as well. So what I can now do is I can now flag this as an issue. I can, of course, fix the text, as you would expect. If I just. Select in here. And then choose this one here. And also make a change here. OK, OK, so there's changes to make now. Now, I can also choose to add a ticket. So basically, if I if I right click. On the actual cell, add a ticket and you can choose different kinds of tickets. So here we have basic and then we have an LQA issue. So, again, you could just have a simple comment. If it was, you know, is this a verb or a noun or some kind of information the translators after? Or if you actually wanted to flag an LQA issue, you can do that here, too. So this is an example. Here. We can then assign a priority here, what kind of priority it has. It's a high kind of category it's in. So maybe it's language, subcategory, mistranslation. And then you can choose severity here. So if I say major and then you can add a bit further description here. So if I click on add here. That's now created a ticket here and it gives you a little bit of a summary here. If you then click on the view ticket here. It will then give you a bit more information. You can then choose to change the priority. You can then choose to assign it to a particular user. And then you can then see the content and then any description that was then entered as well. If I then close that. And they go over here to the ticket center. You can then see the current open tickets within the grid. So we'll just close that. And of course, you can then choose to then kind of close that particular ticket. You can, of course, push any of this information as well using the trigger system here. So if I select trigger, I can add a trigger and then we can then say, OK, so when a ticket is created or updated. Lots of different triggers here that you can choose from. So if I choose a ticket created here and then choose to select an option here, you can choose to send a web request, you can choose to invoke a Lambda function or indeed send a Slack message to a particular Slack channel to then alert you to the fact that something's been created. Or you can choose to send it to another piece of software, which you're then using to aggregate all of those those bugs in one place. Totally up to you how you'd like to set that up. So once you set it up, if I select Slack message, you'll then see we've got the web hook here, the channel and then the payload underneath here. So I should close that. You may also want to actually have a particular approval part of the process as well. So once this text has been changed and perhaps this ticket's been closed, you can then choose to have a translation approval here to suggest that that screenshot is now good to go and has been checked. So you can run it that way if you wish to. Right. So I'm going to show you another piece of functionality here. So if I select my views again in the corner here, I can look at my English screenshot view here. I can just simply show you just those columns of interest from the English screenshot view. If I select again, you can choose the lock screenshot view. And this will then show you just a selection of all the different screenshots here. And if I then choose this view again, I can then choose the LQA team view. And again, this drills down into perhaps just showing the approval column, for example, and then just the content that's being worked with. And then if I select another view here, I've got a translator's view. So the translator's view itself, you can then, of course, feature the columns you want. You can manage all of that using the managed columns found at the top here. And if I scroll across, you will see here that I've created a very simple formula here where it does length check. Now, you can also choose to filter a particular view to only show those that have the word check in there, for example. So if I just click up here, column properties here, I can see this is called ES length check. And what I've done is I've got if the length of the Spanish is over 100 characters, then it will return a result with the color, which is then red with check or green with good. So if I cancel out of that, what we'll see here, if I then just expand the height of these rows here, we can see that these are currently checked. So if somebody goes into the text here. And then chooses to then bring this down, press enter, we'll see here that this now says it's good. So, again, so as I mentioned before, you can then change your view to only show those that have the check, which then makes sure that the translators or the LQA person is then going in here and then making those changes. So they are as they should be. What I'll now do is I'll hand back over to Ville.

Speaker 2: OK, and one final time to finish the loop. So now we have those fixed Spanish text strings in Greatly. What I'll do is I'll import them once more. So we'll have the fixed versions in our game. That's done. And we'll do once more the Spanish or the other screenshots, including the Spanish. Pressing play here. So as mentioned in the beginning of the presentation, we didn't necessarily have this tool at the very beginning of the project or even our live phase of the project. What we used to do was we needed to send builds for the LQA people, including those cheats that then they could utilize to go into specific points of the game to see if all the strings look correct in the game. And this has then been a lot of there's been a lot of utility for this screenshotting tool, not only also for LQA purposes, but we we also use this for just going through the new story content and maybe reviewing how the story itself, the narrative design is and iterating on the story itself. So this has been a quite nice addition to our narrative emphasized game. Once more, upload them to Gridly. Upload screenshots, same folder, same languages. And now it's done. So passing back to Michael once more.

Speaker 1: Great. Thank you very much. So we can see here we have our text as we saw before. We've got updated screenshots. So if I click on this one here, that was one of the problem ones. We can see here that this number is the Spanish text. And if we click away from that, we can see Nora mystery at the top here as well. And that's as it should be as well without the error text in the corner. OK, so just to recap that process. So we have Rovio pushing strings and shots here for translation, pulling that translation text back and then pushing the lock shots in for LQA review. Then we have this loop here that goes on for as much as required. And then once all is good and it goes back into the game.