Amazing flashlight effect from My Father's Long Long Legs won't work in Harlowe

Comments

• convictedweirdo

  May 2016

  That's actually a pretty cool effect I could see being really useful for adding atmosphere to some games.
  
  (I'm also curious to see if this is possible.... but in Sugarcube 2.5+ )
• greyelf

  May 2016

  notes:
  1. A more experienced Javascript/CSS coder may state there are better ways to implement the effect you want in Harlowe/SC2 but I am going to answer based on the code you supplied.
  2. The following assumes that the required image has been placed in the correct location.
  3. If you are using local file references (like the original example/this solution is) then this effect will not work when using either the Test or Play options to view the Story HTML. It will only work if you use the Publish to File option and save the generated Story HTML file in a location relative to where the image has been stored.
  

  How do I get it to work in Harlowe?

  Getting it to work is easy, you just need to apply the functionality to the html element instead of the body element. This is because unlike a most HTML documents Harlowe does not use the body element as the parent of the HTML it generates, it instead uses it's own tw-story element which is a direct child of the html element.
  
  Place the following Javascript into your Story Javascript area:

  $("html").mousemove(function(e){
  	$("html").css('background-position',(e.pageX - 250)+'px '+(e.pageY - 250)+'px');
  });
  

  Place the following CSS into your Story Stylesheet area:

  html {
  	background-color: #000000;
  	background-image: url(images/flashlight.jpg);
  	background-repeat: no-repeat;
  	background-position: 50% 50%;
  	cursor: crosshair;
  }
  

  
  If you want to control which passages the flashlight appears on then you could use the technique from the Basic Harlowe Passage Tag Based Styling thread to do this. Simply assign the passages a tag (like flashlight) and then change your CSS to be based on that tag:

  html.flashlight {
  	background-color: #000000;
  	background-image: url(images/flashlight.jpg);
  	background-repeat: no-repeat;
  	background-position: 50% 50%;
  	cursor: crosshair;
  }
  

  
  

  but in Sugarcube 2.5+

  Most of the original code will work in SC2 except you will also need to change the text (fore-ground) colour.
  
  Place the following Javascript into your Story Javascript area:

  $("html").mousemove(function(e){
  	$("html").css('background-position',(e.pageX - 250)+'px '+(e.pageY - 250)+'px');
  });
  

  
  Place the following CSS into your Story Stylesheet area:

  html, body {
  	height: 100%;
  }
  body {
  	color: #000000;
  	background-color: #000000;
  	background-image: url(images/flashlight.jpg);
  	background-repeat: no-repeat;
  	background-position: 50% 50%;
  	cursor: crosshair;
  }
  #title {
  	color: #EEEEEE;
  }
  

  
  If you want to control which passages the flashlight appears on then you could use SC's built-in passage tag based styling to do this. Simply assign the passages a tag (like flashlight) and then change your CSS to be based on that tag:

  html, body {
  	height: 100%;
  }
  body.flashlight {
  	color: #000000;
  	background-color: #000000;
  	background-image: url(images/flashlight.jpg);
  	background-repeat: no-repeat;
  	background-position: 50% 50%;
  	cursor: crosshair;
  }
  body.flashlight #title {
  	color: #EEEEEE;
  }
  

  
  warning: Both of the above Harlowe and SC2 passage tag based solutions suffer from the same issue, that being that the Javascript used to track the mouse cursor movement is active even when the flashlight effect is not being displayed.
  
  A better solution would include the usage of a jQuery .off("mousemove") to disable the mouse cursor tracking when not needed, and only attach the mousemove tracking when required.
• convictedweirdo

  May 2016

  Ahoy Greyelf, thanks for the speedy response.
  
  I've got this working in sugarcube 2 (twine 2), but I'm getting an error when I load the game;
  

  Apologies! An error has occurred. You may be able to continue, but some parts may not work properly.
  
  Error [tw-user-script-0]: Unexpected identifier
  

  
  If I close that dialog box, it trundles on its way and works happily, but I wondering if there's something silly I'm missing that's causing an issue, and hence the error.
  
  The below is what I've placed in the javascipt section for twine 2.
  

  $("html").mousemove(function(e){
  	$("html").css('background-position',(e.pageX - 250)+'px '+(e.pageY - 250)+'px');
  });
  
  The jQuery javascript framework is used to monitor mouse movement across the page:
  <script type="text/javascript" src="flashlight.js"></script>
  <script>
  	$(document).ready(function() {
  		$("body").mousemove(function(e){
  			$("body").css('background-position',(e.pageX - 250)+'px '+(e.pageY - 250)+'px');
  		});
  	});
  </script>
  

  
  And the stylesheet below
  

  html, body {
  	height: 100%;
  }
  body.flashlight {
  	color: #000000;
  	background-color: #000000;
  	background-image: url(images/flashlight.jpg);
  	background-repeat: no-repeat;
  	background-position: 50% 50%;
  	cursor: crosshair;
  }
  body.flashlight #title {
  	color: #EEEEEE;
  }
  
• greyelf

  May 2016 edited May 2016

  @convictedweirdo
  Delete the following from your Story Javascript, it is a duplicate of the first three lines of your example:

  The jQuery javascript framework is used to monitor mouse movement across the page:
  <script type="text/javascript" src="flashlight.js"></script>
  <script>
  	$(document).ready(function() {
  		$("body").mousemove(function(e){
  			$("body").css('background-position',(e.pageX - 250)+'px '+(e.pageY - 250)+'px');
  		});
  	});
  </script>
  

  
  And change the target element of the first three lines of your example to use body, this is my fault due to a cut-n-paste error in my SC example. (ie. I cut-n-pasted the code from my Harlowe test instead of my SC test)

  $("body").mousemove(function(e){
  	$("body").css('background-position',(e.pageX - 250)+'px '+(e.pageY - 250)+'px');
  });
  

  
  note: I would fix my original example except that the forum software only allows that within the first 60min of a post.
• convictedweirdo

  May 2016

  Fantastic, thanks so much. Because I'm so clever "derp" I thought I needed to reference the javascript from the original source.
  
  Honestly, I don't know what the twine community on here would do without you.
• LostandFound

  May 2016

  For me in Harlowe this is great and I almost have it working but I have one problem. When the passage arrives that I want the effect it begins to work but the following passage still has the effect. I can handle if the mousemove cursor doesn’t change but the background is black and the image continues to be displayed. What step am I missing?
• LostandFound

  May 2016

  Hey I ansered my own question with this:html.morning{
  
  background-image: no-image; background-color: white; background-repeat: no-repeat;
  }
  
  By changing the background in the next passage it shut off the flashlight.
  
  Greyelf thank you.