I’ve recently been notified of an issue here once again to do with enqueuing CSS. So I decided to take another look and I believe I’ve improved the Crayon capturing and enqueuing process by cleaning it up a bit. Now you’ll see two new options in settings under Themes and Fonts. To efficiently enqueue the CSS for themes and fonts in the html header tag the proper way (default) leave these checkboxes ticked. If you’re having issues for some reason with enqueuing not working, you can go for the legacy method and uncheck these boxes. The CSS will then be printed out before each Crayon. Note this will happen each time they are needed, not only once at the top like enqueueing. This is to ensure that the themes and fonts load wherever they appear. It’s better to leave enqueuing on if all works well.

CCSprite’s can implement the <CCTargetedTouchDelegate> protocol and implement the ccTouchBegan:, ccTouchEnded:, ccTouchMoved: and ccTouchCancelled: methods. I’ve built a class called GTButton that does this and allows you to specify two sprites to toggle between when the touch occurs. By default you must release your finger in the CCSprite to run a selector (a method on a target object), but you can change this with mustReleasemustReleaseInside boolean properties of the GTButton object. Here’s the header file and the download link to the sample project. Remember to change the target SDK in the project settings to the latest one on your Xcode install - I used 5.0.

#import "cocos2d.h"

typedef enum buttonState {
	FMButtonSelected, // Finger Down
	FMButtonUnselected // Finger Up
} FMButtonState;

@interface GTButton : CCSprite  {
	FMButtonState state;
	CCSprite *spriteSelected, *spriteUnselected;
	id target;
	SEL selector;
	/*
	 mustRelease means you must lift your finger anywhere on screen to perform the selector.
	 mustReleaseInside is subset of mustRelease and means you must lift your finger inside sprite.
	 */
	BOOL mustRelease, mustReleaseInside;
}

@property (assign,readwrite,nonatomic) id target;
@property (assign,readwrite,nonatomic) SEL selector;
@property (assign,readwrite,nonatomic) BOOL mustReleaseInside, mustRelease;

+(GTButton*) buttonWithUnselectedSprite:(CCSprite*)theSpriteUnselected SelectedSprite:(CCSprite*)theSpriteSelected Target:(id)theTarget Selector:(SEL)theSelector;
-(id) initWithUnselectedSprite:(CCSprite*)theSpriteUnselected SelectedSprite:(CCSprite*)theSpriteSelected Target:(id)theTarget Selector:(SEL)theSelector;
-(void) setTextureFromSprite:(CCSprite*)sprite;
-(void) setSelected:(BOOL)selected;
-(BOOL) containsTouchLocation:(UITouch *)touch;
// Rect relative to the anchorPoint
-(CGRect) relRect;

@end

Download Sample Project

Today I decided to fix the irritating bug that occurs when moving sprites. Due to the OpenGL rendering, when we use the update() delta to move sprites they can move by sub pixels and this causes a small gap to appear between the two sprites that are used to form a continuous moving background. I used this logic in my parallax effects. There are numerous proposed solutions, but it is apparently due to the OpenGL’s requirement that the sprites dimensions are powers of 2. I tried 64 which worked just fine, but 37 did not. UPDATE: After trying things out again with different images, the proposed buffer pixel doesn’t work - even if you move the sprites pixel by pixel, a gap still appears. It appears that movement is irrelevant here - even placing the sprites at this discrete location e.g.(92,100) can cause the gap. The solution depends on the situation: If you have sprite sizes of powers of 2, there should be no problem. Try 16, 32, 64 etc. Scaling the layer is also not a problem. If you don’t have sprite sizes of powers of 2, then you’re best bet is to use: [[CCDirector sharedDirector] setProjection:CCDirectorProjection2D]; And keep a scale of 1 for your layer containing the sprites. If you set the scale to anything else, once again the gap will appear. If you are setting the scale to anything but 1, then the gap will originate once more. This sort of renders my original post almost useless, but I thought I’d leave the code for the pixel buffer if its ever useful. Updated Code OLD POST: The pixel buffer method only works in some cases, but the movement is not as smooth. The blue and green 8px wide sprites are moving together. The top copy is the default effect with a black gap, the bottom when using the buffer. The white lines actually blur due to the anti-aliasing effect, while the buffer keeps it clear. Here’s a video: http://www.youtube.com/watch?v=ko4WLkWiwx8 I tried setting CC_COCOSNODE_RENDER_SUBPIXEL to 0 in ccConfig.h to no effect. The idea is to create a pixel buffer and move the sprites only when the buffer exceeds 1. If the buffer is 3.456, then we would move 3 and keep the buffer at 0.456 for the next update() call. Here’s a snippet of the code:

-(void) update:(ccTime)dt {
	// Move by some factor of delta
	buffer += dt*16;
	
	// A and B use pixel buffer
	if (buffer >= 1) {	
		float units = 0;
		float rem = modff(buffer, &units);
		buffer = rem;
		a.position = ccp(a.position.x - units, a.position.y);
		b.position = ccp(b.position.x - units, b.position.y);
	}
	
	// C and D move as usual, causing the black gap between sprites
	c.position = ccp(c.position.x - dt*16, c.position.y);
	d.position = ccp(d.position.x - dt*16, d.position.y);
	
	// Log the movement
	NSLog(@"a %f c %f diff %f", a.position.x, c.position.x, a.position.x - c.position.x);
}

However it is implemented, the key idea is the same - add up the amount moved and when it is greater than 1, move it by as many discrete pixels as possible, keeping the remainder for later. The difference in the positions when using the standard approach and the buffer is guaranteed to be less than 1 at any given time. I have attached a very small sample project to show how this works below: Download Sample Code

Writing $[php theme="twilight"]echo 123;[/php] turns into $[crayon theme="twilight" lang="php"]echo 123;[/crayon]. No more do you need to retype the plugin’s charming name anymore - just the language and the settings you care about. If you want, you can turn this off in Settings (like everything else). Also, you can use <pre lang="php"></pre> if you’d like some backward compatibility with plugins that support this style of shortcode. Here’s an example of using Mini Tags and the output it generated. I’ve also added a new $[plain]...[/plain] tag that allows you to wrap any code in <pre><code> ... </code></pre> syntax for showing any syntax without using Crayon. It will also convert any nasty characters into HTML entities for you, so everything will look exactly as it does in the HTML view of the post editor. The IDs of the languages like “php” and “py” can be found in Settings > Crayon > Languages > Show Languages in WP admin.

$[html theme="twilight"]

Here's some XHTML!

// A sample class class Human { private int age = 0; public void birthday() { age++; print('Happy Birthday!'); } } ?> [/html] $[py] # Merge example def mergeWithoutOverlap(oneDict, otherDict): newDict = oneDict.copy() for key in otherDict.keys(): if key in oneDict.keys(): raise ValueError, "the two dictionaries are sharing keys!" newDict[key] = otherDict[key] return newDict [/py]

As was promised, in Crayon 1.7.0 I have added the ability to highlight multiple languages at once in a single Crayon. This is useful when you’re showing an HTML page with PHP with the <?php...?> delimiters, JavaScript with the <script> tag and CSS with the <style> tag. The delimiter regex is defined in /langs/delimiters.txt and there are two new settings added under “Code”. You’ll see a “+” sign by default when multiple languages are detected in your Crayon, and you can hide this if you like. Also, you can disable this mixed highlighting feature by using the attribute like so: <pre lang="html" mixed="false"></pre>. Oh, and you can also use <pre></pre> tags instead of $[crayon] tags now :) So I hope that this nice addition proves useful, enjoy.

Update: As pointed out here, you’ll also want to disable the option “Display the Tag Editor in any TinyMCE instances on the frontend”. Recently I was made aware of yet further problems with attempting to optimise Crayon so it only loaded its resources when it was required - when the $[crayon] shortcode was being used in a post on the page. This was taken care of by using the the_posts filter in Wordpress detailed here. However, this method poses a problem if subsequent queries are made after the initial one, since only the initial query occurs before wp_head, where our scripts and styles are loaded. Basically, if the theme on a site is set up in such a way as to request posts without Crayon shortcodes initially (say, for the sidebar) before the main loop request containing all the posts in that page (which do contain the shortcode) then this method of detection will fail. As a result, I’ve decided to play it safe in version 1.6.3 and allow the option of always including the CSS and JavaScript files on each and every page. A setting is now available under Settings > Crayon > Misc. which allows you to toggle the efficient enqueuing. When enabled, Crayon will try to load these resources only when needed, but as mentioned before, this may or may not work depending on the structure of your theme. I think this will sort of all the problems some people are having. I’ve tested the plugin with the most popular themes and haven’t found any problems with them, so it’s an issue affecting the minority. If you’re having issues with CSS and JS not loading - leave this efficiency setting off (default). If all is well for you, turn it on.

I’m working on an iPhone game and thought I’d share some code for a infinite parallax class I made. I’m aware of CCParallaxNode, I’ve named mine CCParallaxScrollNode and it greatly simplifies the task of creating a repeating background with parallax effects. It does all the dirty work for you, essentially. Here’s the info and link, and a sample project. Remember to change the Base SDK in the project settings to the latest you have. CCParallaxScrollNode on GitHub Download Sample Project

I needed to make a URL into a maximum of 40 characters of uniqueness, so I had a stab at it. This removes every nth character in the string (spaced out across the string’s length) until it reaches the required size. If the url isn’t above the max length (after removing URL syntax), then it is kept as is. This is somewhat naive, but it works pretty well. It’s useful for storing URLs under keys. Another, perhaps better approach is this.

// Example
$length = 40;
echo shorten_url_to_length('https://raw.github.com/aramkocharyan/jQueryPopup/master/example.html', $length);
// rawithbcoarakocarynjQeryopumasereampehtl
echo shorten_url_to_length('http://www.google.com/', $length);
// wwwgooglecom

function shorten_url_to_length($url, $length) {
	if ($length < 1) {
		return '';
	}
	$url = preg_replace('#(^w+://)|([/.])#si', '', $url);
	if (strlen($url) > $length) {
		$diff = strlen($url) - $length;
		$rem = floor(strlen($url)/$diff);
		$rem_count = 0;
		for ($i = $rem-1; $i < strlen($url) && $rem_count < $diff; $i=$i+$rem) {
			$url[$i] = '.';
			$rem_count++;
		}
		$url = preg_replace('#.#s', '', $url);
	}
	return $url;
}

This method basically goes through a string, gets the ASCII value of the character, multiplies it with the fraction of the character index divided by the overall length, and adds it to a total. It then appends the HEX value of the length of the string to the HEX value of this total.

// Example
str_uid('http://www.google.com.au/'); //191a78c
str_uid('http://www.google.com/'); //16177fa
str_uid('hey there!'); //a9998
str_uid(''); //00

function str_uid($str) {
	$uid = 0;
	for ($i = 1; $i < strlen($str); $i++) {
		$uid += round(ord($str[$i]) * ($i / strlen($str)), 2) * 100;
	}
	return strval(dechex(strlen($str))).strval(dechex($uid));
}

The global settings found in Crayon > Settings can be overridden using attributes for an individual Crayon just like the regular attributes (“lang”, “title”, “url” etc). Here’s an example: $[crayon lang="html" font-size="20" mark="1" width="200px" toolbar="false"]This is great![/crayon]$ See http://localsite.com/ak/projects/crayon-syntax-highlighter/ for a full list