In-world widget crashes Crayta

Describe the bug:

My game keeps crashing without information what exactly went wrong.

How do you cause this bug?

  • Open editor of “Build-A-Superhex” ( I might have a need to workaround this though to continue work, ask me if need to reproduce)
  • Run preview
  • move mouse a bit
  • jenkins is angry
Unhandled Exception: EXCEPTION_ACCESS_VIOLATION reading address 0x0000000000000078

cohtml_WindowsDesktop
cohtml_WindowsDesktop
cohtml_WindowsDesktop
cohtml_WindowsDesktop
cohtml_WindowsDesktop
CraytaClient_Win64_Shipping
CraytaClient_Win64_Shipping
CraytaClient_Win64_Shipping
CraytaClient_Win64_Shipping

Screenshots / video of bug:

Which platform: Stadia and PC both (on Stadia error is different, but still the whole thing is crashed)

Which input: keyboard + mouse

Your Crayta username: str-read

Game seen in (including “Hub” or “Editor for XYZ”): Editor

How regularly do you see this? (E.g. 2/3 times - please try 3 times if possible): always

Time + date seen: 02.10.2021 00:50 CET

Version number (found in Help tab in Settings):

Thanks - I’ll take a look!

UPD: I fixed this in the game by using canvas instead of svg.

Here is widget version that was crashing:

<html>
	<head>
		<!-- Required includes -->
		<script type="text/javascript" src="coui://uiresources/js/crayta.js"></script>

		<!-- Set default values to be applied to this widget when it's added to a new entity in the world
		     The name/value fields should match the names displayed in the property editor for this widget -->
		<default-asset-properties>
			<default-asset-property name="type" value="Screen"></default-asset-property>
			<default-asset-property name="visible" value="true"></default-asset-property>
			<default-asset-property name="requiresCursor" value="false"></default-asset-property>
		</default-asset-properties>

		<style type="text/css">
			body {
				font-size: 5rem;
			}
			
			.hex {
				position: absolute;
			}
			
			.hexes {
				width: 100vw;
				heigth: 100vh;
			}
			
			.container {
				width: 100vw;
				height: 100vh;
			}

			.pointer {
				position: absolute;
				border-radius: 1rem;
				width: 1rem;
				height: 1rem;
				transform: translate(-50%, -50%);
				background: red;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="pointer" 
			     data-bind-style-top="{{state}}.pointer.y +'px'"
			     data-bind-style-left="{{state}}.pointer.x +'px'"></div>
		</div>
		<div>
			<div class="hex"
			      data-bind-for="hex:{{state}}.hexes" 
			     data-bind-style-transform="getHexPositionTransform({{hex}})"
			     >
			     <div data-bind-html="getHex({{hex}})"></div>
			     <!--data-bind-html="getHex({{hex}})"-->
			     
				<!--svg data-bind-style-transform="getHexRotationTransform({{hex}})" width="300" height="300">
		  			<polygon points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>			
				</svg-->
				
				
			</div>
		
		</div>
		

		<script>
			
			function getHex(hex) {
				const color = hex.color || 'black';
				return `
					<svg transform="${getHexRotationTransform(hex)}" width="300" height="300">
			  			<polygon fill="${color}" points="300,150 225,280 75,280 0,150 75,20 225,20"></`+`polygon>
					</`+`svg>
				`
			
			}

			const scale = 0.5;
			/* YOUR JAVASCRIPT CODE HERE */
			function getHexPositionTransform(hex) {
				let size = 150 * scale;
				let verticalSpacing = size * 3 / 2;
				let horizontalSpacing = size * 2 - 35;
				let startX = size;
				let startY = size;
				if (hex.row % 2 != 0) {
					startX = startX + horizontalSpacing / 2;
				}
				let centerPxX = startX + horizontalSpacing * hex.col;
				let ceterPxY = startY + verticalSpacing * hex.row;
				return `translate(${centerPxX}px, ${ceterPxY}px) `
			}
			
			function getHexRotationTransform(hex) {
				return `translate(-50%,-50%) rotate(30deg) scale(${scale})`
			}
			
			function getTests(model) {
				return model.tests
			}
			// A model to store data in for your widget
			engine.createJSModel('state',
			{
				hexes: [
					{
						row: 0, col: 0
					},
					{
						row: 0, col: 1, color: 'blue'
					},
					{
						row: 1, col: 0
					},
					{
						row: 5, col: 10
					},
					{
						row: 6, col: 9
					}
				],
				pointer: {
					x: 0,
					y: 0
				}
			});


			/*
			* You can manipulate model data from Lua either through a Coherent function:
			* e.g. self:GetEntity().exampleWidget.js:CallFunction("exampleCoherentFunction", "Some new text")
			* 
			* or directly, via:
			* self:GetEntity().exampleWidget.js.data = 23
			*/
			engine.on("addHex", function(hex) {
				state.hexes.push(hex)
				engine.updateWholeModel(state);
				engine.synchronizeModels();
			});
			
			engine.on("setHex", function(hex) {
				console.log("setting", JSON.stringify(hex))
				state.hexes.forEach((it, index) => {
					if (it.row === hex.row && it.col === hex.col) {
						state.hexes[index] = hex
					}
				})
				state.hexes.push(hex)
				engine.updateWholeModel(state);
				engine.synchronizeModels();
			});
			
			window.onresize=function(e){
				Crayta.callLua('SetScreenSize',window.innerWidth,window.innerHeight)
			}
			engine.on('Ready',function(){
				Crayta.callLua('SetScreenSize',window.innerWidth,window.innerHeight)
			});
			
			/*
			* You can also trigger Lua functions in game scripts on this entity by using `callLua` via a Javascript function
			* (`event` is HTML-specific event data, which you can ignore)
			*/
			function exampleTriggerLuaFunction(event, data)
			{
				// You can pass any data to the Lua function by adding it to the end
				Crayta.callLua("myLuaFunction", data);
			}
		</script>
	</body>
</html>

I think that reason of crash are those data-bind-html combined with svg ( I needed this to make each hex with different color ).

Hi str,

Thank you for the continuous updates.
We have already opened a ticket for our internal team to investigate this issue further. This will definitely help our team. :slight_smile: