Amazon Sumerian | Ep 5: Creating an Interactive Digital Signage Experience

[Music] hey all this is Jake's mr. creative content specialist for Amazon Sumerian and we are back for I believe our fourth episode maybe it's our fifth episode I'm kind of losing track now but we are having a great time showing you guys how to use Amazon Sumerian and how to build scenes using hosts how to create 3d scenes how to create speeches for hosts how to actually great create some engagement interactivity within 3d scenes using Sumerian so lots of fun stuff if you haven't seen any of the other episodes there's that's totally fine you can go ahead and check them out what we'll be showing you today will include some of the things that we have talked about in the past but again it's not necessary to to follow along for this broadcast for this is for this stream for this broadcast we're gonna be looking at a real world use case and we're just what's called bring it all together we're gonna show you a digital signage experience when I say digital signage experience what it is is it's like an introduction to a digital signage experience and we'll show you what that is in in a few minutes but that's gonna show you how to use the state machine a little bit the state machine as many of you know is the component that adds interactivity and behaviors and things to change and move and happen within a scene as if you don't want your scene to just be a stagnant 3d model the state machine is really what creates movement and changes and behaviors within your scene we're also going to be looking at hosts so talking hosts that can actually say stuff to the camera and or to the user and we're also going to be covering scripting not going to go into scripting in real great detail but we're gonna be talking about scripting at a high level and at least and give you example and what scripting is and we'll have our guest explain that more in just a moment but what scripting does is it allows you to use JavaScript to add logic to your scene so it can be substituted for the state machine while the state machine is this drag-and-drop node based editor scripting is a JavaScript editor that you start adding interactivity and behaviors in the same type of thing but using scripts and said so that's what scripting is and we'll look at that shortly and also I want you to meet the creator of this scene ICO Nakano there she is you are on camera everyone yeah ICO is our guest today she is the creator also of this of this scene and a lot of the scenes that you will a lot of our demo scenes and a lot of different experiences we put forth just as an example ICO is oftentimes the brains behind that she is super smart a lot smarter than me and she she can do she can create a lot of cool stuff I've been so impressed about what she can do so I go any anything you want to add about this scene and the the concept behind are the reason for it no I think you provided a great introduction to what this scene does one thing I'd like to highlight is we use different components so we're we highlighting the speech component that's native to Sumerian as well as being able to use JPEG files PNG files to be able to do something interactive with it too yeah this is it's a cool scene and let me see I'm gonna get rid of this the agenda here okay we'll get rid of that yeah we'll get rid of the topic too now we'll keep it I changed my mind okay so let's jump over to my screen and I'll show you this scene that we're gonna be looking at today all right so I'm going to go ahead and start it make sure that I'm not playing anything in the background here before I play that okay do you want to make that audio mistake again I'll go ahead and press play we have a some some music in the background Amazon logo AWS logo Amazon Sumerian logo drifting upwards welcome to silverstein a host appears and just says something real real briefly actually don't have my headphone for days so I can't hear exactly what she's saying but I know it's something about I think hi my name is Christine welcomed Amazon Sumerian I think that's what she just said she says either welcome to Sumerian or hi my name is Christine I must marry and host right and so I go can you give it a little bit more description on how you would use this particular scene so you've just seen the scene you notice that there's two logos in the scene one being the AWS logo and the other one does is Amazon's Marion so you can replace those logos with any images that you'd like to use whether it's a logo for your brand or for your product something like that and you can also customize what Christine says at the end so in this example she had said for example just as we mentioned welcome to smearing oh hi my name is Christine you can also add your brand's name you can also have her speak about your product so just customizable scene yeah it's a customizable scene that could be rebranded and reused kind of however you want you could have your own logo you could make it spin and do that sort of animation and then you could have some other texts then you can have a host say really whatever you want so it could be an introduction or a welcome scene to a digital signage experience it could be a welcome scene to even just an online web-based scene so there's there's a lot of different things that you could use with this but this is just a this is a good example of how would you you would use all these different components we've been talking about the last few weeks let's see I'm just I'm looking over at the chat room here bring it all together must require a lot of salt yeah there's there's a lot to be there a lot as you'll see there a lot comes into this and so even though it's it's some areas are really easy to learn and fun tool but there's a lot still that makes that goes into even making some simple things happen so and you just you learn and get a lot of respect for developers that can make you know like games and 3d games and that sort of stuff because this stuff is it's complicated super fun and yeah we're excited to get more to dive a little bit deeper into it today alright I worked with an artist to create this scene and he did a lot of the animation on spinning the logos and being able to create that kind of animation through the state machine is one thing but also we had added extra flexibility using code so there's two different approaches to do the same things right right so that's what's cool about Sumerian is it so far we have not really been we haven't used any scripts at all so and we and it's it is a like we've said many times it's Sumerian you know no code necessary the cool thing is you can use code JavaScript if you want to MIT to drive logic and drive changes and behaviors in your scene so that's we're gonna show you a little bit of both today all right let's jump over to my screen and the way this is going to work is I'm gonna kind of walk through this scene we're not gonna build it from scratch like we have in past weeks we're gonna walk through I'm gonna show you different parts of the scene that Aiko actually created herself and then you can ask her questions I'm gonna be asking her questions because she's more the expert than I am on this scene so I'm gonna be walking slowly through it and then we'll discover as many parts of it as we can if we don't get through the whole thing we can we can cover it and finish it in a later broadcast so let's get started I'm gonna what's rewatch that scene again and then we'll I'll cover kind of each different part as we walk through and Aiko is might be jumping in and interjecting and interrupting me which is totally great I hope you do I go correct me if I say something wrong well press start began to reload the scene okay so we have a spinning eight of us logo music in the background fades in and out Amazon Sumerian fades in then it drifts up to the left welcome to Sumerian notice that Christine also faded in and then she she said hello Christine Amazon welcomed Amazon's me again I think I can't actually see or hear what you just said but close enough so the reason I'm describing each step is because they're each thing like all these fade ins fade out all those things actually have to be created and built they don't just automatically happen so you have to edit it and customize that to happen as you will soon see all right I'm gonna reload this for when we will use this again all right so I'm jumping into the scene itself and I'm gonna move my camera around a bit so you can see all right so Christine so we are in 3d space right so as we were looking at that scene itself it looked like it was more just like in a 2d plane but it's not really it is it is built in a 3d environment so we have Christine we have a white background so this is really almost like we're creating like a three-dimensional or a 3d digital like recording studios really is what the is what we are replicating here if you actually go back to the published thing and you click around with a mouse you can actually see like a parallax effect happening so you can verify that it's 3d great say it again if you go back to the publishing it seemed again it's me now on twitch I'm seeing myself in the your 10 seconds behind all right got it and if you use your mouse and then you click down and hover around then you can see kind of like a parallax effect happening oh I seriously okay right alright just move the camera okay so there's a 3d effect to it there we go okay now I'm just never seen ya see ya see as I'm using my mouse to click around you it is a 3d space so that's what's no really cool thing about this alright um oh you can't actually see here we go sorry wasn't showing my screen there we go so I'm moving the camera around and there you can see the three-dimensional aspect to it yeah alright yeah we are sometimes it's hard when you're doing these broadcasts we're like there's a 10-second delay sometimes we're looking at the wrong thing alright um sorry oh this is our scene so we have let me just point out the few different things we have here some of them you can see something you can't we have a white background with what I imagine is a light shining on it kind of like a spotlight then we have this this 3 ear this two-dimensional rectangle which is the Christine mask which is put in front of Christine then we have this main camera which is the camera that is used to when you're actually in play mode so even though we're looking at it through this editor camera that's main camera is the one that's used in play mode we also have a sound entity which is the background music and so I believe like you're correct me if I'm wrong that that just plays whenever you start to see more specific attributes of the sounds and tracks me see right cool yep so that is my screen okay I don't see what else we looking at alright then we have a timeline entity we'll look at that what that is in a minute we have the Sumerian logo we have the AWS logo loading and then the logo shadow so we do have some other like there materials but they're really just images or PNG files I believe they're PNG files so the spinning logo the Amazons Marion logo that drifts upwards and the shadow that's behind it all of those things are entities within our scene and so I just want to start with the database logo that's spinning and look at the state machine behavior that makes that happen and just let's look at what's going on all right so let's I'm gonna go ahead and select the aw load loading logo and if you notice the state machine there's this low logo loading animation behavior on it so I'm gonna click that to edit this behavior so we can see what's happening with it let me go ahead and drag this up so we can see I'll zoom out a little bit alright so I believe that this is the really the first behavior that triggers or is fired when you play the scene so when we play the scene what happens is you don't actually don't see anything if you remember it was just white and then the logo faded in I know spinning we'll get to that in a minute but the the logo fades in alright so what happens is is that this behavior is configured to make that fade in fade out so what it is is it is first the state the first state is this weight state and I have this selected this the state that I have selected I'm looking at I can look over look at over here in the inspector panel and I have a weight action attached to it so it'll wait for 1000 milliseconds or one second and after that it'll transition to this next state we is tween opacity up which has the action tween material opacity sounds a little confusing really what it's saying is that it's just tween opacity tween is best understood as a lot of different actions that have this a tween action or between title to it tween basically means it shows you the change from one state to the next so it'll show it going from zero opacity to a full opacity and that has a fade in effect conversely it also can go from a full opacity to zero opacity will have a fade-out opacity so otherwise if you just change the opacity from 0 to 1 or 1 to 0 it would you know appear and then then disappear appear and disappear but this actually shows in between those values and shows so excuse me so it shows it going from 0 to 1 and then shows it going from 1 back to 0 which is fade in and fade out so really this is primarily I believe a fade in fade out behavior so it it it goes from 0 to 1 of opacity of 1 which is a hundred percent and then once it does that oh and it also does it over two seconds or 2,000 milliseconds then it transitions over to this next weight state which just all it does is just holds it in that state for fifteen hundred milliseconds 1.5 seconds I'm just going to not I'm just gonna say seconds nine milliseconds for now on and then after that it's going to transition to this final state which actually has two actions attached to it I'll talk about the second one first it then goes which is the tween material opacity so droop brings the opacity back to zero so it fades it out so just imagine the logo it fades in fades out however there's also this emit message action and the message is reveal right here that will be used to trigger a different behavior in the scene so it it emits this message at the same time it then changes the opacity from one back to zero but when it emits this message other behaviors in the scene can hear that missive message and then initiate their own behaviors and actions and we'll see how that works as we go along so let's just look back at the scene again to see how that works you need to reload it I'm not going we're not gonna watch the whole thing I'm just gonna press Start you see how it fades in and fades out great so that's that's all we're talking about really is that fade in fade out do you wanna play it from the edit mode so people can see how short states are trying to transition you from one to do next sure I was asking me to play it from from within the editor that's actually a better idea so you see it fades in waits and then it disappears again that's it that's you can see that each state that it's at the seams are highlighted in green so you can see how those scenes are sorry how each state is transitioning and if there's problem with one of them you can easily debug where the issue is okay yeah that's not specific to this scene but just in general working with the scenario itself right to be useful right that's a really good point because when you're actually working in a scene and you're like where is it getting where's my behavior getting snagged like where is it actually not moving from one state to the next if you see it just stops on a certain behavior you know that or a certain state you know that something's not triggering correctly or something isn't happening right there so it helps you kind of figure out what might be the issue that's a really great point now let's see I haven't looked at the chatroom in a minute so let me just look over there okay any other questions Java one guy thanks for joining us and let's see anybody else come in to tech geek 42 hello everyone thank you for joining us Munna Shah 1 2 3 my man let's see MP print our MP our Francis I know who that is let's see what else we got one question I see do you mean to have two boxes covering up the host and I'm guessing that's the the rectangle the white rectangle in front of Christine's face and the reason for us having that is because as you notice when the public scene we want to be able to fade in the host in the middle of the scene so that's why there is a white box in front of her but you'll notice later as we walk through this that the rectangle gets faded out just like how you saw for the logo already right exactly so yes there is a yeah as Aiko said there's a really specific reason why that is there and that's because Christine was didn't appear at first and then she did so it actually wasn't it appears that Christine is fading in what actually is happening is that that white it's a mask yes fading out to reveal Christine so that's actually what's happened um there again there are multiple ways to do that I believe we could actually fete her in and fade her out so I I don't I believe that would be possible so there's again there's different ways to do it but that's just the way this particular scene is built all right all right so we've so far just covered the fade in fade out of the AWS logo now it's spinning let's look at how that is actually happening that is happening again I believe by using the timeline entity I think there's something else going on as well which I'll have ICO explain but the timeline entity week this is something we haven't looked at at all yet I'm gonna go ahead and select timeline entity and then I'm gonna toggle on the timeline well before I do that notice that the timeline entity the duration is two seconds and it's it's set to loop so I just will loop over and over again and also it's set to auto start so it starts playing as soon as the scene starts I'm gonna toggle on the timeline and then I'm going to sew this is our timeline editor so if you look at any of the the UI basics and if you go to this drop down tool this tools drop down menu you'll see text editor which we've covered tech state machine which we covered and then the timeline editor which is this our first time actually looking at this so this is what it will actually take us or this menu all take us down to the timeline or you can use the T as the command hotkey there alright so the timeline works like this and what you need to do is when you have a timeline you can drag off to show my entities panel you need to drag one of the entities in your scene to and apply that to the timeline and so we took the AWS logo loading and added it down here and once it's applied to the timeline or you could say at the reverse that the timeline is applied to that entity you can then start making changes and animations really happen within your scene over the course of your timeline so there's this is only two seconds and as it happened as we move the let's see the playhead that's what that thing is called as you move the playhead forward you can create keyframes or make changes here in your translation values in your rotation values or your scale values to to make entities move from one location to the next you can rotate them if you want and you can scale them and it'll it'll again show that actually happening it doesn't just rotate from here to here or appear here and then appear here what happens is it actually moves from here to here it rotates it shows the animation of that change taking place and so you can change these values and it'll automatically create a keyframe and we'll do another stream another point that gets into more details on how to use time lines and there's a lot of documentation in the tutorial site on how to use time lines but if you're familiar with premiere or After Effects for a lot of those different those programs you should be familiar with timelines and keyframes so when you create a keyframe add a value it will as the timeline approaches that value it'll change to that value and then as the timeline continues it will change to the consecutive values so what we have here is just really just two two rotation keyframes and this was what makes the icon rotate now let me just play this I caused a comment and I'll and I'll address that in a second if you notice it as the scene plays it just goes and it loops over and over and over and so what's actually happening is that scene is or that that eighth of his icon is continuing to rotate but because you can't see it anymore because the opacity is turned down you just can't see it but it is actually there and it is rotating I could do you ever get another comment about that okay so I do have a question now it looks like it's kind of like bouncing and like quivering and then like turning and spinning it doesn't look like it's just a continuous rotation which is what I would expect from the from just two rotation keyframes so what is causing it to actually rotate kind of bouncing around like that that is a good question maybe I'll stomach jab a one-guy I'm bummed to see you go but glad you'll be watching this later I have to get back to you on that I can't quite remember how the bounce is happening and before I forget to do so I'd like to also give a quick shout out to Steve Tsui for working with me on the scene and he was a he drove a lot of this animation aspect too but why don't we get later okay so we might have to again there was I was the main person who built this I probably should have asked beforehand before I asked her a question but yes there's that's that's the general concept of these of the timeline and but there is something there is something that's making it actually kind of wiggle a little bit you see the Wiggles and then it spins so anyway we can all invest take that and get back to it all right so that's that's the that's what's making it rotate so that really covers the basics of that AWS logo and how its rotating in fading in fading out I'm gonna turn off or toggle off the timeline and then let's look at next the Cimmerian logos the Cimmerian logo is where it says amazon Sumerian and it goes from the center of the screen up into the left hand corner of the screen and if you notice the Sumerian logo has in the state machine the logo animation behavior so I'm gonna edit that and take a look at what's going on here all right so what what fires this behavior to begin with is this listen to message state and then we have a listen action attached to it and then it's listening for that message reveal and if you remember that AWS logo fired that message reveal and then once this behavior hears that message well then fire and continue on the rest of the behavior so that's what actually initiate initiate this behavior and then it goes it first goes to a wait state and awaits for two seconds and then just like the last behavior we looked at it has this it has this between material opacity so it brings up the opacity and it essentially it's a fade in and then it waits for two seconds and then it emits its own message which is logo animation so just try to remember that at least for now that what the relevance of this at least that logo animation it emits that message and then after that it goes to a tween move which this moves that logo from the center up to the top left hand corner so again you could actually use like an animate you could use a timeline to move that animation up there as well and that's really what this is what's happening here is that it's elapsing 3.5 seconds and it moves the translation to these values negative 0.1 2.0 4 and 0 and so that's that's how you actually see the Sumerian logo moving from Center up to a different location is this tween move so there's tween opacity which shows something fading in or fading out a tween move is showing it move from over here to over here if you were just to change the translation automatically from here to here that's what you would see you would appear here and then it would disappear and appear up here in the top left but the tween action shows you the change in between those two translations so that's what's happening there so you can see that all of these behaviors are really daisy chained together it's that one behavior kind of almost completes itself fires a message starts another behavior it goes along it fires another behavior and then so that's how all these these behaviors are kind of connected to one another and how they get fired okay so let's see um so that's the that's the Amazon logo itself however let's look at I'm gonna go ahead and play this soon like I did the last one see see how it's just listening for the message it heard it and waited capacity its waiting again MIT's message between move and it goes up and then admits another message what does this actually this lasts amid event MIT message show host okay it actually admits I didn't look at this last one then admits another message so admits a message logo animation it moves to the top left and then it emits another another message show host so this behavior is emitting two messages and at which we will get to as we move along in all these behaviors okay now notice though that we had the Amazon logo and then we also had a shadow a drop shadow behind that logo appearing on this white backdrop those are actually two different those are two different entities are two different PNG files themselves or logos if you will and so the logo shadow is that entity and so let's so if I click on the logo shadow and then I hit the edit button will open up the state machine somebody has any question in PR Francis hey Jake is there a limit to the number of behaviors you can link together no there is not I mean I guess the the the limit would be you know your computer blowing up or something but no there's really no limit you can just add animations or I'm sorry behaviors upon animations upon behaviors upon animations you can you can relieve your's together using as many messages as you want the important thing is is when you were linking these listen behaviors in these emit message behaviors because essentially an a for this to work you have to have one action emitting and then you have to have another behavior listening and so for those two things to happen you got to have that message that links those together and that has is case-sensitive so if I was to change this R to a capital R for example it wouldn't work anymore like it has to be the same and so it has to be exactly like that and those messages are how we're linked them together alright so let's see we are looking at the logo shadow and it is also just like the logo itself it's initiated by hearing or listening to this reveal message in the net weights two seconds its opacity does the same thing it has the opacity that fades in using the tween opacity or in between mid between material opacity and then after it fades in it listens to a message the logo animation and then once it hears that logo animation message it then moves up so you remember that the logo itself emitted that message and once it emits that message the this shadow here's that and then it moves really alongside or congruently with it so again there's I imagine we could probably have built this to where they both have really the same exact behaviors and then move together but I'm trying to think just off the fly if that would work or not not sure either way yes here's that message they all move together and then they stay up there for the remainder of the scene up in that top left hand corner alright am I missing anything Aiko no those two state machines we just covered are very similar to one another the only difference is the distance it moves so the end positioning of these logos are different so then we get more of sort of like a parallax just for artistic standpoint yeah so let's actually look at that again let's go back to my scene I'm gonna turn off actually the and let's see where's the environment this sound I'm gonna turn the sound just down all the way for now just because that sound can probably get a little bit annoying if it's just playing over and over again alright so I'm playing the scene and once it starts playing you'll notice that their shadow is there so there is the shadows behind it you see but as it moves up yeah there's a little bit of a difference so then you can see it a little bit more prominently it's to give a more 3d effect so there we go alright so that's really so we've looked at really two different things we looked at the AWS logos spinning and moving or spinning and fading and fading out then we've looked at the AWS or the Cimmerian logo and its shadow also fading in and then both of them moving up and then lastly is the host Christine in what she has going on so then it's what happens is is that the Christine mask here so someone was asking about that mask what happens to that well let's click on the Christine mask which is just this white rectangle I'll edit that behavior and what it's listening for oops zoom in a little bit it's also listening to that logo animation message over here and once it hears that and that's emitted by the Amazon logo or this sorry I keep missing it up they Sumerian logo the Sumerian logo admits that this mask here's that logo and then it has also has a tween move and so it moves out of the way right I thought it had more of a fade in fade out is that actually sliding its moves just so slightly just so because the host actually slicing a little bit from the right of the screen too towards the center of the screen so we just moved the mask over a little bit too but it's just a subtle point okay yep so let's let's play the scene again and see how this works so rotating fade in/fade out this main logo fades in one of the shadow it moves up okay and you see that so that mask slides over and then after it moves it amidst it emits a message called host ready host ready let's see let's well let me think all right that's so that covers the appearing of the hosts right so now let's actually look at the host herself oh I'm sorry frag is 0br I had the wrong thing showing um let me show that one more time I had ICO on camera my bad no so the rectangle is listening it'll hear this met that message it'll then move the mask and then a meta message itself okay you are welcome my fault alright um okay that's the mask now let's look at Christine and alright so we actually have we'll get to the script in a minute we have two animations the host animation and the host move let's see host animation let's see can you tell me what's going on with this host animation behavior okay I also one thing I should note is that I just asked Ike I was like hey would you mind coming in and be my guest real quick so she's super busy it's some of these things I'm just asking around the fly so she's having to kind of her memory do you are you do you have your scene pulled up on your yeah actually I'm looking at what's suing all your touch okay but so I'm gonna switch over to her screen so go to Christine did you hide the so there's two things to state machines as attached to Christine entity one being the host animation which connects from the scene where she shows up and then she's ready to be able to speak in the seeing the other one is the host myth so as we mentioned a little bit earlier we slider over slightly to the towards the side of the screen so that's what that state machine is handling so I just opened up the host animation save machine option so first it's just waiting for a WS SDK to be ready because we want to use a speech component and for that we need to have be able to access the AWS SDK now this happens in the beginning of the scene so that's the initial state then it waits move the next state is the host very event so it's waiting for another state machine to emit that message now GUI that was coming from the the logo animation then once that happens that she waits for 1.5 seconds because we want to give a little bit of break before she before she appears and then starts sneaking and finally when that's done then we emit this message called host talk which is used in the script component which we will cover shortly then the other thing was the host move open this similarly it's listening to an event show host and as I was saying earlier it moves there over my circle to force the senators being it happens really fast it with ten milliseconds so we can show her a mover quickly towards the center of the screen and then that's it in terms of the state machine actions one quick note about the Christine is we have these each component attached to it already as you know here is in the speech component so we have attached and we access the speech comment component through the scripts and then the other thing to highlight as well before we move on is how we set her up in the in the scene let me hide they mask so we can see where she is so in this thing we have her focus pretty close to the screen and how we achieved that how to process how to position her clothing and to fill up most of the screen is we have the main camera position so that it's really close so what we tweak is the field of view when we crank that up you can see it means that there's more things that's showing up on your monitor itself but we didn't want her to be that you know far away we wanted her to feel close because this is more of a digital signage application so that's why we had empathy of around 45 so she's nice and framed in our viewport okay cool so I've been trying to turn around some audio ten some ten like sound team type sound from I chose microphone hello not quite sure why but I'm not quite sure look him to see doesn't yeah I don't know what that would be coming from okay so I can repeat anything if anybody has questions it says that I'm tiny also let's see not really not quite sure nope that would be right I just did something cc or two says it's good on art your side so maybe still just me see I just get rid of my screen hold on well I'll just leave oh it's good now it's good now okay getting different things like it's going quite sure okay you switched icon screen we hear both mics so we hear it twice Roger the tiny do I okay I'm trying to fix one thing because I just made a mistake so bear with me as I try to fix this let's see oh I know what I did um screen capture okay and moving this down all right I know I'm talking myself but it's because I messed something up okay all right let's see let me look at one thing with I goes yeah I'm not I'm really not sure why there would be any audio issues not seeing why okay again apologize if there are major audio issues it looks fine on my side but we'll just continue on all right again I'm sorry I was distracted with this audio issue where did you just leave off icon we covered the state machine actions and on Christine and then we took a look at how we position the camera so she is framed nicely in the screen cool now why would so how does it work where she is this speech so it we've looked at other and in past episodes we've looked at how is she actually normally we've created a speech and then you use a state machine to fire that speech to happen but we actually don't have a speech file here what we do have is this script component yes and let's see here so I'm gonna open up the script component and let's look at what is going on I'm gonna switch over to ICO screen and she's gonna walk you through and this is in the text editor or she has this this script file added to Christine always open is to specific file the other way and on the top upper left-hand side corner over the IDE and then you go to the text editor that brings up the same thing but you don't have to scroll down on the inspector panel to find that file so I kind of find it nice to have so can you see my script file I'm on the monitor okay all right so as I mentioned so what this script does is what it does is it accesses the speech component attached to the Christine entity and then it says one of the set of strings that is stored in this script file so as you saw she says either welcome to Sumerian or hi my name is Christine so just to provide a quick overview of how the script component works in Sumerian so as you know it's JavaScript based so you can use regular yes I'm sick it's kind of syntax you can you can't even do that you can use the bar anything that you provide on the top of the script here if you do like that test then this is global to all of Sumerian scenes but I like to let it uh spoke to whatever is necessary so you declared a variable inside the setup function like the body variable then that's local to that function and if you look at the how the setup function is set up it passes arguments and context context is is there specific to the script file itself so you're able to limit the scope of that variable to this script file if you do CTX entity like here then you're able to access the parameters that's attached to that entity itself and the args here the arguments are what shows up in the user interface on the inspector panel as you can see here so in this case our parameter is a called fade out at the end as you can see on the script component you can see that it shows up here you can configure your parameters directly from the UI so that's how you can use the arguments great one of the thing the reverb thing is that what you might actually just swing your share over yes we're both just going to say we're going to squeeze in the Shocker over here we'll switch to my screen yep okay Syria nice and cozy that word let's look at these script all right so let's kind of step through this file to see what it's doing first we create this variable called body so this stores the set of search that Christine is going to say and so you can change that to however you'd like welcome to my snare in scene blah any type of strings is acceptable here and then the next line we have the index variable what it is doing is it's just picking a random number based off of the number of the scripts that stored in the body variable so in this case it'll pick either 0 or 1 and whichever was selected round time when you have a public scene she will say that script that one specific script out of the two options you can imagine that you can have as many options as you'd like as you see fit and the next line lying 11 we have speech component variable as I was saying so it's trying to get access to these speech components that's attached on the same entity and how I do is we first we look at the CTX entity so we grab onto the entity itself and we get the component speech component similarly you can do the same for other components for for example the dialogue component and other ones as well and the next line we instantiate the speech I guess system and so how we do it is we do speech equals news Mary and dot speech because that is specific to the Cimmerian engine so this is how you indicate that it's a scenario in engine it's Marian class next line speech component add speech speech we add these could this speech instance to the speech come not much more to say this and then next one we configure the speech speech files by doing speech dot update config this is a way to dynamically generate a speech file and for the body which is what the text at Christine will say we're sending the text with the speech tags Raptor wrapping that and then at the end we have this CTX that speak function all it's doing is it's it plays the speech when that function is called the rest we if anybody has questions about why we're doing this we can cover later but it all it does is this is emitting a message so you can talk to a different app if this scene is integrated as a iframe we talked before about how the events emitted from the state machine is connected to the scripts and that is done in line 41 so here we're indicating that this script file is listening to the event calls host talk that was emitted from a state machine and once that in the is a minute then it executes the CTX that speak that we just covered over here and lastly and clean up as we do with any event listeners we clean up that listener at the end all right there any questions about that we're gonna kind of get reseated here yeah thanks for everybody for bearing with us as we were figuring out this audio issue yeah and so that for the most part that kind of shows a little bit about the adding a script how to incorporate that using a state machine and time lines and how to tie all of these things together yeah so that's the basics of how we do this kind of bring it all together type of scene you switch over here again yes that's the basics of how do you kind of bring all this stuff together and all these different components and again there's the cool thing is you can if you're familiar with JavaScript you can do a lot with it if you're not familiar with it you can still do so much with just the using the state machine itself and so it's it caters to lots of different type of users and creators so you don't have to be developer but if you are developer you can use it as well and use whatever is more comfortable to you yes so that's that's kind of wrapping up the basics of how to do create a scene and we've we didn't actually recovered Lex last week we didn't use Lex here but you could incorporate Lex Potter and Amazon Lex bot also which is it's just a huge use case for a lot of people as well let's see so we do have a question an API reference for Sumerian documents yes actually if you go to go to the Help button your the scripting API and that'll take you to the scripting reference there Janus SKU seven Janus Janney scutes q7 it's a great name I like that yeah I think any other questions the people might have and again if you remember there's there was sound playing the reason why that was is that we had a sound component that just automatically plays upon the initiation of the scene let's see so we should be able to switch back to ICO here I could you have any more comments thoughts I hope everybody found this to be useful and if there's any questions please hit us up one slack or yeah joining us for another Twitter stream yeah we're gonna be back again next week let's see I want to do want to promote or select channel right here and there it is oh we got let me get down oh no that's not what I wanted here we go slack that Sumerian dot world I'll duck down so you can see it that slack channel is a really great place to find other people other people that are using Sumerian a great community people we are on Sumerian or on slack there as well so you can find us I go myself Ben Moore who is the normally sitting here normally sitting with me here in the studio who is jamming Moo on the truck the chat channel he's he is here but remotely yeah so you can find us all on slack it's a great place to ask questions see what other people are up to solve problems figure out best best practices for doing certain stuff and yeah if you have any questions about this scene you wanted to do something similar or if there's something in here you're like I remember you doing this for that but I can't remember hit us up we'd love to interact with you and help you out there as well as other people so if there's no other questions we're about at the one hour mark thank UI Co for joining me yeah yeah this is fun I like heaven here we will be back next week if there are no other questions even if there are questions we can still answer them even if we sign off so we will be around thanks all for joining us come back next week next Tuesday 1:30 we love doing this we're glad you're here we will see you

Channel: Amazon Web Services

Views: 6,328

Rating: 4.9000001 out of 5

Keywords: AWS, Amazon Web Services, Cloud, cloud computing, AWS Cloud, virtual reality, augmented reality, mixed reality, amazon sumerian, AR, VR

Id: P7xF-5jbK9Y

Length: 57min 44sec (3464 seconds)

Published: Wed May 30 2018